Inject Webflow’s native dark theme into the Dashboard with lightweight CSS.

wf-dark-dashboard.user.js

// ==UserScript==
// @name         Webflow Dark Dashboard
// @namespace    https://gist.github.com/jdanamato/48516ee72fa5146a98dce8b0d88f00ac
// @version      1.0.0
// @description  Inject Webflow’s native dark theme into the Dashboard with lightweight CSS.
// @author       Joseph Amato
// @match        https://webflow.com/dashboard*
// @run-at       document-idle
// @grant        none
// ==/UserScript==


(function () {
  'use strict';

  // Single CSS payload. Overrides Dashboard with native Webflow dark theme
  const css = `
/* Target any class that starts with ".wf-" and ".css-" */
[class*="wf-"], [class*="css-"] {
  --box-shadows-0: 0 0px 0px 0 !important;
  --box-shadows-1: 0 1px 3px -1px rgba(0, 0, 0, 0.4) !important;
  --box-shadows-2: -39 0.5px 2px -1px rgba(0, 0, 0, 0.34), 0 3px 6px -2px rgba(0, 0, 0, 0.36) !important;
  --box-shadows-3: 0 1px 3px -1px rgba(0, 0, 0, 0.34), 0 5px 10px -2px rgba(0, 0, 0, 0.32) !important;
  --box-shadows-4: 0 1.5px 4px -1px rgba(0, 0, 0, 0.34), 0 8px 20px -3px rgba(0, 0, 0, 0.28) !important;
  --box-shadows-5: 0 1.5px 4px -1px rgba(0, 0, 0, 0.3), 0 10px 35px -4px rgba(0, 0, 0, 0.25) !important;
  --box-shadows-action-colored: 0px 0.5px 1px 0px rgba(0, 0, 0, 0.8), 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.20) inset !important;
  --box-shadows-action-secondary: 0px 0.5px 1px rgba(0, 0, 0, 0.8), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.12) !important;
  --box-shadows-ui-select: 0px 0.5px 1px rgba(0, 0, 0, 0.8), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.12) !important;
  --box-shadows-input-inner: 0px 1px 1px -1px rgba(0, 0, 0, 0.13) inset, 0px 3px 3px -3px rgba(0, 0, 0, 0.17) inset, 0px 4px 4px -4px rgba(0, 0, 0, 0.17) inset, 0px 8px 8px -8px rgba(0, 0, 0, 0.17) inset, 0px 12px 12px -12px rgba(0, 0, 0, 0.13) inset, 0px 16px 16px -16px rgba(0, 0, 0, 0.13) inset !important;
  --box-shadows-menu: 0px 12px 24px 8px rgba(0, 0, 0, 0.08), 0px 8px 16px 4px rgba(0, 0, 0, 0.08), 0px 4px 8px 2px rgba(0, 0, 0, 0.08), 0px 2px 6px 0px rgba(0, 0, 0, 0.08), 0px -0.5px 0.5px 0px rgba(0, 0, 0, 0.12) inset, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.12) inset !important;
  --colors-action-primary-background: var(--wf-system---blue-300) !important;
  --colors-action-primary-background-hover: var(--wf-system---blue-200) !important;
  --colors-action-primary-text: var(--wf-system---white) !important;
  --colors-action-primary-text-hover: var(--wf-system---white) !important;
  --colors-action-secondary-background: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.11) 100%) !important;
  --colors-action-secondary-background-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.19) 0%, rgba(255, 255, 255, 0.17) 100%) !important;
  --colors-action-secondary-background-pressed: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
  --colors-action-secondary-selected-background: var(--wf-system---black-a-50) !important;
  --colors-action-secondary-selected-background-pressed: var(--wf-system---black-a-50) !important;
  --colors-action-secondary-text: var(--wf-system---gray-100) !important;
  --colors-action-secondary-text-hover: var(--wf-system---gray-100) !important;
  --colors-action-secondary-border: var(--wf-system---white-a-13) !important;
  --colors-action-secondary-border-hover: var(--wf-system---white-a-22) !important;
  --colors-action-white-ghost-background-hover: var(--colors-action-secondary-background-hover) !important;
  --colors-action-white-ghost-background-selected: var(--colors-action-secondary-selected-background) !important;
  --colors-action-white-outline-background-selected: var(--colors-action-secondary-selected-background) !important;
  --colors-action-white-outline-border: var(--colors-action-secondary-border) !important;
  --colors-action-white-outline-border-hover: var(--colors-action-secondary-border-hover) !important;
  --colors-action-white-solid-background-hover: var(--colors-action-secondary-background) !important;
  --colors-background-1: var(--wf-system---gray-1200) !important;
  --colors-background-2: var(--wf-system---gray-1100) !important;
  --colors-background-3: var(--wf-system---gray-1000) !important;
  --colors-background-4: var(--wf-system---gray-900) !important;
  --colors-background-5: var(--wf-system---gray-800) !important;
  --colors-background-primary: var(--wf-system---gray-1200) !important;
  --colors-background-primary-disabled: var(--wf-system---gray-1100) !important;
  --colors-background-secondary: var(--wf-system---gray-1000) !important;
  --colors-background-tertiary: var(--wf-system---gray-900) !important;
  --colors-background-inactive: var(--wf-system---gray-1100) !important;
  --colors-background-inverse: var(--wf-system---gray-100) !important;
  --colors-background-inverse-hover: var(--wf-system---gray-100) !important;
  --colors-border-default: var(--colors-border-1) !important;
  --colors-border-text-input: var(--colors-ui-input-border-color) !important;
  --colors-border-checkbox-radio: var(--colors-ui-checkbox-radio-border-color) !important;
  --colors-blue-background: var(--wf-system---blue-300) !important;
  --colors-blue-background-hover: var(--wf-system---blue-200) !important;
  --colors-blue-background-pressed: var(--wf-system---blue-300) !important;
  --colors-blue-border: var(--wf-system---blue-400) !important;
  --colors-blue-canvas: var(--wf-system---blue-400) !important;
  --colors-blue-canvas-hover: var(--wf-system---blue-300) !important;
  --colors-blue-canvas-transparent: var(--wf-system---blue-a-10) !important;
  --colors-blue-icon: var(--wf-system---blue-100) !important;
  --colors-blue-outline: 0 0 0 2px var(--wf-system---d1-blue-a-20) !important;
  --colors-blue-text: var(--wf-system---blue-100) !important;
  --colors-blue-transparent: var(--wf-system---blue-a-25) !important;
  --colors-blue-transparent-hover: var(--wf-system---blue-a-35) !important;
  --colors-border-1: var(--wf-system---white-a-13) !important;
  --colors-border-2: var(--wf-system---white-a-16) !important;
  --colors-border-3: var(--wf-system---white-a-19) !important;
  --colors-border-4: var(--wf-system---white-a-19) !important;
  --colors-close-button-background: var(--wf-system---white-a-10) !important;
  --colors-gray-icon: var(--wf-system---gray-400) !important;
  --colors-green-background: var(--wf-system---green-300) !important;
  --colors-green-background-hover: var(--wf-system---green-200) !important;
  --colors-green-background-pressed: var(--wf-system---green-300) !important;
  --colors-green-border: var(--wf-system---green-400) !important;
  --colors-green-canvas: var(--wf-system---green-400) !important;
  --colors-green-canvas-hover: var(--wf-system---green-300) !important;
  --colors-green-canvas-transparent: var(--wf-system---green-a-10) !important;
  --colors-green-icon: var(--wf-system---green-100) !important;
  --colors-green-outline: 0 0 0 2px var(--wf-system---d1-green-a-20) !important;
  --colors-green-text: var(--wf-system---green-100) !important;
  --colors-green-transparent: var(--wf-system---green-a-25) !important;
  --colors-green-transparent-hover: var(--wf-system---green-a-35) !important;
  --colors-orange-background: var(--wf-system---orange-300) !important;
  --colors-orange-background-hover: var(--wf-system---orange-200) !important;
  --colors-orange-background-pressed: var(--wf-system---orange-300) !important;
  --colors-orange-border: var(--wf-system---orange-400) !important;
  --colors-orange-canvas: var(--wf-system---orange-400) !important;
  --colors-orange-canvas-hover: var(--wf-system---orange-300) !important;
  --colors-orange-canvas-transparent: var(--wf-system---orange-a-10) !important;
  --colors-orange-icon: var(--wf-system---orange-100) !important;
  --colors-orange-text: var(--wf-system---orange-100) !important;
  --colors-orange-transparent: var(--wf-system---orange-a-20) !important;
  --colors-orange-transparent-hover: var(--wf-system---orange-a-30) !important;
  --colors-pink-background: var(--wf-system---pink-300) !important;
  --colors-pink-background-hover: var(--wf-system---pink-200) !important;
  --colors-pink-background-pressed: var(--wf-system---pink-300) !important;
  --colors-pink-border: var(--wf-system---pink-400) !important;
  --colors-pink-canvas: var(--wf-system---pink-400) !important;
  --colors-pink-canvas-hover: var(--wf-system---pink-300) !important;
  --colors-pink-canvas-transparent: var(--wf-system---pink-a-10) !important;
  --colors-pink-icon: var(--wf-system---pink-100) !important;
  --colors-pink-outline: 0 0 0 2px var(--wf-system---d1-pink-a-20) !important;
  --colors-pink-text: var(--wf-system---pink-100) !important;
  --colors-pink-transparent: var(--wf-system---pink-a-25) !important;
  --colors-pink-transparent-hover: var(--wf-system---pink-a-35) !important;
  --colors-purple-background: var(--wf-system---purple-300) !important;
  --colors-purple-background-hover: var(--wf-system---purple-200) !important;
  --colors-purple-background-pressed: var(--wf-system---purple-300) !important;
  --colors-purple-border: var(--wf-system---purple-400) !important;
  --colors-purple-canvas: var(--wf-system---purple-400) !important;
  --colors-purple-canvas-hover: var(--wf-system---purple-300) !important;
  --colors-purple-icon: var(--wf-system---purple-100) !important;
  --colors-purple-outline: 0 0 0 2px var(--wf-system---d1-purple-a-20) !important;
  --colors-purple-text: var(--wf-system---purple-100) !important;
  --colors-purple-transparent: var(--wf-system---purple-a-25) !important;
  --colors-purple-transparent-hover: var(--wf-system---purple-a-35) !important;
  --colors-red-background: var(--wf-system---red-300) !important;
  --colors-red-background-hover: var(--wf-system---red-200) !important;
  --colors-red-background-pressed: var(--wf-system---red-300) !important;
  --colors-red-border: var(--wf-system---red-400) !important;
  --colors-red-canvas: var(--wf-system---red-400) !important;
  --colors-red-canvas-hover: var(--wf-system---red-300) !important;
  --colors-red-canvas-transparent: var(--wf-system---red-a-10) !important;
  --colors-red-icon: var(--wf-system---red-100) !important;
  --colors-red-outline: 0 0 0 2px var(--wf-system---d1-red-a-20) !important;
  --colors-red-text: var(--wf-system---red-100) !important;
  --colors-red-transparent: var(--wf-system---red-a-25) !important;
  --colors-red-transparent-hover: var(--wf-system---red-a-35) !important;
  --colors-text-4: var(--wf-system---gray-500) !important;
  --colors-text-heading: white !important;
  --colors-text-primary: var(--wf-system---gray-0) !important;
  --colors-text-white-primary: var(--wf-system---gray-0) !important;
  --colors-text-white-secondary: var(--wf-system---gray-100) !important;
  --colors-text-active: var(--wf-system---gray-100) !important;
  --colors-text-default: var(--wf-system---gray-400) !important;
  --colors-text-secondary: var(--wf-system---gray-500) !important;
  --colors-text-placeholder: var(--wf-system---gray-550) !important;
  --colors-text-dimmed: var(--wf-system---white-a-50) !important;
  --colors-text-inverse: var(--wf-system---gray-1200) !important;
  --colors-title: var(--wf-system---gray-100) !important;
  --colors-ui-autocomplete-list-box-background: var(--wf-system---gray-1000) !important;
  --colors-ui-avatar-colored-text-disabled: var(--opacities-disabled) !important;
  --colors-ui-avatar-default-text-disabled: var(--opacities-disabled) !important;
  --colors-ui-avatar-shadow: var(--box-shadows-ui-select) !important;
  --colors-ui-background-hover: var(--wf-system---white-a-7) !important;
  --colors-ui-background-active: var(--wf-system---white-a-7) !important;
  --colors-ui-badge-background: var(--wf-system---gray-100) !important;
  --colors-ui-badge-background-hover: var(--wf-system---gray-300) !important;
  --colors-ui-badge-background-pressed: var(--wf-system---gray-100) !important;
  --colors-ui-border-solid: #3b3b3b !important;
  --colors-ui-button-group-active: var(--wf-system---black-a-50) !important;
  --colors-ui-card-background: var(--wf-system---white-a-7) !important;
  --colors-ui-canvas-background: var(--wf-system---gray-1000) !important;
  --colors-ui-checkbox-radio-border-color: var(--wf-system---white-a-19) !important;
  --colors-ui-input-background: var(--wf-system---black-a-22) !important;
  --colors-ui-input-border-color: var(--wf-system---white-a-16) !important;
  --colors-ui-input-border-color-hover: var(--wf-system---white-a-19) !important;
  --colors-ui-menu-content-background: var(--wf-system---gray-1000) !important;
  --colors-ui-menu-divider: var(--wf-system---white-a-13) !important;
  --colors-ui-modal-backdrop: var(--wf-system---black-a-70) !important;
  --colors-ui-note-background: var(--wf-system---white-a-7) !important;
  --colors-ui-popover-backdrop: var(--wf-system---black-a-60) !important;
  --colors-ui-segmented-control-active: var(--wf-system---black-a-50) !important;
  --colors-ui-table-zebra-stripe-background: rgba(255, 255, 255, 0.02) !important;
  --colors-ui-select-background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
  --colors-ui-select-background-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
  --colors-ui-select-border: transparent !important;
  --colors-yellow-background: var(--wf-system---yellow-400) !important;
  --colors-yellow-background-hover: var(--wf-system---yellow-100) !important;
  --colors-yellow-background-pressed: var(--wf-system---yellow-400) !important;
  --colors-yellow-border: var(--wf-system---yellow-400) !important;
  --colors-yellow-canvas: var(--wf-system---yellow-400) !important;
  --colors-yellow-canvas-hover: var(--wf-system---yellow-100) !important;
  --colors-yellow-canvas-transparent: var(--wf-system---yellow-a-10) !important;
  --colors-yellow-icon: var(--wf-system---yellow-400) !important;
  --colors-yellow-outline: 0 0 0 2px var(--wf-system---d1-yellow-a-20) !important;
  --colors-yellow-text: var(--wf-system---yellow-400) !important;
  --colors-yellow-transparent: var(--wf-system---yellow-a-15) !important;
  --colors-yellow-transparent-hover: var(--wf-system---yellow-a-25) !important;
  --controls-opacity-disabled: var(--opacities-disabled) !important;
  --opacities-default: 1 !important;
  --opacities-low: 0.8 !important;
  --opacities-minimum: 0.7 !important;
  --opacities-disabled: 0.6 !important;
}

/* --- GENERAL --- */

/* Modals */
.wf-r9lins, .wf-mrj01a {
  background-color: var(--colors-background-1) !important;
}

/* Webflow logo */
.wf-1b0zz21 svg {
  fill: var(--colors-background-inverse) !important;
}

/* --- TOGGLES + CONTROLS --- 
[aria-checked="true"] {
  background-color: var(--colors-ui-segmented-control-active) !important;
} */

/* --- BANNERS --- */
.wf-4gja8 {
  background-color: var(--colors-background-1) !important;
  color: var(--colors-text-primary) !important;
}

/* --- NOTES/CALLOUTS --- */

/* Subtle */
.wf-1orlvd5 {
  background-color: var(--colors-background-1) !important;
  color: var(--colors-text-primary) !important;
}

/* --- TOOLTIPS --- */

/* Text/label */
.wf-39jk9g {
  color: var(--colors-text-primary) !important;
}

/* Background */
.wf-19giqij, .wf-1fwjvfg {
  background-color: var(--colors-background-2) !important;
}

/* Arrow */
.wf-17awx6a {
  fill: var(--colors-background-2) !important;
}

/* --- TABLES --- */
table .wf-1pmqwsw {
  white-space: pre-wrap !important;
  word-break: break-all !important;
}

table .wf-p86u5l {
  justify-content: space-between !important;
}

table .wf-138ugsq {
  display: inline !important;
}
`;

  function injectCSSOnce() {
    if (document.getElementById('wf-dark-dash-userscript')) return;
    const style = document.createElement('style');
    style.id = 'wf-dark-dash-userscript';
    style.type = 'text/css';
    style.textContent = css;
    (document.head || document.documentElement).appendChild(style);
  }

  // Run at idle or when DOM is ready—no blocking of first paint
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    injectCSSOnce();
  } else {
    window.addEventListener('DOMContentLoaded', injectCSSOnce, { once: true });
  }

  // Lightweight SPA navigation re-check
  const checkOnce = () => {
    // microtask timing lets SPA transitions settle
    Promise.resolve().then(injectCSSOnce);
  };

  const origPushState = history.pushState;
  const origReplaceState = history.replaceState;
  history.pushState = function (...args) {
    const ret = origPushState.apply(this, args);
    checkOnce();
    return ret;
  };
  history.replaceState = function (...args) {
    const ret = origReplaceState.apply(this, args);
    checkOnce();
    return ret;
  };
  window.addEventListener('popstate', checkOnce);

})();