index.html
██████╗ ██╗ ██████╗ ██╗ ██╗ ██╔══██╗██║ ██╔═══██╗██║ ██╔╝ ██████╔╝██║ ██║ ██║█████╔╝ ██╔══██╗██║ ██║ ██║██╔═██╗ ██████╔╝███████╗╚██████╔╝██║ ██╗ ╚═════╝ ╚══════╝ ╚═════╝ ╚═╝ ╚═╝
cat ~/.config/blok/theme.css

Custom Themes

A blok theme is just CSS. The whole app is painted from a small set of CSS variables, so re-skinning it is a matter of overriding those variables under :root. No build step, no restart — paste it in and the UI re-colors instantly.

  1. Open Settings → Theme and set the base theme to custom.
  2. Paste your CSS into the Custom CSS box.
  3. Hit save. Your custom CSS only applies while the custom base theme is selected, so you can flip back to dark/light anytime.
env | grep --color BLOK_

The Variables

Override any of these. You rarely need all of them — a handful of background and text colors already transforms the app. Swatches show the default dark values.

--bg-basemain app background
--bg-surfacesidebars, channel list, panels
--bg-elevatedmodals, popovers, menus
--bg-hoverhover / active state background
--text-primaryprimary text color
--text-mutedsecondary / dimmed text
--borderlines, dividers, card borders
--accent-redprimary accent — buttons, highlights
--accent-red-textaccent used as text (keep it ≥ 4.5:1)
--onlineonline presence dot
--offlineoffline / error
--afkidle / away
--radiuscorner radius (e.g. 0 for sharp, 0.5rem for round)

For full coverage of shadcn-styled components (cards, popovers, inputs) you can also set the mirror variables:

--background, --foreground, --card, --popover, --primary, --muted, --accent, --input, --ring, --sidebar. The complex themes below show how.

blok-ai --generate-theme

Generate One With AI

Don't want to pick colors by hand? Copy this prompt into ChatGPT, Claude or any LLM, swap in the vibe you want, and paste the result straight into the Custom CSS box. Click the prompt to copy it.

> theme-generator.prompt 

        

    


    

        
ls themes/

        
10 Ready-Made Themes

        
Click any theme to copy its CSS to your clipboard, then paste it into the Custom CSS box.

        

    


    

    
copied to clipboard