Adaptive Themes

Themes are built in, and adaptive by default.

Themes are a first class citizen in BaseLayer and are adaptive by default.

When running the init command, a global.css file is edited or created, as well as an updated tailwind.config. By doing that themes powered by CSS Variables can be installed and ready to use.

The idea behind adaptive theming is that setting a color to bg-primary via css variable will allow the color to be switched automatically depending on what theme is set!

Default Themes

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --origin: translateX(8px);

    --surface: 250 250 250; /* #fafafa */
    --surface-2: 229 229 229; /* #e5e5e5 */
    --surface-3: 212 212 212; /* 	#d4d4d4 */
    --surface-4: 163 163 163; /* 	#a3a3a3 */

    --border: 229 229 229; /* #e5e5e5 */
    --input: 229 229 229; /* #e5e5e5 */
    --focus: 14 165 233; /* #0ea5e9 */

    /* fg hierarchy */
    --fg: 10 10 10; /* #0a0a0a */
    --fg-2: 23 23 23; /* #171717 */
    --fg-3: 38 38 38; /* #262626 */
    --fg-4: 64 64 64; /* #404040 */
    --fg-5: 82 82 91; /* #52525b */
    --fg-6: 115 115 115; /* #737373 */

    --primary: 9 229 123; /* #09e57b  */
    --primary-fg: 10 10 10; /* #0a0a0a */

    --secondary: 10 10 10; /* #0a0a0a*/
    --secondary-fg: 255 255 255; /* #fafafa  */

    --positive: 109 211 46; /* #6DD32E */
    --positive-fg: 10 10 10; /* #0a0a0a */

    --warning: 237 227 40; /* #EDE328 */
    --warning-fg: 10 10 10; /* #0a0a0a */

    --critical: 255 82 56; /* #FF5238 */
    --critical-fg: 10 10 10; /* #0a0a0a */
  }
  [data-theme="dark"] {
    --surface: 10 10 10; /* 	#0f172a */
    --surface-2: 30 41 59; /* #1e293b */
    --surface-3: 51 65 85; /* 	#334155 */
    --surface-4: 71 85 105; /* 	#475569 */

    --border: 30 41 59; /* #1e293b  */
    --input: 30 41 59; /* #1e293b  */
    --focus: 14 165 233; /* #0ea5e9 */

    /* fg hierarchy */
    --fg: 248 250 252; /*  #f8fafc*/
    --fg-2: 241 245 249; /* #f1f5f9*/
    --fg-3: 226 232 240; /* #e2e8f0 */
    --fg-4: 203 213 225; /* #cbd5e1 */
    --fg-5: 148 163 184; /* #94a3b8 */
    --fg-6: 100 116 139; /* #64748b */

    --primary: 9 229 123; /* #09e57b   */
    --primary-fg: 10 10 10; /* #0a0a0a */

    --secondary: 250 250 250; /* #fafafa */
    --secondary-fg: 10 10 10; /* #0a0a0a */

    --positive: 109 211 46; /* #6DD32E */
    --positive-fg: 10 10 10; /* #0a0a0a */

    --warning: 237 227 40; /* #EDE328 */
    --warning-fg: 10 10 10; /* #0a0a0a */

    --critical: 255 82 56; /* #FF5238 */
    --critical-fg: 10 10 10; /* #0a0a0a */
  }
  /* clears the ‘X’ from Internet Explorer */
  input[type="search"]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
  }
  input[type="search"]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
  }
  /* clears the ‘X’ from Chrome */
  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-results-button,
  input[type="search"]::-webkit-search-results-decoration {
    display: none;
  }
}

.react-aria-DropIndicator[data-drop-target] {
  outline: 1px solid #09e57b;
}

Conventions

The theme conventions consist of

  1. surface(1-4) - used for backgrounds
  2. border, input, focus
  3. fg(1-6) - usually grays, use for foreground text hierarchy
  4. primary and primary-fg - your main brand color and its foreground color
  5. secondary and secondary-fg - your secondary brand color and its foreground color
  6. positive and positive-fg - used to indicate things like success, positive trends, completions, etc.
  7. warning and warning-fg - used to draw caution
  8. critical and critical-fg - used to signal danger, or any type of descrutcive action

Changing Themes

The themes are set via [data-theme=“light”] [data-theme=“dark”], etc.

A good way to change themes is to use a library like Theme-change or Next-Themes