[ [0xB0] Extras ] Theming And Customization

Theming And Customization

> Light/Dark color themes + Terminal/Modern visual styles.

Overview

[ [0xB0] STATUS ]

Dual theme system: Color themes (light/dark) and Visual themes (Terminal/Modern). Persistent localStorage, no theme flash, and Tailwind v4 native.

Features

[ [0x01] 2_COLOR_THEM ]

STATUS: READY

DESC: Light and Dark palettes.

[ [0x02] LIGHT/DARK ]

STATUS: READY

DESC: Automatic mode switching.

[ [0x03] PERSISTENT ]

STATUS: READY

DESC: Saved to localStorage.

[ [0x04] NO_FLASH ]

STATUS: READY

DESC: Pre-hydration loading.

Usage

[ [0x42] THEME SWITCHER COMPONENTS ]

Compact dropdowns for navbar

1import { ThemeDropdown } from "@/components/theme/theme-dropdown";
2import { VisualThemeDropdown } from "@/components/theme/visual-theme-dropdown";
3
4export function MyNavbar() {
5  return (
6    <nav>
7      <ThemeDropdown /> {/* Light/Dark color switcher */}
8      <VisualThemeDropdown /> {/* Terminal/Modern visual switcher */}
9    </nav>
10  );
11}

[ [0xE3] HOW IT WORKS ]

Dual theme system via data attributes

1<!-- Color theme via data-theme (light/dark) -->
2<html data-theme="light" data-visual-mode="terminal">
3  <!-- data-theme="light" sets colors (light or dark) -->
4  <!-- data-visual-mode="terminal" sets visual style -->
5</html>
6
7<!-- Themes auto-loaded before React hydration (no flash) -->
8<script>
9  const theme = localStorage.getItem('theme') || 'light';
10  const visualMode = localStorage.getItem('fabrk-theme-visual-mode') || 'terminal';
11  document.documentElement.setAttribute('data-theme', theme);
12  document.documentElement.setAttribute('data-visual-mode', visualMode);
13</script>

[ [0x71] CSS IMPLEMENTATION ]

Each theme defines CSS variables in globals.css

1/* Light theme (default colors) */
2[data-theme="light"] {
3  --background: 99% 0 0;  /* Off-white */
4  --foreground: 0% 0 0;   /* Pure black */
5  --primary: 0% 0 0;      /* Black */
6  --accent: 55% 0.21 250; /* Vercel blue */
7  /* ...more variables */
8}
9
10/* Dark theme */
11[data-theme="dark"] {
12  --background: 0% 0 0;    /* Pure black */
13  --foreground: 100% 0 0;  /* Pure white */
14  --primary: 100% 0 0;     /* White */
15  --accent: 55% 0.21 250;  /* Vercel blue */
16  /* ...more variables */
17}
18
19/* Terminal visual style (sharp edges, monospace) */
20[data-visual-mode="terminal"] * {
21  border-radius: 0 !important;
22}
23
24/* Modern visual style (rounded, sans-serif) */
25[data-visual-mode="modern"] * {
26  border-radius: 0.5rem !important;
27}

[ [0x03] USING THEME COLORS ]

Always use semantic color classes

1// ✅ GOOD - Theme-aware colors
2<button className="bg-primary text-primary-foreground">
3  Matches active theme (light or dark)
4</button>
5
6<div className="border-primary ring-primary">
7  Adapts automatically when user switches themes
8</div>
9
10// ❌ BAD - Hardcoded colors (breaks theming)
11<button className="bg-[hardcoded] text-[hardcoded]">
12  Always same color, ignores theme selection
13</button>

[ [0x36] CUSTOMIZING THEMES ]

Modify light/dark themes in globals.css

1/* Customize existing themes in globals.css */
2[data-theme="light"] {
3  --background: 99% 0 0;
4  --foreground: 0% 0 0;
5  --primary: 0% 0 0;
6  --accent: 55% 0.21 250;  /* Vercel blue - customize to your brand */
7  /* ...modify other variables */
8}
9
10[data-theme="dark"] {
11  --background: 0% 0 0;
12  --foreground: 100% 0 0;
13  --primary: 100% 0 0;
14  --accent: 65% 0.21 250;  /* Brighter for dark mode */
15  /* ...modify other variables */
16}

Dual Theme System

[ [0x86] THEME SYSTEM ]

├─ Color Themes: Light and Dark color palettes

├─ Visual Themes: Terminal (sharp, monospace) and Modern (rounded, sans-serif)

├─ Persistent: Both choices saved to localStorage

├─ No Flash: Pre-hydration loading prevents theme flash

└─ Tailwind v4 Native: Works seamlessly with Tailwind CSS v4

Color Themes

Light

Clean white background

Dark

Pure black background

Visual Themes

[]

Terminal

Sharp edges, monospace font

()

Modern

Rounded edges, sans-serif font

Best Practices

[ [0xC4] BEST PRACTICES ]

├─ Use semantic colors: bg-primary instead of bg-purple-500

├─ Test across themes: Verify UI works in light and dark variants

├─ Default to Light: Clean, neutral starting point

└─ Customize themes: Modify colors in globals.css [data-theme] selectors

Architecture

[ [0xAD] ARCHITECTURE ]

├─ ThemeDropdown - Navbar component for theme selection

├─ ColorThemeSwitcher - Full-page grid for settings

├─ globals.css - All 20 theme CSS variable definitions

├─ layout.tsx - Pre-hydration script prevents flash

└─ localStorage - Persists user preference (key: theme)

Next Steps

[ [0x00] UI COMPONENTS ]

DESC: All components use semantic colors

[ [0x00] TESTING ]

DESC: Test across different themes

Usage

[ [0x42] THEME SWITCHER COMPONENTS ]

Compact dropdowns for navbar

1import { ThemeDropdown } from "@/components/theme/theme-dropdown";
2import { VisualThemeDropdown } from "@/components/theme/visual-theme-dropdown";
3
4export function MyNavbar() {
5  return (
6    <nav>
7      <ThemeDropdown /> {/* Light/Dark color switcher */}
8      <VisualThemeDropdown /> {/* Terminal/Modern visual switcher */}
9    </nav>
10  );
11}

[ [0xE3] HOW IT WORKS ]

Dual theme system via data attributes

1<!-- Color theme via data-theme (light/dark) -->
2<html data-theme="light" data-visual-mode="terminal">
3  <!-- data-theme="light" sets colors (light or dark) -->
4  <!-- data-visual-mode="terminal" sets visual style -->
5</html>
6
7<!-- Themes auto-loaded before React hydration (no flash) -->
8<script>
9  const theme = localStorage.getItem('theme') || 'light';
10  const visualMode = localStorage.getItem('fabrk-theme-visual-mode') || 'terminal';
11  document.documentElement.setAttribute('data-theme', theme);
12  document.documentElement.setAttribute('data-visual-mode', visualMode);
13</script>

[ [0x71] CSS IMPLEMENTATION ]

Each theme defines CSS variables in globals.css

1/* Light theme (default colors) */
2[data-theme="light"] {
3  --background: 99% 0 0;  /* Off-white */
4  --foreground: 0% 0 0;   /* Pure black */
5  --primary: 0% 0 0;      /* Black */
6  --accent: 55% 0.21 250; /* Vercel blue */
7  /* ...more variables */
8}
9
10/* Dark theme */
11[data-theme="dark"] {
12  --background: 0% 0 0;    /* Pure black */
13  --foreground: 100% 0 0;  /* Pure white */
14  --primary: 100% 0 0;     /* White */
15  --accent: 55% 0.21 250;  /* Vercel blue */
16  /* ...more variables */
17}
18
19/* Terminal visual style (sharp edges, monospace) */
20[data-visual-mode="terminal"] * {
21  border-radius: 0 !important;
22}
23
24/* Modern visual style (rounded, sans-serif) */
25[data-visual-mode="modern"] * {
26  border-radius: 0.5rem !important;
27}

[ [0x03] USING THEME COLORS ]

Always use semantic color classes

1// ✅ GOOD - Theme-aware colors
2<button className="bg-primary text-primary-foreground">
3  Matches active theme (light or dark)
4</button>
5
6<div className="border-primary ring-primary">
7  Adapts automatically when user switches themes
8</div>
9
10// ❌ BAD - Hardcoded colors (breaks theming)
11<button className="bg-[hardcoded] text-[hardcoded]">
12  Always same color, ignores theme selection
13</button>

[ [0x36] CUSTOMIZING THEMES ]

Modify light/dark themes in globals.css

1/* Customize existing themes in globals.css */
2[data-theme="light"] {
3  --background: 99% 0 0;
4  --foreground: 0% 0 0;
5  --primary: 0% 0 0;
6  --accent: 55% 0.21 250;  /* Vercel blue - customize to your brand */
7  /* ...modify other variables */
8}
9
10[data-theme="dark"] {
11  --background: 0% 0 0;
12  --foreground: 100% 0 0;
13  --primary: 100% 0 0;
14  --accent: 65% 0.21 250;  /* Brighter for dark mode */
15  /* ...modify other variables */
16}

Dual Theme System

[ [0x86] THEME SYSTEM ]

├─ Color Themes: Light and Dark color palettes

├─ Visual Themes: Terminal (sharp, monospace) and Modern (rounded, sans-serif)

├─ Persistent: Both choices saved to localStorage

├─ No Flash: Pre-hydration loading prevents theme flash

└─ Tailwind v4 Native: Works seamlessly with Tailwind CSS v4

Architecture

[ [0xAD] ARCHITECTURE ]

├─ ThemeDropdown - Navbar component for theme selection

├─ ColorThemeSwitcher - Full-page grid for settings

├─ globals.css - All 20 theme CSS variable definitions

├─ layout.tsx - Pre-hydration script prevents flash

└─ localStorage - Persists user preference (key: theme)