Skip to main content

Theme switcher

Choose System, Light or Dark from an icon menu, sharing one persisted document preference across application and specification controls.

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let themeSwitcherHead = ThemeSwitcher.assets "your-product-appearance" ColorMode.System

let themeSwitcherExample = ThemeSwitcher.create "theme-switcher-example" "Choose color theme" |> ThemeSwitcher.render

On this page

Installation

Copy this component and its required dependencies into the consumer-owned Components project.

dotnet fve add theme-switcher --config src/Acme.Components/fve.json

The CLI resolves dependencies and preserves consumer-authored files. See Installation for project initialization and Tailwind source detection.

Usage

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let themeSwitcherHead = ThemeSwitcher.assets "your-product-appearance" ColorMode.System

let themeSwitcherExample = ThemeSwitcher.create "theme-switcher-example" "Choose color theme" |> ThemeSwitcher.render

API reference

type ColorMode =
    | System
    | Light
    | Dark

type ThemeSwitcherConfig

module ThemeSwitcher =
    val create : id:string -> label:string -> ThemeSwitcherConfig
    val withDefaultMode : defaultMode:ColorMode -> config:ThemeSwitcherConfig -> ThemeSwitcherConfig
    val assetsWithNonce : storageKey:string -> defaultMode:ColorMode -> nonce:string option -> HtmlElement
    val assets : storageKey:string -> defaultMode:ColorMode -> HtmlElement
    val render : config:ThemeSwitcherConfig -> HtmlElement

module ColorMode =
    val value : _arg1:ColorMode -> string