Color Styling

Tesserae uses CSS variables for theme colors and exposes helpers for custom color management.

Theme colors

Use Theme constants for consistent colors across components:

colors-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 badge = Badge("New")
                .Background(Theme.Primary.Background)
                .Foreground(Theme.Primary.Foreground);
            document.body.style.overflow = "hidden";
            MountCenteredToBody(badge);
        }
    }

}

The theme exposes default, primary, secondary, danger, and success color variables through nested classes like Theme.Default and Theme.Primary.

Switching light/dark mode

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 ThemeToggleSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sample);
        }
    }

    public class ThemeToggleSample : IComponent
    {
        public HTMLElement Render()
        {
            var label = TextBlock("Current theme: light").Medium();

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

Theme mode toggles a tss-dark-mode CSS class on the document body.

Customizing theme colors

To override primary and background colors globally, call:

colors-3-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 ThemeOverrideSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sample);
        }
    }

    public class ThemeOverrideSample : IComponent
    {
        public HTMLElement Render()
        {
            return Stack().Children(
                TextBlock("Override the theme's primary and background colors globally:"),
                Button("Apply blue theme").Primary().OnClick((s, e) =>
                {
                    Theme.SetPrimary(Color.FromString("#0063B1"), Color.FromString("#2899F5"));
                    Theme.SetBackground(Color.FromString("#FFFFFF"), Color.FromString("#1B1A19"));
                })
            ).Render();
        }
    }
}

SetPrimary and SetBackground generate CSS variables for both light and dark themes at runtime.

Working with Color

The Color helper supports parsing from hex/rgba strings and constructing from ARGB components:

colors-4-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 ColorParsingSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sample);
        }
    }

    public class ColorParsingSample : IComponent
    {
        public HTMLElement Render()
        {
            var primary = Color.FromArgb(0, 120, 212);
            var custom  = Color.FromString("rgba(16, 110, 190, 1)");

            return Stack().Children(
                TextBlock("From ARGB: " + primary.ToHex()),
                TextBlock("From string: " + custom.ToHex())
            ).Render();
        }
    }
}

Color also supports evaluating CSS variables via Color.EvalVar.

Referenced by

index