Themes

We've built SaaS Blocks with theming in mind. We make extensive use of CSS variables and color tokens so that your users can switch theme, change between light and dark mode easily.

Color tokens

Text

#abadc6

Heading

#fff

#323855

Layer 1

#1a1d2d

Layer 2

#1e2235

Layer 3

#252a41

Muted 1

#252a41

Muted 2

#323855

Muted 3

#424867

Primary

#2563eb

Primary accent

#1e40af

Secondary

#424867

Secondary accent

#303650

Critical

#dc2626

Critical accent

#991b1b

Some brief explanation of some types of color tokens:

Layer: the layer colors are mainly used as background colors.
Muted: the muted colors are mainly used for borders; they can also be used as background colors for some specific elements.

Setup

When using tailwind-saasblocks without further configuration, you're using our default theme which is Midnight Envy. While it's a great theme, we totally understand if you want to use another. You can easily do that with our plugin.

Here's an example of how to use our Eggshell Delights for light mode and Midnight Envy for dark mode:

// @file tailwind.config.js

const eggshellDelightsTheme = require("tailwind-saasblocks/themes/eggshell-delights.theme")
const midnightEnvyTheme = require("tailwind-saasblocks/themes/midnight-envy.theme")

module.exports = {
  darkMode: "class",
  plugins: [
    require("tailwind-saasblocks")({
      // "themes" option accepts an object in the shape
      // where the key is the name of the theme and the object is the theme object
      //
      // in order to switch theme, you can add the theme name class
      // and every child elements inside will take upon that theme
      //
      // without any classes, the default theme is the first key-value pair in "themes" object
      themes: {
        light: eggshellDelightsTheme,
        dark: midnightEnvyTheme
      }
    })
  ]
}

From this configuration, you can add .light class to your body element for your website to have light theme; same with .dark and dark theme.

Roll your own theme

You can definitely use your own color palette and set up your own color theme if you prefer. Here's what a theme typically looks like:

// each color value is the rgb value, without a comma in between
// @see https://tailwindcss.com/docs/customizing-colors#using-css-variables

const TEXT = "255 255 255"; // #fff
const HEADING = "255 255 255"; // #fff
const LAYER_0 = "255 255 255"; // #fff
const LAYER_1 = "255 255 255"; // #fff
const LAYER_2 = "255 255 255"; // #fff
const LAYER_3 = "255 255 255"; // #fff
const MUTED_1 = "255 255 255"; // #fff
const MUTED_2 = "255 255 255"; // #fff
const MUTED_3 = "255 255 255"; // #fff
const PRIMARY = "255 255 255"; // #fff
const PRIMARY_ACCENT = "255 255 255"; // #fff
const CRITICAL = "255 255 255"; // #fff
const CRITICAL_ACCENT = "255 255 255"; // #fff
const SECONDARY = "255 255 255"; // #fff
const SECONDARY_ACCENT = "255 255 255"; // #fff

// TODO: you can use whichever color you like for <hr />
const HR = MUTED_3;

module.exports = {
  colors: {
    "--color-text": TEXT,
    "--color-heading": HEADING,
    "--color-hr": HR,
    "--color-layer-0": LAYER_0,
    "--color-layer-1": LAYER_1,
    "--color-layer-2": LAYER_2,
    "--color-layer-3": LAYER_3,
    "--color-muted-1": MUTED_1,
    "--color-muted-2": MUTED_2,
    "--color-muted-3": MUTED_3,
    "--color-primary": PRIMARY,
    "--color-primary-accent": PRIMARY_ACCENT,
    "--color-critical": CRITICAL,
    "--color-critical-accent": CRITICAL_ACCENT,
    "--color-secondary": SECONDARY,
    "--color-secondary-accent": SECONDARY_ACCENT,
  },
};