Rust の Dioxus クレートで、ライトモードとダークモードの切り替えメモ

出来上がったもの

コード

Cargo.toml

[package]
name = "dioxus_theme"
version = "0.1.0"
authors = []
edition = "2024"

[dependencies]
dioxus = { version = "0.7.1", features = [] }

[features]
default = ["desktop"]
web = ["dioxus/web"]
desktop = ["dioxus/desktop"]
mobile = ["dioxus/mobile"]

main.rs

#![allow(non_snake_case)]
#![windows_subsystem = "windows"]
use dioxus::prelude::*;
use dioxus::desktop::muda::*;

const MAIN_CSS: Asset = asset!("/assets/main.css");

#[derive(Debug, Clone, PartialEq)]
enum Theme{
    Light,
    Dark,
}
fn main() {
    let config = dioxus::desktop::Config::new().with_menu(Menu::new());
    LaunchBuilder::new().with_cfg(config).launch(ui);
}

fn ui() -> Element {
    let mut theme = use_signal(|| Theme::Light);
    let class = match theme() {
        Theme::Light => "app",
        Theme::Dark => "app dark",
    };
    rsx!{
        document::Link { rel: "stylesheet", href: MAIN_CSS }
        div {
            class: "{class}",
            style: "display: flex; justify-content: center; align-items: center;",
            button {
                onclick: move |_| { theme.set(Theme::Light); },
                "Light"
            }
            button {
                onclick: move |_| { theme.set(Theme::Dark); },
                "Dark"
            }
        }
    }
}

main.css

/* ライトテーマ */
.app {
    color-scheme: light;
    background-color: light-dark(#e4e4e4, #313131);
    color: light-dark(#000000, #ffffff);
    width: 100%;
    height: 100%;
    gap: 20px;
    position: absolute;
    left: 0px;
    top: 0px;
}

/* ダークテーマ */
.app.dark {
    color-scheme: dark;
}

/* ボタン */
button {
    background-color: light-dark(#ffffff, #000000);
    color: light-dark(#000000, #ffffff);
    border: 1px solid light-dark(#c0c0c0, #555555);
    padding: 8px 16px;
    font-size: 16px;
    cursor: pointer;
}