Molecule.dev

@molecule/app-theme-css-variables-liquid-glass

Provider bond · theme · App (browser) · v1.0.2 · Apache-2.0

Translucent frosted-glass theme preset with CSS custom properties

npm install @molecule/app-theme-css-variables-liquid-glass

npm · Source on GitHub · Implements @molecule/app-theme

How it works

@molecule/app-theme-css-variables-liquid-glass is a provider bond on the app (browser) side: it implements the theme core interface (@molecule/app-theme) with a concrete vendor or library behind it.

Your code calls the core; you wire this provider once at startup. Swapping vendors later is one line in that wiring, not a rewrite.

import {
  createCSSVariablesThemeProvider,
  lightTheme,
  darkTheme,
} from '@molecule/app-theme-css-variables-liquid-glass'
import { setProvider } from '@molecule/app-theme'

const provider = createCSSVariablesThemeProvider({
  themes: [lightTheme, darkTheme],
  defaultTheme: 'dark',
  persistKey: 'molecule-theme',
})

setProvider(provider)

Works with: @molecule/app-theme, @molecule/app-theme-css-variables

Reference

Liquid glass theme preset for molecule.dev.

Provides translucent, frosted-glass-inspired light and dark themes designed to pair with backdrop-filter blur effects. Uses the standard CSS custom properties provider from @molecule/app-theme-css-variables.

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

Quick Start

import {
  createCSSVariablesThemeProvider,
  lightTheme,
  darkTheme,
} from '@molecule/app-theme-css-variables-liquid-glass'
import { setProvider } from '@molecule/app-theme'

const provider = createCSSVariablesThemeProvider({
  themes: [lightTheme, darkTheme],
  defaultTheme: 'dark',
  persistKey: 'molecule-theme',
})

setProvider(provider)

Type

provider

Installation

npm install @molecule/app-theme-css-variables-liquid-glass @molecule/app-theme @molecule/app-theme-css-variables

API

Interfaces

ThemeStorageAdapter

Minimal storage adapter for theme persistence. Compatible with localStorage, sessionStorage, or any custom implementation (e.g., React Native AsyncStorage wrapper, SSR no-op).

interface ThemeStorageAdapter {
  getItem(key: string): string | null
  setItem(key: string, value: string): void
}

CSSVariablesThemeConfig

Configuration for css variables theme.

interface CSSVariablesThemeConfig {
  /** Available themes. */
  themes: Theme[]
  /** Name of the default theme to use. */
  defaultTheme?: string
  /** CSS variable prefix (default: 'mol'). */
  prefix?: string
  /** Whether to auto-apply CSS variables to :root (default: true). */
  applyToDocument?: boolean
  /**
   * Key for persisting the selected theme name across reloads. When `storage`
   * is omitted, persistence falls back to `window.localStorage` in browser
   * environments; in SSR / non-browser environments persistence is skipped.
   */
  persistKey?: string
  /**
   * Storage adapter for persisting theme preference. Optional — when omitted
   * and `persistKey` is set, `window.localStorage` is used when available.
   * Provide an adapter for React Native (AsyncStorage wrapper) or custom stores.
   */
  storage?: ThemeStorageAdapter
  /**
   * With no persisted choice, start on the theme whose `mode` matches the
   * OS preference (`prefers-color-scheme`) instead of `defaultTheme`.
   * Browser-only: a render without a window — a server, a build-time
   * prerender — starts on `defaultTheme`, which `getServerTheme()` reports
   * so a hydrating client renders the markup it was sent before switching.
   * Default: false.
   */
  systemDefault?: boolean
}

Functions

createCSSVariablesThemeProvider(config)

Creates a framework-agnostic ThemeProvider that applies theme tokens as CSS custom properties on the document root element.

function createCSSVariablesThemeProvider(config: CSSVariablesThemeConfig): ThemeProvider
  • config — Theme provider configuration (available themes, default theme, CSS variable prefix, persistence).

Returns: A ThemeProvider that applies themes as CSS custom properties on the document root.

Constants

lightTheme

Liquid glass light theme.

Translucent white surfaces over blurred backgrounds.

const lightTheme: Theme

darkTheme

Liquid glass dark theme.

Translucent dark surfaces over blurred backgrounds.

const darkTheme: Theme

Core Interface

Implements @molecule/app-theme interface.

Injection Notes

Requirements

Peer dependencies:

  • @molecule/app-theme ^1.0.1
  • @molecule/app-theme-css-variables ^1.0.1

Runtime Dependencies

  • @molecule/app-theme

  • @molecule/app-theme-css-variables

  • The frosted BLUR comes from the ClassMap, not from these themes: pair with @molecule/app-ui-tailwind-glass (setClassMap(classMap)), which layers backdrop-filter onto surface components. These themes alone give translucent colors with no blur.

  • Same precedence trap as the base bond: template-based apps ship app/src/theme.css whose --color-* variables SHADOW these theme colors — when theme.css defines colors, wiring this preset changes nothing visible; port the glass palette into theme.css instead (see @molecule/app-theme-css-variables remarks for the full mechanism).