html[data-theme="dark"] {

      /* ========================================
         SURFACES
         ======================================== */

      --affine-background-primary-color: #111217 !important;
      --affine-v2-layer-background-primary: #111217 !important;

      --affine-background-secondary-color: #181B1F !important;
      --affine-v2-layer-background-secondary: #181B1F !important;

      --affine-background-tertiary-color: #22252B !important;
      --affine-v2-layer-background-tertiary: #22252B !important;

      --affine-background-overlay-panel-color: #22252B !important;
      --affine-v2-layer-background-overlayPanel: #22252B !important;

      --affine-v2-dialog-background-primary: #181B1F !important;

      --affine-v2-centerPeek-background: #111217 !important;
      --affine-v2-centerPeek-buttonBackground: #22252B !important;


      /* ========================================
         TEXT
         ======================================== */

      --affine-text-primary-color: #CCCCDC !important;
      --affine-v2-text-primary: #CCCCDC !important;

      --affine-text-secondary-color: #A9A9B3 !important;
      --affine-v2-text-secondary: #A9A9B3 !important;

      --affine-v2-text-tertiary: #8E8E9A !important;

      --affine-v2-text-placeholder: #6E6E78 !important;
      --affine-text-disable-color: #6E6E78 !important;

      --affine-v2-icon-primary: #CCCCDC !important;
      --affine-v2-icon-secondary: #A9A9B3 !important;
      --affine-v2-icon-tertiary: #6E6E78 !important;


      /* ========================================
         BORDERS / DIVIDERS
         ======================================== */

      --affine-border-color: #34363C !important;

      --affine-v2-layer-insideBorder-border: #34363C !important;
      --affine-v2-layer-insideBorder-blackBorder: #34363C !important;

      --affine-v2-database-border: #34363C !important;
      --affine-v2-table-border: #34363C !important;

      --affine-v2-tab-divider-divider: #2C2F36 !important;
      --affine-v2-block-divider-divider: #2C2F36 !important;


      /* ========================================
         PRIMARY / ACCENT
         ======================================== */

      --affine-primary-color: #5794F2 !important;
      --affine-brand-color: #5794F2 !important;

      --affine-v2-icon-activated: #5794F2 !important;
      --affine-v2-text-emphasis: #5794F2 !important;

      --affine-link-color: #6E9FFF !important;
      --affine-v2-text-link: #6E9FFF !important;

      --affine-list-color: #5794F2 !important;
      --affine-v2-text-listDotAndNumber: #5794F2 !important;


      /* ========================================
         BUTTONS
         ======================================== */

      --affine-v2-button-primary: #3274D9 !important;

      --affine-v2-button-secondary:
        rgba(204,204,220,.10) !important;

      --affine-v2-button-iconButtonSolid:
        rgba(204,204,220,.10) !important;

      --affine-v2-button-emptyIconBackground:
        rgba(204,204,220,.06) !important;

      --affine-v2-button-buttonOverHover: #3D71D9 !important;


      /* ========================================
         HOVER / ACTIVE
         ======================================== */

      --affine-hover-color:
        rgba(204,204,220,.08) !important;

      --affine-hover-color-filled: #22252B !important;

      --affine-v2-layer-background-hoverOverlay:
        rgba(204,204,220,.08) !important;

      --affine-v2-tab-tabBackground-active: #22252B !important;

      --affine-v2-switch-buttonBackground-active:
        #22252B !important;

      --affine-active-shadow:
        0 0 0 2px rgba(87,148,242,.30) !important;


      /* ========================================
         INPUTS
         ======================================== */

      --affine-v2-input-background: #111217 !important;
      --affine-v2-input-border-default: #34363C !important;
      --affine-v2-input-border-active: #5794F2 !important;
      --affine-v2-input-border-error: #F2495C !important;


      /* ========================================
         CODE
         ======================================== */

      --affine-background-code-block: #0B0C0E !important;
      --affine-v2-layer-background-codeBlock: #0B0C0E !important;

      --affine-v2-block-code-lineNum: #6E6E78 !important;


      /* ========================================
         TABLES / DATABASES
         ======================================== */

      --affine-v2-table-headerBackground-default:
        #181B1F !important;

      --affine-v2-table-headerBackground-headerColor:
        #181B1F !important;

      --affine-v2-table-focusBorder: #5794F2 !important;

      --affine-v2-table-focusBackground:
        rgba(87,148,242,.08) !important;

      --affine-v2-database-buttonBackground:
        #22252B !important;

      --affine-v2-database-cardHover:
        rgba(204,204,220,.06) !important;


      /* ========================================
         MENUS / TOOLTIPS / POPOVERS
         ======================================== */

      --affine-v2-tooltips-background: #22252B !important;
      --affine-v2-tooltips-foreground: #CCCCDC !important;

      --affine-v2-slashMenu-background: #181B1F !important;

      --affine-popover-shadow:
        0 8px 24px rgba(0,0,0,.45) !important;

      --affine-overlay-shadow:
        0 8px 24px rgba(0,0,0,.45) !important;


      /* ========================================
         STATUS
         ======================================== */

      --affine-success-color: #73BF69 !important;
      --affine-v2-status-success: #73BF69 !important;

      --affine-warning-color: #FF9830 !important;

      --affine-error-color: #F2495C !important;
      --affine-v2-status-error: #F2495C !important;


      /* ========================================
         SELECTION
         ======================================== */

      --affine-v2-edgeless-selection-selectionMarqueeBorder:
        #5794F2 !important;

      --affine-v2-edgeless-selection-selectionMarqueeBackground:
        rgba(87,148,242,.12) !important;


      /* ========================================
         SCROLLBAR
         ======================================== */

      --affine-v2-input-scrollBar-handle:
        rgba(204,204,220,.22) !important;


      /* ========================================
         CALENDAR / DATA COLORS
         ======================================== */

      --affine-v2-calendar-blue: #5794F2 !important;
      --affine-v2-calendar-green: #73BF69 !important;
      --affine-v2-calendar-orange: #FF9830 !important;
      --affine-v2-calendar-red: #F2495C !important;
    }