Getting Started

Get up and running with ThemeForseen in minutes.

Installation

Install ThemeForseen via npm:

npm install theme-forseen

Basic Usage

The drawer auto-initializes when you import the module—no setup code needed.

With a Bundler (Vite, Webpack, Parcel, etc.)

<script type="module">
  import 'theme-forseen';
</script>

Without a Bundler (plain HTML)

If you're serving static HTML files without a bundler, use the full path:

<script type="module">
  import '/node_modules/theme-forseen/dist/index.js';
</script>

Or use a CDN:

<script type="module">
  import 'https://unpkg.com/theme-forseen/dist/index.js';
</script>

SvelteKit

<script>
  import 'theme-forseen';
</script>

React

import 'theme-forseen';

function App() {
  return <div>Your app</div>;
}

Features

Live Color Theme Preview - Browse curated color palettes with instant feedback
Font Pairing Preview - Explore thoughtful font combinations
Light & Dark Mode - Supports both modes simultaneously
Keyboard Navigation - Use arrow keys or mouse wheel to scroll through themes
Framework Agnostic - Works with any framework as a web component

Tailwind CSS Integration

ThemeForseen sets CSS variables on <html> at runtime when you select themes. You just need to tell Tailwind about them.

Tailwind v4 (CSS-first config)

Add this to your main CSS file:

@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 inline keyword tells Tailwind these reference external runtime variables.

Tailwind v3 (JS config)

Update your tailwind.config.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 the classes

<h1 class="font-heading text-primary">Hello World</h1>
<p class="font-body text-text bg-bg">Body text</p>

CSS Variables Reference

Colors

Variable	Description
--color-primary	Primary brand color
--color-primary-shadow	Darker shade of primary
--color-accent	Accent/secondary color
--color-accent-shadow	Darker shade of accent
--color-bg	Background color
--color-card-bg	Card/surface background
--color-text	Main text color
--color-extra	Additional accent color
--color-h1, --color-h2, --color-h3	Heading colors
--color-heading	General heading color (same as h1)

Fonts

Variable	Description
--font-heading	Font family for headings
--font-body	Font family for body text

Customization

Want to add your own color palettes or font pairings? You can customize ThemeForseen by modifying the source:

Clone the repository
Modify src/themes.ts to add your custom palettes
Run npm run build to compile

Development

# Build the project
npm run build

# Watch mode for development
npm run dev

Source Code

ThemeForseen is open source. View the code, report issues, or contribute on GitHub.