Color Scheme

You can choose one of the predefined color schemes or define a custom scheme without editing the theme source code. Let's start with the Dark Mode.

Dark Mode

Bento supports Dark Mode out of the box! There are three behaviors:

system (it reflects the OS settings light/dark/auto)
manual (it shows a toggle to override the OS settings)
disabled (it sets light mode regardless of the OS settings)

To select your preferred dark mode, please go to Site → Design & branding → Side wide and look for the dropdown menu labeled "Dark mode".

The "manual" option inherits the OS settings, which can be overridden by the toggle in the top right corner. This override is persistent across the session. It uses local storage with the key "data_mode" and values either "light" or "dark" (no privacy concerns). Whenever you toggle back to the OS setting, the local storage is deleted, and Bento follows the OS setting again. Pretty cool, huh? 🤤

To upload a dark mode logo, please go to Site → Design & branding → Side wide and look for the upload labeled "Dark mode logo". If you do not upload a logo for the dark mode, the default site logo will be shown.

The default setting is "system".

Predefined Color Schemes

The Bento theme comes with 22 predefined color schemes. 🎨

red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, grey, zinc, neutral, stone

These color schemes come from the TailwindCSS framework.

To select your preferred color scheme, please go to Site → Design & branding → Side wide and look for the dropdown menu labeled "Color scheme".

The default color scheme is blue.

🎨

Despite choosing a color scheme, the built-in Ghost Accent Color is still used in some places, such as the Ghost Portal, Ghost Editor Cards, and Announcement Bar. Hence, it is recommended that you manually match the Ghost Accent Color to your chosen color scheme. First, find your corresponding color scheme in TailwindCSS and copy the value of the color labeled "500". Then, set this color as an Accent Color in Site → Design & branding → Brand.

Custom Color Scheme

The Bento theme can be extended by creating a completely custom color scheme to match your brand.

To choose a custom color scheme, please go to Site → Design & branding → Site wide and look for the dropdown menu labeled "Color scheme". Choose "custom". Then define the custom colors by pasting and editing the following custom code in Site → Advanced → Code Injection.

<style>
  :root {
      --white: #ffffff;
      --custom-50: #eff6ff;
      --custom-100: #dbeafe;
      --custom-200: #bfdbfe;
      --custom-300: #93c5fd;
      --custom-400: #60a5fa;
      --custom-500: #3b82f6;
      --custom-600: #2563eb;
      --custom-700: #1d4ed8;
      --custom-800: #1e40af;
      --custom-900: #1e3a8a;
      --custom-950: #172554;
      --black: #000000;
  }
  
  /* Dark mode (manual) */
  [data-mode="dark"] {
      /* white and custom-50 are intentionally swapped */
      --white: #172554;
      --custom-50: #000000;
      --custom-100: #1e3a8a;
      --custom-200: #1e40af;
      --custom-300: #1d4ed8;
      --custom-400: #2563eb;
      --custom-500: #3b82f6;
      --custom-600: #60a5fa;
      --custom-700: #93c5fd;
      --custom-800: #bfdbfe;
      --custom-900: #dbeafe;
      --custom-950: #eff6ff;
      --black: #ffffff;
  }
  
  /* Dark mode (system), BUT should correspond to Dark mode (manual) */
  @media (prefers-color-scheme: dark) {
      :root:not([data-mode="light"]) {
          /* white and custom-50 are intentionally swapped */
          --white: #172554;
          --custom-50: #000000;
          --custom-100: #1e3a8a;
          --custom-200: #1e40af;
          --custom-300: #1d4ed8;
          --custom-400: #2563eb;
          --custom-500: #3b82f6;
          --custom-600: #60a5fa;
          --custom-700: #93c5fd;
          --custom-800: #bfdbfe;
          --custom-900: #dbeafe;
          --custom-950: #eff6ff;
          --black: #ffffff;
      }
  }
</style>

Your brand color should correspond to the "custom-500" color and should get lighter as it goes lower (down to 50) and darker as it goes higher (up to 950). The "custom-50" will be used for the background color.

Here is a useful tool to generate a color palette: