rs-grid
  • English

      • Built-in Themes

      Available themes

      Light (default)

      AG Grid-inspired light palette with white background and subtle gray accents.

      let theme = Theme::light();
      PropertyValue
      Background#ffffff
      Header bgrgb(248, 249, 250)
      Textrgb(24, 29, 31)
      Grid linesrgb(224, 224, 224)
      Selectionrgba(31, 119, 220, 0.18)
      Font size14px

      Dark

      Tokyo Night-inspired dark palette with deep blue tones.

      let theme = Theme::dark();
      PropertyValue
      Backgroundrgb(26, 27, 38)
      Header bgrgb(36, 40, 59)
      Textrgb(192, 202, 245)
      Grid linesrgb(42, 47, 69)
      Selectionrgba(122, 162, 255, 0.2)
      Font size14px

      Material 3 themes

      The examples include Material 3 Light and Material 3 Dark themes via CSS files. These use the Material Design 3 color system.

      Switching themes

      Via CSS classes

      The example app switches themes by toggling a class on <html>:

      /* Default: light */
:root {
  --rs-grid-bg: #ffffff;
  --rs-grid-cell-text: rgb(24, 29, 31);
}

/* Dark override */
html.dark {
  --rs-grid-bg: rgb(26, 27, 38);
  --rs-grid-cell-text: rgb(192, 202, 245);
}

      Via code

      Leptos
      Vanilla JS
      Dioxus
      Yew
      let (theme, set_theme) = create_signal(Theme::light());

// Toggle
set_theme.update(|t| {
    *t = if *t == Theme::light() {
        Theme::dark()
    } else {
        Theme::light()
    };
});

      Creating a custom theme

      Start from a built-in theme and override specific fields:

      let custom = Theme {
    bg: Color::rgb(30, 30, 46),
    header_bg: Color::rgb(49, 50, 68),
    cell_text: Color::rgb(205, 214, 244),
    selection_fill: Color::rgba(137, 180, 250, 51),
    ..Theme::dark()  // inherit everything else
};

      Or define everything via CSS — see CSS Variables Reference.