Theme

Theme utilities and configurations for managing color schemes, dark mode, and consistent styling in magic.mov.

Color Scheme

magic.mov uses a custom color scheme defined in HSL variables for flexibility and consistency across the application. The color scheme is implemented using Tailwind CSS and custom CSS variables.

			:root {
  /* Base colors */
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  
  /* Primary colors */
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;

  /* Secondary colors */
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;

  /* Accent colors - Warm and Cool */
  --accent-warm: 10 95% 65%;
  --accent-cool: 199 89% 48%;
  --accent-foreground: 240 5.9% 10%;
}

Dark Mode

The dark mode theme is managed via CSS variables in a .dark class selector. Magic.mov uses mode-watcher for theme detection and switching.

			.dark {
  /* Dark theme colors */
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  
  /* Inverted primary colors for dark mode */
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;

  /* Darker secondary colors */
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;

  /* Accent colors (slightly adjusted for dark mode) */
  --accent-warm: 10 95% 60%;
  --accent-cool: 199 95% 51%;
  --accent-foreground: 0 0% 98%;
}

Theme Controls

Magic.mov uses mode-watcher for theme detection and toggling between light and dark mode:

			<script>
  import { ModeWatcher, toggleMode } from 'mode-watcher';
  import { Moon, Sun } from 'lucide-svelte';
  import { Button } from '$lib/components/ui/button';
  import { browser } from '$app/environment';
</script>

{#if browser}
  <!-- This component watches for user theme preference changes -->
  <ModeWatcher />
{/if}

<!-- Theme toggle button -->
<Button onclick={toggleMode} variant="ghost" size="icon">
  <Sun class="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
  <Moon class="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
  <span class="sr-only">Toggle theme</span>
</Button>

Using Theme Colors

You can use the theme colors in your components by using Tailwind's utility classes or referencing the CSS variables directly.

			<!-- Using Tailwind classes -->
<div class="bg-background text-foreground">
  <h1 class="text-primary">Title with primary color</h1>
  <div class="bg-accent-warm text-white p-4 rounded-md">
    Accent warm background
  </div>
  <div class="bg-accent-cool text-white p-4 rounded-md mt-4">
    Accent cool background
  </div>
</div>

<!-- Using HSL variables directly in inline styles -->
<div style="background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground));">
  This uses HSL variables directly
</div>