Global colors

In Tailwind CSS 4, Silicon global colors are customized using CSS Custom Properties.

Silicon uses a modern, scalable theming system based on CSS variables defined inside the css/_config.css file. These variables are consumed by Tailwind utility classes across the entire template.

Customize global colors via CSS variables

To customize your color scheme, edit the variables inside the @theme block.

@theme {
    --color-body-bg: #ffffff;
    --color-body-color: #576071;

    --color-primary: #448c74;
    --color-primary-hover: #37715d;
    ...
}
        

Once updated, Tailwind utilities such as bg-default-100, text-default-800, and border-default-200 will automatically reflect your changes.

Light & Dark mode color overrides

You can override colors per theme by defining variables inside .light and .dark scopes.

.dark {
  --color-body-bg: #0f172a;
  --color-body-color: #cbd5f5;
}

.light {
  --color-body-bg: #ffffff;
  --color-body-color: #576071;
}
        

No rebuild or recompilation is required — changes apply instantly.