A live color theme and font pairing preview drawer for web applications
npm install theme-forseenA live color theme and font pairing preview drawer for websites. Browse and preview different color schemes and font combinations in real-time.
More details on YouTube.
- CSS Variables - Sets --color-primary, --font-heading, etc. on for any CSS to consume
- Live Color Theme Preview - Curated color palettes with instant visual feedback
- Font Pairing Preview - Thoughtful, beautiful font combinations
- Light & Dark Mode Support - Separate themes for each mode
- Dev Server - Write CSS variables directly to your project files with one click
- Smart Project Detection - Auto-detects Next.js, Vite, Astro, and other frameworks
- Keyboard Navigation - Arrow keys to browse options
- Mouse Wheel Support - Scroll through themes and fonts
- Framework Agnostic - Works with plain CSS, Tailwind, or any CSS framework
``bash`
npm install theme-forseen
Use these CSS variables in your stylesheets:
`
--color-primary
--color-primary-shadow
--color-accent
--color-accent-shadow
--color-bg
--color-card-bg
--color-text
--color-extra
--font-heading
--font-body
` This is my first HTML page.html`
Hello World
- Create a Vite app:
`bash`
npm create vite@latest my-app -- --template vanilla
cd my-app
- Install Tailwind and ThemeForseen:
`bash`
npm install tailwindcss @tailwindcss/vite theme-forseen
- Create vite.config.js:
`js`
import tailwindcss from "@tailwindcss/vite";
export default { plugins: [tailwindcss()] };
- Replace index.html:
`html`
- Replace src/main.js:
`js
import './style.css'
import 'theme-forseen'
document.querySelector('#app').innerHTML =
Preview color themes and font pairings in real-time.
- Replace
:`css
@import "tailwindcss";@theme inline {
--color-primary: var(--color-primary);
--color-primary-shadow: var(--color-primary-shadow);
--color-accent: var(--color-accent);
--color-accent-shadow: var(--color-accent-shadow);
--color-bg: var(--color-bg);
--color-card-bg: var(--color-card-bg);
--color-text: var(--color-text);
--color-extra: var(--color-extra);
--font-heading: var(--font-heading);
--font-body: var(--font-body);
}
`- Run the dev server:
bash
npm run dev
`Usage
The drawer auto-initializes when you import the module—no setup code needed.
$3
html
`$3
If you're serving static HTML files without a bundler, use the full path:
html
`Or use a CDN:
html
`$3
svelte
`$3
jsx
import "theme-forseen";function App() {
return
Your app;
}
`Styling with CSS Variables
ThemeForseen sets CSS variables on
at runtime. Use them in your CSS however you like.$3
No config needed. Just use the variables:
`css
h1 {
color: var(--color-primary);
font-family: var(--font-heading);
}body {
color: var(--color-text);
background: var(--color-bg);
font-family: var(--font-body);
}
.card {
background: var(--color-card-bg);
border: 1px solid var(--color-accent);
}
`$3
To use Tailwind utility classes, map the CSS variables in your config.
#### Tailwind v4 (CSS-first config)
Add this to your main CSS file:
css
@import "tailwindcss";@theme inline {
--color-primary: var(--color-primary);
--color-primary-shadow: var(--color-primary-shadow);
--color-accent: var(--color-accent);
--color-accent-shadow: var(--color-accent-shadow);
--color-bg: var(--color-bg);
--color-card-bg: var(--color-card-bg);
--color-text: var(--color-text);
--color-extra: var(--color-extra);
--font-heading: var(--font-heading);
--font-body: var(--font-body);
}
`The
keyword tells Tailwind these reference external runtime variables.#### Tailwind v3 (JS config)
Update your
tailwind.config.js:`js
export default {
theme: {
extend: {
colors: {
primary: "var(--color-primary)",
"primary-shadow": "var(--color-primary-shadow)",
accent: "var(--color-accent)",
"accent-shadow": "var(--color-accent-shadow)",
bg: "var(--color-bg)",
"card-bg": "var(--color-card-bg)",
text: "var(--color-text)",
extra: "var(--color-extra)",
},
},
fontFamily: {
heading: ["var(--font-heading)", "sans-serif"],
body: ["var(--font-body)", "sans-serif"],
},
},
};
`#### Using Tailwind classes
Then use in your markup:
html
Hello World
Body text
`$3
Any CSS framework that supports CSS variables will work. Just reference the variables (see CSS Variables Reference below).
How to Use the Drawer
1. Open: Click the icon on the right side of the screen
2. Browse Themes: Click to apply, use arrow keys or mouse wheel to scroll
3. Toggle Mode: Switch between Light and Dark mode
4. Browse Fonts: Click any font pairing to apply it
5. Activate: Click the lightning bolt icon to apply the theme to your project (see Dev Server below)
Dev Server
The dev server lets you write CSS variables directly to your project files with one click.
$3
bash
In your project directory
npx theme-forseen
`This starts a local server that listens for theme activations. When you click the lightning bolt icon in the drawer, the CSS variables are written directly to your CSS file.
$3
1. Start the server in your project directory
2. Browse themes in the drawer as usual
3. Click the lightning bolt - variables are written to your CSS file instantly
4. No server running? Falls back to showing a modal with the CSS to copy
$3
The server automatically detects your project type and finds the right CSS file:
| Project Type | CSS File Location |
| ------------ | ------------------------------------------ |
| Next.js |
or app/globals.css |
| Vite | src/index.css or src/style.css |
| Astro | src/styles/global.css |
| SvelteKit | src/app.css |
| Nuxt | assets/css/main.css |
| Plain HTML | Parses index.html for stylesheet links |$3
For plain HTML projects, the server is extra smart:
- One
- Writes to that CSS file
- No stylesheet but has