s-m-r-t

Themes

A comprehensive theme system with Material, Glass, and Studio presets. All themes include light and dark modes, CSS custom properties, and runtime switching.

Live Demo

Try switching themes and color schemes:

Theme Preset

Theme

Color Scheme

Current: Material — light mode

Color Palette

Aa
Primary
Aa
Secondary
Aa
Tertiary
Aa
Error
Aa
Success
Aa
Warning

Surfaces

Surface
Surface Variant
Background

Available Themes

🔷 Material

Modern Google Material Design 3 with refined colors and typography. Features vibrant blues, OLED-friendly dark mode, and multi-layer shadows.

preset="material"

💎 Glass

Apple-inspired glass morphism with backdrop blur effects. Translucent surfaces, system colors, and layered depth perception.

preset="glass"

◻️ Studio

Google AI Studio flat design with minimal aesthetics. Monochromatic base with vibrant accents, minimal shadows.

preset="studio"

🇨🇭 Swiss

Custom theme for havesmrt.com. Swiss/International Typographic Style with strong grid, clean typography, and minimal embellishment.

preset="swiss"

Installation

bash 
npm install @happyvertical/smrt-svelte

Basic Usage

svelte 
<script>
  import { ThemeProvider } from '@happyvertical/smrt-svelte/themes';
  import '@happyvertical/smrt-svelte/themes/styles/all.css';
</script>

<ThemeProvider preset="material" colorScheme="system">
  <YourApp />
</ThemeProvider>

Creating Custom Themes

Use the createTheme helper to define your own theme:

typescript 
import { createTheme, registerTheme } from '@happyvertical/smrt-svelte/themes';

const myTheme = createTheme({
  id: 'brand',
  name: 'Brand Theme',
  extend: 'material',
  light: {
    primary: '#ff6b35',
    background: '#fafafa',
    surface: '#ffffff',
  },
  dark: {
    primary: '#ff8c5a',
    background: '#0a0a0a',
    surface: '#1a1a1a',
  },
  fontFamily: 'Inter, sans-serif',
});

registerTheme(myTheme);

CSS-Only Approach

For simpler cases, you can define a theme entirely in CSS:

css 
/* Import base theme */
@import '@happyvertical/smrt-svelte/themes/styles/material.css';

/* Override with custom values */
[data-theme="custom"] {
  --smrt-color-primary: #your-brand-color;
  --smrt-radius-md: 0.75rem;
}

Features

  • 3 Built-in Themes: Material, Glass, and Studio presets
  • Light & Dark Modes: Automatic system detection with manual override
  • Runtime Switching: Change themes without page reload
  • CSS Custom Properties: 100+ theme tokens exposed as CSS variables
  • Type-Safe: Full TypeScript support with theme definitions
  • Persistent: Theme preferences saved to localStorage
  • Custom Themes: Create and register your own themes

CSS Tokens

All themes expose CSS custom properties:

Colors

--smrt-color-primary
--smrt-color-on-primary
--smrt-color-surface
--smrt-color-on-surface
--smrt-color-background
--smrt-color-error
--smrt-color-success
--smrt-color-warning

Typography

--smrt-typography-body-large-size
--smrt-typography-body-large-line-height
--smrt-typography-body-large-weight
--smrt-font-family

Elevation

--smrt-elevation-1
--smrt-elevation-2
--smrt-elevation-3