Theme Lab

Base Palettes

Start with one of five curated base palettes, each carefully designed for visual harmony and optimal readability. Every palette serves as a foundation you can customize further.

✨

Glass

Frosted glass panels with subtle transparency. The signature HyperPlanner aesthetic.

🌅

Warm

Soft amber and coral tones. Comfortable for extended planning sessions.

🌙

Midnight

Deep blacks with high contrast. Zero distractions for focused work.

❄️

Nordic

Cool blues and clean whites. Scandinavian-inspired minimalism.

⚡

Neon

Vibrant gradients and electric accents. Bold and energetic.

Palette CSS Variables

Each palette defines a core set of CSS custom properties that cascade through the entire interface:

/* Glass Palette */
:root {
    --palette-primary: #6366f1;
    --palette-secondary: #ec4899;
    --palette-accent: #f59e0b;
    --palette-bg-base: #0f0f1a;
    --palette-bg-elevated: rgba(255, 255, 255, 0.05);
    --palette-text-primary: #ffffff;
    --palette-text-muted: rgba(255, 255, 255, 0.7);
}

/* Midnight Palette */
:root {
    --palette-primary: #3b82f6;
    --palette-secondary: #8b5cf6;
    --palette-accent: #10b981;
    --palette-bg-base: #000000;
    --palette-bg-elevated: #0a0a0a;
    --palette-text-primary: #f8fafc;
    --palette-text-muted: #94a3b8;
}

/* Neon Palette */
:root {
    --palette-primary: #a855f7;
    --palette-secondary: #ec4899;
    --palette-accent: #22d3ee;
    --palette-bg-base: #0c0014;
    --palette-bg-elevated: rgba(168, 85, 247, 0.1);
    --palette-text-primary: #faf5ff;
    --palette-text-muted: #c4b5fd;
}

Pro Tip

Switch palettes instantly with Cmd/Ctrl + Shift + T. Your custom overrides persist across palette changes.

Full Token Control

Go beyond palettes with granular control over every design token. The Theme Lab exposes all visual properties as customizable variables.

Accents (Primary, Secondary, Tertiary)

Define your color hierarchy for buttons, links, highlights, and interactive elements:

/* Accent Colors */
:root {
    --accent-primary: #6366f1;      /* Main actions, active states */
    --accent-secondary: #ec4899;    /* Secondary actions, hover states */
    --accent-tertiary: #f59e0b;     /* Warnings, highlights, badges */

    /* Accent Variants */
    --accent-primary-light: #818cf8;
    --accent-primary-dark: #4f46e5;
    --accent-primary-alpha: rgba(99, 102, 241, 0.2);
}

Glass Strength (Opacity, Blur, Tint)

Fine-tune the glassmorphism effect that defines HyperPlanner's aesthetic:

/* Glass Effect Controls */
:root {
    /* Opacity - controls background transparency */
    --glass-opacity: 0.05;          /* Range: 0.0 - 0.3 */
    --glass-opacity-hover: 0.08;
    --glass-opacity-active: 0.12;

    /* Blur - controls backdrop blur intensity */
    --glass-blur-sm: 8px;           /* Subtle blur */
    --glass-blur-md: 16px;          /* Standard blur */
    --glass-blur-lg: 24px;          /* Heavy blur */

    /* Tint - subtle color overlay */
    --glass-tint: rgba(255, 255, 255, 0.02);
    --glass-tint-warm: rgba(255, 200, 150, 0.03);
    --glass-tint-cool: rgba(150, 200, 255, 0.03);
}

Borders (Width, Color, Style)

Control the subtle lines that define panel boundaries and element separation:

/* Border Tokens */
:root {
    /* Width */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;

    /* Colors */
    --border-color-subtle: rgba(255, 255, 255, 0.1);
    --border-color-default: rgba(255, 255, 255, 0.15);
    --border-color-strong: rgba(255, 255, 255, 0.25);
    --border-color-accent: var(--accent-primary-alpha);

    /* Radius */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-full: 9999px;
}

Backgrounds (Solid, Gradient, Mesh)

Layer multiple background effects for depth and visual interest:

/* Background Layers */
:root {
    /* Solid Backgrounds */
    --bg-base: #0f0f1a;
    --bg-elevated: #1a1a2e;
    --bg-surface: #16213e;

    /* Gradient Backgrounds */
    --bg-gradient-primary: linear-gradient(
        135deg,
        rgba(99, 102, 241, 0.15) 0%,
        transparent 50%
    );
    --bg-gradient-secondary: radial-gradient(
        circle at 70% 80%,
        rgba(236, 72, 153, 0.12) 0%,
        transparent 50%
    );

    /* Mesh Background */
    --bg-mesh-color: rgba(255, 255, 255, 0.02);
    --bg-mesh-size: 100px;
    --bg-mesh-pattern: linear-gradient(
        var(--bg-mesh-color) 1px,
        transparent 1px
    );
}

Motion (Animation Speed, Easing Curves)

Control the rhythm and feel of all animations and transitions:

/* Motion Tokens */
:root {
    /* Duration */
    --motion-instant: 0ms;
    --motion-fast: 150ms;
    --motion-base: 250ms;
    --motion-slow: 400ms;
    --motion-slower: 600ms;

    /* Easing Curves */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

    /* Composed Transitions */
    --transition-fast: var(--motion-fast) var(--ease-default);
    --transition-base: var(--motion-base) var(--ease-default);
    --transition-bounce: var(--motion-base) var(--ease-bounce);
}

Accessibility Note

Users with prefers-reduced-motion enabled will automatically see instant transitions. HyperPlanner respects system preferences.

Light/Dark Morphing

HyperPlanner seamlessly transitions between light and dark modes with smooth color morphing. Set it once and forget, or let time-based switching handle it automatically.

Auto-Switch Based on Time

Configure automatic theme switching based on time of day:

/* Time-based Theme Switching */
:root {
    /* Light mode hours (24h format) */
    --auto-light-start: 7;    /* 7:00 AM */
    --auto-light-end: 19;     /* 7:00 PM */

    /* Transition duration between modes */
    --mode-transition-duration: 500ms;
}

/* JavaScript Configuration */
HyperPlanner.theme.autoSwitch({
    enabled: true,
    lightStart: '07:00',
    lightEnd: '19:00',
    useSystemPreference: true,  /* Override with OS setting */
    transitionDuration: 500
});

Mode-Specific Overrides

Define different values for light and dark modes:

/* Dark Mode (Default) */
:root {
    --bg-base: #0f0f1a;
    --text-primary: #ffffff;
    --glass-opacity: 0.05;
    --shadow-strength: 0.4;
}

/* Light Mode */
:root[data-theme="light"] {
    --bg-base: #f8fafc;
    --text-primary: #0f172a;
    --glass-opacity: 0.6;
    --shadow-strength: 0.1;

    /* Adjusted accent for light backgrounds */
    --accent-primary: #4f46e5;
    --accent-primary-light: #6366f1;
}

Smooth Transitions

Enable morphing mode to smoothly interpolate between light and dark values over time, creating a natural dawn/dusk effect.

Action	Shortcut
Toggle Light/Dark	Cmd/Ctrl + D
Open Theme Lab	Cmd/Ctrl + Shift + T
Cycle Palettes	Cmd/Ctrl + ]
Reset to Default	Cmd/Ctrl + Shift + R

Icon Packs

Icons in HyperPlanner are semantic and fully customizable. Replace any icon with your preferred SVG or emoji.

Semantic Icons

Icons are mapped to meanings, not hardcoded. Change the icon for "work" and it updates everywhere:

/* Semantic Icon Mapping */
:root {
    /* Context Icons */
    --icon-work: url('icons/briefcase.svg');
    --icon-personal: url('icons/home.svg');
    --icon-inbox: url('icons/inbox.svg');
    --icon-archive: url('icons/archive.svg');

    /* Priority Icons */
    --icon-priority-high: url('icons/flame.svg');
    --icon-priority-medium: url('icons/flag.svg');
    --icon-priority-low: url('icons/minus.svg');

    /* Status Icons */
    --icon-status-todo: url('icons/circle.svg');
    --icon-status-progress: url('icons/clock.svg');
    --icon-status-done: url('icons/check-circle.svg');
}

Custom SVG Support

Inline your own SVG icons for complete control:

/* Custom SVG Icons */
:root {
    --icon-custom-rocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");
}

/* Apply to specific contexts */
[data-context="launches"] {
    --context-icon: var(--icon-custom-rocket);
}

Emoji Support

Prefer emoji? Map any icon to your favorite characters:

/* Emoji Icon Mapping */
HyperPlanner.icons.set({
    work: '💼',
    personal: '🏠',
    urgent: '🔥',
    meeting: '📅',
    idea: '💡',
    bug: '🐛',
    feature: '✨',
    docs: '📝'
});

/* CSS Emoji Fallback */
.icon-work::before {
    content: '💼';
    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

📦

Built-in Packs

Lucide, Heroicons, and Phosphor icons included by default.

🎨

Icon Themes

Outline, solid, and duotone variants for each pack.

⬆️

Upload Custom

Drag and drop SVG files to add your own icons.

Contrast Guardrails

Stay creative while maintaining readability. HyperPlanner automatically adjusts text and interactive elements to meet WCAG AA accessibility standards.

WCAG AA Compliance

The Theme Lab monitors contrast ratios in real-time:

/* Contrast Requirements */
:root {
    /* Minimum contrast ratios (WCAG AA) */
    --contrast-min-body: 4.5;      /* Normal text */
    --contrast-min-large: 3.0;     /* Large text (18px+) */
    --contrast-min-ui: 3.0;        /* UI components */

    /* Auto-adjusted text colors */
    --text-on-primary: #ffffff;    /* Auto-calculated for --accent-primary */
    --text-on-secondary: #ffffff;  /* Auto-calculated for --accent-secondary */
    --text-on-surface: #ffffff;    /* Auto-calculated for --bg-surface */
}

Automatic Adjustment

When you pick colors that would fail contrast requirements, HyperPlanner offers solutions:

/* Contrast Auto-Correction */
HyperPlanner.theme.contrastGuard({
    enabled: true,
    mode: 'suggest',    /* 'suggest' | 'auto' | 'off' */
    minRatio: 4.5,

    onViolation: (element, ratio, required) => {
        /* Show warning badge in Theme Lab */
        /* Suggest closest compliant color */
    }
});

Contrast Warning

When a color combination fails WCAG AA requirements, you'll see a warning badge in the Theme Lab. Click it to see suggested alternatives that maintain your aesthetic while improving readability.

Focus Indicators

Keyboard navigation indicators are always visible and customizable:

/* Focus Ring Tokens */
:root {
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--accent-primary);
    --focus-ring-style: solid;

    /* Focus visible styles */
    --focus-ring: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
}

*:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

Export & Share

Save your custom theme as a portable JSON file. Share with friends, back up your preferences, or contribute to the community theme gallery.

Save as JSON

Export your complete theme configuration:

/* Exported Theme JSON */
{
    "name": "My Custom Theme",
    "version": "1.0.0",
    "author": "your-username",
    "base": "glass",
    "tokens": {
        "colors": {
            "accent-primary": "#6366f1",
            "accent-secondary": "#ec4899",
            "accent-tertiary": "#f59e0b"
        },
        "glass": {
            "opacity": 0.05,
            "blur": "16px",
            "tint": "rgba(255, 255, 255, 0.02)"
        },
        "borders": {
            "radius-md": "12px",
            "color-default": "rgba(255, 255, 255, 0.15)"
        },
        "motion": {
            "duration-base": "250ms",
            "easing-default": "cubic-bezier(0.4, 0, 0.2, 1)"
        }
    },
    "icons": {
        "pack": "lucide",
        "overrides": {
            "work": "briefcase",
            "personal": "home"
        }
    },
    "modes": {
        "auto-switch": true,
        "light-start": "07:00",
        "light-end": "19:00"
    }
}

Import Themes

Load themes from JSON files or paste configuration directly:

/* Import via JavaScript */
HyperPlanner.theme.import('./my-theme.json');

/* Import from URL */
HyperPlanner.theme.importFromURL('https://themes.hyperplanner.app/neon-dreams.json');

/* Import from clipboard */
HyperPlanner.theme.importFromClipboard();

Share with Community

Publish your theme to the HyperPlanner community gallery:

/* Publish to Gallery */
HyperPlanner.theme.publish({
    name: "Neon Dreams",
    description: "Cyberpunk-inspired theme with electric gradients",
    tags: ["dark", "neon", "vibrant", "high-contrast"],
    preview: "./preview.png",    /* Auto-generated if not provided */
    license: "CC0"               /* Creative Commons Zero */
});

💾

Local Backup

Export to file for offline backup and version control.

🔗

Share Link

Generate a shareable URL that imports your theme instantly.

🌐

Community Gallery

Browse and remix themes created by other users.

Quick Share

Press Cmd/Ctrl + Shift + E to instantly export your current theme to clipboard as JSON.