Tesserae

Theme Colors

Description

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.

Usage

Switching Themes

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

theme-colors-sample.js

using System;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sample = new ThemeSwitchSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sample);
        }
    }

    public class ThemeSwitchSample : IComponent
    {
        public HTMLElement Render()
        {
            var status = TextBlock(Theme.IsDark ? "Dark theme" : "Light theme").Medium();

            return Stack().Children(
                status,
                HStack().Children(
                    Button("Dark").OnClick((s, e) =>
                    {
                        Theme.Dark();
                        status.Text("Dark theme");
                    }),
                    Button("Light").OnClick((s, e) =>
                    {
                        Theme.Light();
                        status.Text("Light theme");
                    })
                )
            ).Render();
        }
    }
}

Customizing Colors

You can customize the primary and background colors.

theme-colors-2-sample.js

using System;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sample = new ThemeCustomColorsSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sample);
        }
    }

    public class ThemeCustomColorsSample : IComponent
    {
        public HTMLElement Render()
        {
            return Stack().Children(
                TextBlock("Customize the theme palette at runtime."),
                Button("Apply custom palette").Primary().OnClick((s, e) =>
                {
                    // Set primary color (light mode, dark mode)
                    Theme.SetPrimary(Color.FromString("blue"), Color.FromString("lightblue"));

                    // Set background color (light mode, dark mode)
                    Theme.SetBackground(Color.FromString("white"), Color.FromString("#333"));
                })
            ).Render();
        }
    }
}

Methods

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.

Properties

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.

Samples

Theme Switcher Sample

This sample demonstrates how to create a simple theme switcher.

theme-colors-3-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new ThemeSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    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();
        }
    }
}