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 here or 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 +Eanwhere 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.