rs-grid
  • Français

      • Themes integres

      Themes disponibles

      Light (par defaut)

      Palette claire inspiree d'AG Grid avec un arriere-plan blanc et des accents gris subtils.

      let theme = Theme::light();
      ProprieteValeur
      Arriere-plan#ffffff
      En-tete bgrgb(248, 249, 250)
      Textergb(24, 29, 31)
      Lignes de grillergb(224, 224, 224)
      Selectionrgba(31, 119, 220, 0.18)
      Taille de police14px

      Dark

      Palette sombre inspiree de Tokyo Night avec des tons bleu profond.

      let theme = Theme::dark();
      ProprieteValeur
      Arriere-planrgb(26, 27, 38)
      En-tete bgrgb(36, 40, 59)
      Textergb(192, 202, 245)
      Lignes de grillergb(42, 47, 69)
      Selectionrgba(122, 162, 255, 0.2)
      Taille de police14px

      Themes Material 3

      Les exemples incluent les themes Material 3 Light et Material 3 Dark via des fichiers CSS. Ceux-ci utilisent le systeme de couleurs Material Design 3.

      Changer de theme

      Via des classes CSS

      L'application d'exemple change de theme en basculant une classe sur <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 le 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()
    };
});

      Creer un theme personnalise

      Partez d'un theme integre et surchargez les champs souhaites :

      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
};

      Ou definissez tout via CSS — voir la Reference des variables CSS.