@loudpacks/theme-definitions

Theme color definitions for the @loudpacks theme switcher system. Contains all 10 themes with exact colors extracted from the Noted app.

Overview

This package provides 360 precisely defined colors across 10 themes, each with light and dark variants. Every theme includes 18 color properties covering all UI elements from backgrounds to interactive states.

Total Colors: 360 (10 themes × 2 variants × 18 properties)

Installation

pnpm add @loudpacks/theme-definitions

Usage

import {
  THEMES,
  DEFAULT_THEME_NAME,
  DEFAULT_COLOR_SCHEME,
  type ThemeName,
  type ColorScheme
} from '@loudpacks/theme-definitions';

// Access a specific theme
const monochromeTheme = THEMES.monochrome;
console.log(monochromeTheme.displayName); // "Monochrome"
console.log(monochromeTheme.light.background); // "#fafafa"

// Use default constants
console.log(DEFAULT_THEME_NAME); // "monochrome"
console.log(DEFAULT_COLOR_SCHEME); // "system"

// Type-safe theme access
const themeName: ThemeName = 'ocean';
const theme = THEMES[themeName];

Available Themes

1. Monochrome (Default)

Clean monochrome design with neutral grays

• Light: Soft white background (#fafafa) with dark gray text
• Dark: Deep charcoal background (#121212) with light gray text
• Best for: Minimal distraction, professional look

2. Ocean

Vibrant teal aesthetic for refreshing design

• Light: Cool mint background (#f0faf9) with teal accents (#14b8a6)
• Dark: Deep ocean background (#0f1f1e) with aqua accents (#5eead4)
• Best for: Calm, refreshing interface

3. Sepia

Warm vintage aesthetic for comfortable reading

• Light: Warm beige background (#f5f1e8) with brown tones
• Dark: Rich brown background (#1a1612) with warm accents
• Best for: Long reading sessions, eye comfort

4. Nord

Cool Arctic-inspired palette for focused work

• Light: Pale blue-gray background (#eceff4) with nordic blues
• Dark: Slate background (#2e3440) with frost blues (#88c0d0)
• Best for: Developer tools, focused work

5. Crimson

Rich red aesthetic for bold design

• Light: Soft pink background (#fef5f5) with crimson accents (#dc143c)
• Dark: Deep burgundy background (#1f1212) with coral accents
• Best for: Bold statements, passion projects

6. Forest

Natural green aesthetic for calm and focused work

• Light: Soft sage background (#f0f4f0) with forest greens
• Dark: Deep forest background (#1a2419) with natural greens
• Best for: Nature-inspired apps, wellness

7. Lavender

Soft purple aesthetic for creative work

• Light: Pale lavender background (#f5f3f8) with purple tones
• Dark: Rich plum background (#1e1a24) with soft purples
• Best for: Creative apps, artistic projects

8. Amber

Warm amber tones for energetic focus

• Light: Warm cream background (#fef5f0) with amber accents (#d87a3a)
• Dark: Deep brown background (#1f1810) with golden amber
• Best for: Warm, energetic interfaces

9. Midnight

True black for OLED screens and maximum contrast

• Light: Cool gray background (#f5f5f7) with cyan accents (#00d4ff)
• Dark: Pure black background (#000000) with bright cyan
• Best for: OLED devices, maximum contrast

10. Rose

Soft rose aesthetic for gentle, modern design

• Light: Blush background (#fef5f7) with rose accents (#c76b7a)
• Dark: Deep burgundy-rose background (#1f1719) with soft pinks
• Best for: Gentle, modern, romantic designs

Type Definitions

ThemeName

type ThemeName =
  | 'monochrome'
  | 'ocean'
  | 'sepia'
  | 'nord'
  | 'crimson'
  | 'forest'
  | 'lavender'
  | 'amber'
  | 'midnight'
  | 'rose';

ColorScheme

Each theme variant includes 18 color properties:

interface ColorScheme {
  background: string;        // Main background color
  surface: string;           // Surface/card background
  text: string;              // Primary text color
  textSecondary: string;     // Secondary/muted text
  border: string;            // Border color
  tint: string;              // Primary accent/tint color
  icon: string;              // Icon color
  tabIconDefault: string;    // Inactive tab icon
  tabIconSelected: string;   // Active tab icon
  elevatedSurface: string;   // Elevated card/modal background
  selectedSurface: string;   // Selected item background
  overlay: string;           // Modal overlay (rgba)
  hover: string;             // Hover state background
  pressed: string;           // Pressed state background
  disabled: string;          // Disabled state color
  highlight: string;         // Highlight/selection color
  linkColor: string;         // Hyperlink color
  accentSecondary: string;   // Secondary accent color
}

ThemeMetadata

interface ThemeMetadata {
  displayName: string;       // Human-readable name
  description: string;       // Theme description
  light: ColorScheme;        // Light variant colors
  dark: ColorScheme;         // Dark variant colors
}

ColorSchemeMode

type ColorSchemeMode = 'light' | 'dark' | 'system';

Constants

export const DEFAULT_THEME_NAME: ThemeName = 'monochrome';
export const DEFAULT_COLOR_SCHEME: ColorSchemeMode = 'system';
export const VALID_THEME_NAMES: readonly ThemeName[] = [
  'monochrome', 'ocean', 'sepia', 'nord', 'crimson',
  'forest', 'lavender', 'amber', 'midnight', 'rose'
];

Package Structure

@loudpacks/theme-definitions/
├── dist/
│   ├── index.js         # CommonJS build
│   ├── index.mjs        # ESM build
│   └── index.d.ts       # TypeScript declarations
└── src/
    ├── types.ts         # Type definitions
    ├── constants.ts     # Default values
    ├── themes.ts        # Theme color data (auto-generated)
    └── index.ts         # Main exports

Development

This package uses automated color extraction from the Noted app specifications:

# Regenerate themes from specifications
pnpm tsx scripts/parse-themes.ts

# Build package
pnpm --filter @loudpacks/theme-definitions build

# Run tests
pnpm --filter @loudpacks/theme-definitions test

Note: themes.ts is auto-generated. Do not edit manually.

Related Packages

• @loudpacks/theme-core - Core theme logic and utilities
• @loudpacks/theme-web - Next.js implementation
• @loudpacks/theme-native - React Native implementation

License

MIT