Theming

fromsrc uses CSS variables for theming, making it easy to customize.

CSS variables

Add these to your global CSS:

css

:root {
  --bg: #0a0a0a;
  --surface: #141414;
  --line: #1c1c1c;
  --fg: #fafafa;
  --muted: #737373;
  --dim: #525252;
  --accent: #ef4444;
}

Tailwind config

Map the variables in your Tailwind config:

export default {
  theme: {
    extend: {
      colors: {
        bg: "var(--bg)",
        surface: "var(--surface)",
        line: "var(--line)",
        fg: "var(--fg)",
        muted: "var(--muted)",
        dim: "var(--dim)",
        accent: "var(--accent)",
      },
    },
  },
};

Color system

variable	purpose
bg	page background
surface	elevated surfaces, cards
line	borders, dividers
fg	primary text
muted	secondary text
dim	tertiary text
accent	interactive elements

Light mode

Add light mode colors with a class or media query:

css

.light {
  --bg: #ffffff;
  --surface: #f5f5f5;
  --line: #e5e5e5;
  --fg: #0a0a0a;
  --muted: #737373;
  --dim: #a3a3a3;
  --accent: #dc2626;
}

Theme toggle

Use the ThemeToggle component for light/dark mode switching:

tsx

import { ThemeToggle } from "fromsrc/client";

<ThemeToggle />;

The toggle persists the user's choice in localStorage.

System preference

Respect the user's system preference with a media query:

css

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --surface: #f5f5f5;
    --line: #e5e5e5;
    --fg: #0a0a0a;
    --muted: #737373;
    --dim: #a3a3a3;
  }
}

Component styles

All components use these semantic colors. Change the variables to theme everything at once.

Custom themes

Create named themes by defining classes:

css

.theme-blue {
  --accent: #3b82f6;
}

.theme-green {
  --accent: #22c55e;
}

.theme-purple {
  --accent: #a855f7;
}

Then apply the class to your root element based on user preference.