1. Features
  2. Themes

Features

Themes

Customizing your application's look and feel

SvelteLaunch now uses ShadCN for theming, which provides a powerful and flexible way to style your application. The theming system is built on top of Tailwind CSS, giving you extensive customization options. There are several themes available at the link below.

Resources:

Customizing Themes

With ShadCN, you have full control over your application's theme. You can customize colors, typography, spacing, and more to match your brand or design preferences.

Installing and Configuring Themes

To set up your theme, including both light and dark modes, you need to modify the /src/routes/app.css file. This file defines the color variables for both light and dark themes.

  1. Open /src/routes/app.css
  2. Replace the existing content with the following:
        @layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 346.8 77.2% 49.8%;
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 72.22% 50.59%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 346.8 77.2% 49.8%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 20 14.3% 4.1%;
    --foreground: 0 0% 95%;
    --card: 24 9.8% 10%;
    --card-foreground: 0 0% 95%;
    --popover: 0 0% 9%;
    --popover-foreground: 0 0% 95%;
    --primary: 346.8 77.2% 49.8%;
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 15%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 12 6.5% 15.1%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 346.8 77.2% 49.8%;
  }
}

This configuration defines color variables for both light and dark themes. The :root selector sets the default (light) theme, while the .dark class defines the dark theme colors.

How it works with Tailwind CSS

Tailwind CSS makes it easy to handle both light and dark modes using these color variables. Instead of specifying separate colors for light and dark modes (e.g., text-black dark:text-white), you can use the semantic color classes like bg-background or text-foreground.

For example:

        <div class="bg-background text-foreground">
  <!-- Your content here -->
</div>

This approach works because:

  1. The bg-background and text-foreground classes use the CSS variables defined in app.css.
  2. When the .dark class is added to a parent element (usually the <html> or <body> tag), it overrides the default color variables with the dark theme values.
  3. Tailwind CSS automatically applies the correct colors based on whether the dark mode is active or not.

Customizing a ShadCN Theme

shadcn-svelte uses Tailwind CSS for styling. To customize the overall theme:

  1. Open your tailwind.config.js file.

  2. Modify the theme section to adjust colors, fonts, and other design tokens:

            module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          500: "#3B82F6",
          600: "#2563EB",
        },
      },
      fontFamily: {
        sans: ["Inter", "sans-serif"],
      },
    },
  },
};

  3. The changes will be reflected across all shadcn-svelte components that use these theme values.

Toggling Dark Mode

To toggle dark mode, you can add or remove the dark class from a parent element, typically the <html> tag:

        // To enable dark mode
document.documentElement.classList.add("dark");

// To disable dark mode
document.documentElement.classList.remove("dark");

// To toggle dark mode
document.documentElement.classList.toggle("dark");

This approach provides a clean and maintainable way to handle theming in your application, as you only need to define your colors once and use semantic class names throughout your HTML.

Remember to use the appropriate semantic color classes (like bg-background, text-foreground, bg-primary, etc.) in your components to ensure they respond correctly to theme changes.

Remember to test your customizations thoroughly to ensure they work well across different screen sizes and in both light and dark modes. By leveraging ShadCN and Tailwind CSS, you have the flexibility to create a unique and consistent design system for your Svelte application.

Previous <- Sitemap
Next AI ->