Theming and dark mode

Components never name a colour. They use tokens such as bg-primary and rounded-md, so to retheme you change the token values, not the components.

Make it yours

Live

Move the sliders. Only the tokens change, and every component below follows.

Primary hue Corner radius

New Draft

Role

Notifications Remember me

The active tab underline is the primary colour too.

Paste this at the end of velvetkit.css to keep it:

The colour tokens

They're defined in app/assets/tailwind/velvetkit.css, once for light and once under .dark. Switch the theme at the top of the page to see both sets.

--background

--foreground

--primary

--primary-foreground

--secondary

--muted

--muted-foreground

--accent

--destructive

--border

--input

--card

--popover

--sidebar

Dark mode

Dark mode is on when <html> has the dark class. Add the theme toggle to let people choose light, dark or system, and render its script in your layout's <head> so the page doesn't flash light before it goes dark:

app/views/layouts/application.html.erb

<head>
  <%= render "layouts/theme_script" %>
</head>

This toggle is the same one as in the header.

Fonts

The kit doesn't choose a typeface, so components use your body font. This site uses Inter.