Custom Themes

Tailor the visual aesthetic of fink. to match your personality using our powerful CSS-in-JS theming engine.

Theming Philosophy

Unlike legacy browsers that limit you to "Light" and "Dark" modes, fink. exposes its entire UI component tree to custom CSS via our theming engine. You can override variables, inject custom blur filters, or completely change the geometry of tabs.

Using CSS Variables

The easiest way to theme fink. is by modifying the core CSS variables in your `~/.fink/theme.css` file.

css

:root {
  --fink-bg-primary: #02000A;
  --fink-accent: #c084fc;
  --fink-glass-opacity: 0.05;
  --fink-border-radius: 16px;
  --fink-font-sans: 'Inter', sans-serif;
}

Glassmorphism Controls

Because fink. heavily utilizes glassmorphism for its native UI, you can control the intensity of the blur and the background mix-blend modes.

Increasing the `--fink-backdrop-blur` value above `24px` may cause frame drops on older hardware due to the heavy GPU fragment shader passes required.

Theme Marketplace

Don't want to write CSS? You can browse and install hundreds of community-made themes directly from the Command Palette.

Press Cmd + K to open the palette.
Type install theme.
Browse the gallery and hit Enter to apply instantly.

PreviousKeyboard Shortcuts NextLayouts & Sidebars