Dark theme CSS for PocketBase Admin dashboard (apply via Stylus or similar extension) [v0.30.0]

dark-mode.css

:root {
  --baseFontFamily: "Source Sans 3", sans-serif, emoji;
  --monospaceFontFamily: "Ubuntu Mono", monospace, emoji;
  --iconFontFamily: "remixicon";

  /* Text */
  --txtPrimaryColor: #e5e7eb;     /* near-gray-200 */
  --txtHintColor:    #9aa4b2;     /* slate-400 */
  --txtDisabledColor:#6b7280;     /* gray-500 */

  /* Brand / Accents */
  --primaryColor: #7aa2f7;        /* soft blue */

  /* Surfaces */
  --bodyColor:   #0e1117;         /* app background */
  --baseColor:   #11161c;         /* cards / panels */
  --baseAlt1Color:#1a222b;
  --baseAlt2Color:#202836;
  --baseAlt3Color:#273244;
  --baseAlt4Color:#3b455a;

  /* Semantic */
  --infoColor:    #60a5fa;        /* blue-400 */
  --infoAltColor: #1b2738;
  --successColor: #34d399;        /* green-400 */
  --successAltColor:#0f2a23;
  --dangerColor:  #f87171;        /* red-400 */
  --dangerAltColor:#3b1114;
  --warningColor: #fb923c;        /* orange-400 */
  --warningAltColor:#3a2410;

  /* Overlays / Misc */
  --overlayColor: rgba(0, 0, 0, .55);
  --tooltipColor: rgba(0, 0, 0, .55);
  --shadowColor:  rgba(0, 0, 0, .5);

  /* Sizing / rhythm (unchanged) */
  --baseFontSize: 14.5px;
  --xsFontSize: 12px;
  --smFontSize: 13px;
  --lgFontSize: 15px;
  --xlFontSize: 16px;
  --baseLineHeight: 22px;
  --smLineHeight: 16px;
  --lgLineHeight: 24px;
  --inputHeight: 34px;
  --btnHeight: 40px;
  --xsBtnHeight: 22px;
  --smBtnHeight: 30px;
  --lgBtnHeight: 54px;
  --baseSpacing: 30px;
  --xsSpacing: 15px;
  --smSpacing: 20px;
  --lgSpacing: 50px;
  --xlSpacing: 60px;
  --wrapperWidth: 850px;
  --smWrapperWidth: 420px;
  --lgWrapperWidth: 1200px;
  --appSidebarWidth: 75px;
  --pageSidebarWidth: 235px;
  --baseAnimationSpeed: .15s;
  --activeAnimationSpeed: 70ms;
  --entranceAnimationSpeed: .25s;
  --baseRadius: 4px;
  --lgRadius: 12px;
  --btnRadius: 4px;

  accent-color: var(--primaryColor);
}

.btn.btn-outline {
    background: var(--backgroundColor);
}