# Theme Colors

The Theme utility class allows you to manage the application's theme, including switching between Light and Dark modes and customizing the color palette. It uses CSS variables to apply colors dynamically across the UI.

You can switch between light and dark themes using static methods.

// Switch to Dark theme
Theme.Dark();

// Switch to Light theme
Theme.Light();

// Check current theme
if (Theme.IsDark) { /* ... */ }

You can customize the primary and background colors.

// Set primary color (Light mode color, Dark mode color)
Theme.SetPrimary(Color.FromString("blue"), Color.FromString("lightblue"));

// Set background color
Theme.SetBackground(Color.FromString("white"), Color.FromString("#333"));

• Theme.Light()
  • Switches the application to the light theme.
• Theme.Dark()
  • Switches the application to the dark theme.
• Theme.SetPrimary(Color light, Color dark)
  • Sets the primary color for both light and dark themes.
• Theme.SetBackground(Color light, Color dark)
  • Sets the background color for both light and dark themes.

• Theme.IsLight
  • (bool) Returns true if the current theme is light.
• Theme.IsDark
  • (bool) Returns true if the current theme is dark.
• Theme.Primary
  • Accessor for primary theme colors (Background, Foreground, Border, etc.).
• Theme.Default
  • Accessor for default theme colors.
• Theme.Secondary
  • Accessor for secondary theme colors.
• Theme.Danger
  • Accessor for danger theme colors.
• Theme.Success
  • Accessor for success theme colors.

This sample demonstrates how to create a simple theme switcher.

using Tesserae;
using static Tesserae.UI;

public class ThemeSample : IComponent
{
    public HTMLElement Render()
    {
        return Stack().Children(
            Button("Switch to Dark").OnClick(() => Theme.Dark()),
            Button("Switch to Light").OnClick(() => Theme.Light()),
            TextBlock("Current Theme: " + (Theme.IsDark ? "Dark" : "Light"))
        ).Render();
    }
}