Tesserae - Theme Builder

ThemeBuilder

Description

Theme.Build() returns a ThemeBuilder, a fluent builder for every colour CSS variable the toolkit reads. Each setter takes a light value and a dark value, and Apply() writes them into a single <style> element, so one call themes both modes and switching mode afterwards needs nothing further. Variables you don't set keep their defaults from tss.common.css.

Use it to brand an app, match an existing design system or apply a per-tenant palette. For a single change such as the primary colour or the page background, Theme.SetPrimary(...), Theme.SetBackground(...) and Theme.SetHighlight(...) (Theme Colors) leave the rest of the palette alone.

Usage

Chain the setters you need and finish with .Apply(). A theme applied earlier is removed first, and Theme.ResetBuild() goes back to the defaults.

theme-builder-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var presets = HStack().Children(
                Button("Ocean").OnClick(() => Theme.Build()
                    .Primary          (Color.FromString("#0078d4"), Color.FromString("#2899f5"))
                    .Link             (Color.FromString("#0078d4"), Color.FromString("#55b3fb"))
                    .DefaultBackground(Color.FromString("#eaf3fb"), Color.FromString("#0b1320"))
                    .DefaultForeground(Color.FromString("#0b3559"), Color.FromString("#e6f1fb"))
                    .DefaultBorder    (Color.FromString("#bcd6ea"), Color.FromString("#1f3252"))
                    .Apply()).MR(8),
                Button("Forest").OnClick(() => Theme.Build()
                    .Primary          (Color.FromString("#16a34a"), Color.FromString("#22c55e"))
                    .Link             (Color.FromString("#15803d"), Color.FromString("#22c55e"))
                    .DefaultBackground(Color.FromString("#eaf7ee"), Color.FromString("#08160d"))
                    .DefaultForeground(Color.FromString("#143922"), Color.FromString("#dcfce7"))
                    .DefaultBorder    (Color.FromString("#bdddc7"), Color.FromString("#1d3a25"))
                    .Apply()).MR(8),
                Button("Reset").Danger().OnClick(() => Theme.ResetBuild()).MR(8),
                Button("Toggle dark").OnClick(() => Theme.IsDark = !Theme.IsDark));

            var surfaces = Card(VStack().Children(
                TextBlock("These controls change colour when a preset is applied."),
                HStack().MT(8).Children(
                    Button("Primary").Primary().MR(8),
                    Button("Success").Success().MR(8),
                    Button("Default")),
                Label("A textbox").SetContent(TextBox()).MT(8)));

            var component = VStack().Children(presets, surfaces.MT(16));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Primary, Danger, Warning and Success each set the background, its hover and active shades and the border together; Primary also sets the shadow, link and highlight colours, so chain Link(...) or Highlight(...) after it to give those their own values. The …Background, …Foreground, …Border setters change one piece. SetVariable(name, light, dark) covers a variable the typed setters don't, with the name given without the --tss- prefix. ToCss() returns the generated CSS without attaching it, for example to store a tenant's palette and re-apply it later.

API reference

class

UI

public static partial class UI

Namespace: Tesserae

ThemeBuilder

Description

Usage

API reference

See also