Custom CSS Guide

If you want to help support the developers or just have a little fun, you can try customizing your css! To get started, you can pull up the CSS menu on any page using Control + Shift + S.

If you ever mess up you can press you can press the Reset CSS button in the CSS menu. You can also use the command Control + Shift + E anwhere to reset your css.

When customizing between light and dark mode, you can use the class .light-mode-enabled in order to specify light mode only css.

      

          Dark Mode vs Light Mode
          Copy
        


/* Dark Mode */
div {
    color: white;
}

/* Light Mode */
div.light-mode-enabled {
    color: black;
}


      	

It is highly recommended to create styles around our CSS variables. If you want to fit a theme you can change these. They exist in :root for dark mode and in .light-mode for light mode. Please note that certain sections that don't support dark mode may use the .no-light-mode class to overrule any light mode variables. If you want to add dark mode support to the former, use the .light-mode-enabled class. However, this is less recommended as these styles won't load as quickly as CSS variables.

      	

          CSS Variables
          Copy
        

/* Dark Mode */
:root, .no-light-mode {
    --text-color: white;
    --opacity-hr-color: rgb(255, 255, 255, 0.25);
    --easymde-highlight-color: rgba(255, 255, 255, 0.1);
    --easymde-opacity-background-color: rgb(30, 37, 30);

    --hover: #fff;
    --base: #f1f1f1;

    --transparencybackgroundcolor: rgb(20, 20, 20, 0.8);
    --shimmer-color: rgba(20, 20, 20, 0.9);


    --colortransition: .25s;
    --heightofnavbar: 70px;
    --heightoffooter: 70px;
    --heightoffooter-mobile: 90px;


    --background-color: rgb(20, 20, 20);
    --brand-secondary: rgb(193, 168, 226);
    --brand-alternative: rgb(136, 186, 191);
    --brand-primary: #2a97ff;
    --orange-accent: #ffa500;
    --gray-body-text: rgb(180, 180, 180);
    --gray-text: rgb(200, 200, 200);
    --gray-text-hover: rgb(250, 250, 250);
    --gray-text-medium: rgb(150, 150, 150);
    --gray-text-alt: rgb(50, 50, 50);
    --gray-text-alt-hover: rgb(100, 100, 100);

    --input-border-color: #ced4da;

    --primary-font: 'Quicksand', sans-serif;
    --alt-font: 'Quicksand', sans-serif;
    --success: rgb(50, 178, 146);
    --danger: #dc3545;

    --checkbox: #00EA90;

    color-scheme: dark;
    scroll-behavior: unset;

    --autofill-webkit-text-fill-color: rgb(213, 209, 204);
    --autofill-box-shadow: rgb(59 54 0) 0px 0px 0px 100px inset !important;
    --autofill-border-color: rgb(158, 132, 0);
    --autofill-caret-color: #fff !important;

    --gray-background-color: rgb(24, 23, 24);
    --dualtone-background-color: rgb(27, 27, 27);
    --gray0-background-color: rgb(30, 30, 30);
    --gray1-background-color: rgb(32, 34, 38);

    --auto-outline-button-color: #f8f9fa;
    --auto-outline-button-opposite-color: #000;
    --auto-outline-button-box-shadow-color: rgb(248 249 250 / 50%);

    --bottom-pop-box-shadow: 0 3px 2px rgb(0 0 0 / 4%), 0 7px 5px rgb(0 0 0 / 2%), 0 13px 10px rgb(0 0 0 / 2%), 0 22px 17px rgb(0 0 0 / 2%);
    --box-shadow-color: rgb(0 0 0 / 50%);
    --item-border-color: rgb(40, 40, 40);
    --item-box-shadow-color: rgb(0 0 0 / 10%);
    --item-box-shadow-color-opposite: rgb(255 255 255 / 5%);
    --box-shadow-light-mode-pop: none;

    --background-color-light-mode-pop: none;

    --light-mode-toggle-background-color: #0d4073;

    --svg-icon-filter: none;
    --fill-color-filter: none;
    --color-text-font-weight: 500;

    --background-match-filter: invert(6%) sepia(8%) saturate(219%) brightness(94%) contrast(95%);
    --light-mode-brightened-filter: none;
    --image-loading-shimmer: linear-gradient(to bottom, #191919 4%, #232323 25%, #191919 36%);

    --code-block-header: bisque;

    --colored-circle-box-shadow: rgb(36 36 36 / 80%);
    --sidebar-box-shadow: rgb(0 0 0 / 50%) 0px 0px 20px 1px;
    --nav-box-shadow: rgb(0 0 0 / 50%) 0px 0px 18px 6px;
    --brand-muted: var(--gray1-background-color);

    --custom-scrollbar-color: #00bd86;

    --notes-background: #85abcd;
    --notes-text-color: #392e2f;

    --dark-pop-brightness: brightness(2.0);
    --dark-brightness: brightness(1.5);
}

/* Dark Mode With Support Everywhere */
:root {
    --transparencymodalbackgroundcolor: rgba(15, 15, 15, 0.8);
}

/* Light Mode */
.light-mode, .no-dark-mode {
    --text-color: black;
    --opposite-text-color: white;
    --opacity-hr-color: rgb(0, 0, 0, 0.25);
    --easymde-highlight-color: rgba(0, 0, 0, 0.1);
    --easymde-opacity-background-color: rgb(240, 247, 240);

    --hover: #000;
    --base: #111111;

    color-scheme: light;

    --brand-secondary: rgb(175, 139, 224);
    --brand-alternative: rgb(136, 186, 191);
    --brand-primary: #009eff;
    --orange-accent: #ffc107;

    --transparencybackgroundcolor: rgba(250, 250, 250, 0.8);

    --transparencymodalbackgroundcolor: rgb(30 30 30 / 80%);

    --background-color: rgb(250, 250, 250);
    --shimmer-color: rgba(250, 250, 250, 0.9);

    --auto-outline-button-color: #212529;
    --auto-outline-button-opposite-color: #fff;
    --auto-outline-button-box-shadow-color: rgb(33 37 41 / 50%);

    --dualtone-background-color: rgb(0, 0, 0);
    --gray0-background-color: rgb(255, 255, 255);
    --gray-background-color: rgb(250, 250, 250);

    --gray-text-alt: rgb(220, 220, 220);
    --gray-text-alt-hover: rgb(170, 170, 170);
    --gray-text-medium: rgb(150, 150, 150);
    --gray-body-text: rgb(120, 120, 120);
    --gray-text: rgb(70, 70, 70);
    --gray-text-hover: rgb(20, 20, 20);

    --input-border-color: rgb(100, 100, 100);

    --autofill-webkit-text-fill-color: var(--text-color);
    --autofill-box-shadow: rgb(255, 254, 242) 0px 0px 0px 100px inset !important;
    --autofill-border-color: rgb(255, 224, 68);
    --autofill-caret-color: unset;

    --box-shadow-color: rgb(255 255 255 / 50%);
    --item-border-color: rgb(150, 150, 150);
    --item-box-shadow-color: rgb(200 200 200 / 10%);
    --item-box-shadow-color-opposite: rgb(0 0 0 / 15%);
    --box-shadow-light-mode-pop: rgb(0 0 0 / 8%);

    --background-color-light-mode-pop: rgb(255, 255, 255);

    --light-mode-toggle-background-color: #000;

    --svg-icon-filter: invert(100%);
    --fill-color-filter: invert(96%) sepia(0%) saturate(7496%) hue-rotate(292deg) brightness(103%) contrast(108%);
    --light-mode-brightened-filter: brightness(1.1);
    --color-text-font-weight: 600;

    --background-match-filter: saturate(16) hue;
    --image-loading-shimmer: linear-gradient(to bottom, #eeeeee 4%, #dddddd 25%, #eeeeee 36%);

    --code-block-header: steelblue;

    --colored-circle-box-shadow: rgb(200 200 200 / 80%);
    --sidebar-box-shadow: rgb(0 0 0 / 25%) 0px 0px 11px 1px;
    --nav-box-shadow: rgb(0 0 0 / 25%) 0px 0px 11px 1px;
    --brand-muted: var(--brand-primary);

    --custom-scrollbar-color: #ceb9ff;

    --notes-background: #fff5ce;

    --dark-pop-brightness: brightness(1.5);
    --dark-brightness: brightness(1.0);
}


      	

For safety and security reasons, custom css isn't available on the checkout page. Additionally, the following properties cannot be set:

• opacity
• display
• visibility
• transition

If your facing issues you can always contact us or report a bug. You can also report a bug by pressing Control + Shift + F on any page.