@pure-tools/paletka

CSS var design tokens and random-theme-on-start for pure-tools Angular apps.

npm: @pure-tools/paletka
peer deps: @angular/core >=22

Setup

// app.config.ts
import { provideTheme } from '@pure-tools/paletka';

provideTheme()                                         // random theme every start (default)
provideTheme({ mode: 'persist' })                      // random once, saved in localStorage
provideTheme({ mode: 'fixed', fixedTheme: 'ocean' })  // always ocean
provideTheme({ themes: myThemes })                     // custom theme list

ThemeService

import { ThemeService } from '@pure-tools/paletka';

theme = inject(ThemeService);

theme.theme        // Signal<Theme | null> — active theme
theme.getThemes()  // Theme[]
theme.setTheme('neon')       // switch by name
theme.setTheme(themeObject)  // switch by Theme object

CSS vars

Applied to :root on every start. Use these in your CSS instead of hardcoded colors.

| var | purpose | |---|---| | --pt-bg | main page background | | --pt-bg-alt | secondary background | | --pt-surface | card / panel background | | --pt-surface-alt | elevated surface | | --pt-text | primary text | | --pt-text-muted | secondary / muted text | | --pt-accent | brand accent color | | --pt-accent-fg | text on accent background | | --pt-accent-2 | secondary accent | | --pt-border | border color | | --pt-shadow | box-shadow rgba |

Tailwind v4 integration

Remap Tailwind color vars to paletka in styles.css — no HTML changes needed:

@import "tailwindcss";

@theme {
  --color-zinc-950: var(--pt-bg);
  --color-zinc-900: var(--pt-bg-alt);
  --color-zinc-800: var(--pt-surface);
  --color-zinc-700: var(--pt-surface-alt);
  --color-zinc-600: var(--pt-text-muted);
  --color-zinc-500: var(--pt-text-muted);
  --color-zinc-400: var(--pt-text-muted);
  --color-zinc-300: var(--pt-text);
  --color-zinc-200: var(--pt-text);
  --color-zinc-100: var(--pt-text);
  --color-yellow-400: var(--pt-accent);
  --color-yellow-300: var(--pt-accent);
}

@layer base {
  :root {
    /* Fallback defaults (midnight) before Angular init */
    --pt-bg: #0d1117;
    --pt-bg-alt: #161b22;
    --pt-surface: #21262d;
    --pt-surface-alt: #2d333b;
    --pt-text: #e6edf3;
    --pt-text-muted: #8b949e;
    --pt-accent: #58a6ff;
    --pt-accent-fg: #ffffff;
    --pt-accent-2: #3fb950;
    --pt-border: #30363d;
    --pt-shadow: rgba(0, 0, 0, 0.7);
  }
}

Tailwind v4 generates .bg-zinc-950 { background-color: var(--color-zinc-950) }. With --color-zinc-950: var(--pt-bg) in @theme, the chain resolves at browser runtime — all existing zinc/yellow Tailwind classes update automatically.

Built-in themes

| name | vibe | |---|---| | midnight | dark blue/gray | | sunset | warm orange/coral dark | | forest | deep green dark | | ocean | teal/cyan dark | | sakura | soft pink light | | lava | red/crimson dark | | arctic | ice blue light | | neon | cyberpunk purple/green dark |

Custom themes

import { provideTheme, BUILT_IN_THEMES } from '@pure-tools/paletka';

provideTheme({
  themes: [
    ...BUILT_IN_THEMES,
    {
      name: 'my-brand',
      vars: {
        '--pt-bg': '#1a1a2e',
        '--pt-accent': '#e94560',
        // ... all --pt-* vars
      }
    }
  ]
})

ThemeConfig

interface ThemeConfig {
  themes?: Theme[];
  mode?: 'random' | 'fixed' | 'persist';  // default: 'random'
  fixedTheme?: string;
  persistKey?: string;  // default: '__pt_theme'
}

interface Theme {
  name: string;
  vars: Record<string, string>;
}

data attribute

Paletka sets data-pt-theme="<name>" on <html>:

[data-pt-theme="sakura"] .logo { filter: hue-rotate(280deg); }

Build

npm run build       # ng-packagr -> dist/
npm run publish:lib # build + npm publish dist/