Components

Light/Dark Toggle

A sleek, animated toggle component for switching between light and dark modes in your SvelteLaunch application.

# Features

• Smooth transition between light and dark icons
• Accessible design with screen reader support
• Seamless integration with Tailwind CSS and shadcn UI
• Pre-configured with Lucide icons for a modern look

# Usage

Import the component in your Svelte file:

        <script>
  import { LightDarkToggle } from '$lib/components';
</script>

<LightDarkToggle />

      

# Examples

# In Navigation Bar

Add the component to your app's navigation:

        <script>
  import { LightDarkToggle } from '$lib/components';
</script>

<nav class="flex items-center justify-between p-4 bg-background">
  <div class="flex space-x-4">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </div>
  <LightDarkToggle />
</nav>

      

# Floating Toggle

Position the toggle as a floating element:

        <script>
  import { LightDarkToggle } from '$lib/components';
</script>

<div class="fixed bottom-4 right-4 z-50">
  <LightDarkToggle />
</div>

      

# Within Settings Panel

Integrate the toggle into a settings or preferences panel:

        <script>
  import { LightDarkToggle } from '$lib/components';
</script>

<div class="p-4 bg-card rounded-lg shadow">
  <h2 class="text-xl font-bold mb-4">Display Settings</h2>
  <div class="flex items-center justify-between">
    <span>Theme</span>
    <LightDarkToggle />
  </div>
</div>

      

# How It Works

1. The component renders a button with sun and moon icons from Lucide.
2. Clicking the button triggers the toggleMode function from mode-watcher.
3. Icons animate smoothly to indicate the current mode:
   • Light mode: Sun visible, moon hidden
   • Dark mode: Moon visible, sun hidden

# Accessibility

Includes a visually hidden "Toggle theme" text for screen reader compatibility.

# Customization

To modify the component's appearance:

1. Edit Tailwind classes in the component's markup.
2. Adjust the Button component from shadcn UI in your SvelteLaunch setup.

Example of customizing button size:

        <LightDarkToggle class="scale-75" /> <!-- Makes the toggle 75% of its original size -->

      

# API Reference

Props:

• class (optional): String to add custom CSS classes to the component

# SvelteLaunch Integration

This component is pre-configured in your SvelteLaunch app:

• Located in: src/lib/components/LightDarkToggle.svelte
• Auto-imported: Available from $lib/components
• Theme switching: Utilizes SvelteLaunch's built-in dark mode support