• English

      • CSS Variables Reference

      How it works

      rs-grid reads CSS custom properties from :root at mount time via theme_from_css_vars(). Each variable maps to a field on the Theme struct. If a variable is absent or unparseable, the light theme default is used.

      Supported color formats

      • #rrggbb / #rrggbbaa
      • #rgb / #rgba
      • rgb(r, g, b)
      • rgba(r, g, b, a) — a is a 0–1 float

      Color variables

      CSS VariableTheme fieldLight defaultDark defaultDescription
      --rs-grid-bgbg#ffffffrgb(26,27,38)Cell background
      --rs-grid-header-bgheader_bgrgb(248,249,250)rgb(36,40,59)Header background
      --rs-grid-header-textheader_textrgb(24,29,31)rgb(169,177,214)Header text color
      --rs-grid-cell-textcell_textrgb(24,29,31)rgb(192,202,245)Cell text color
      --rs-grid-grid-linegrid_linergb(224,224,224)rgb(42,47,69)Cell border color
      --rs-grid-column-separator-colorcolumn_separator_colorrgb(224,224,224)rgb(42,47,69)Vertical line separating adjacent data-row columns — defaults to grid_line's color, diverge it to style column separators independently
      --rs-grid-header-borderheader_borderrgb(186,191,199)rgb(61,68,102)Header bottom border
      --rs-grid-selection-fillselection_fillrgba(31,119,220,0.18)rgba(122,162,255,0.2)Selection rectangle fill
      --rs-grid-selection-borderselection_borderrgba(31,119,220,0.82)rgba(122,162,255,0.8)Selection rectangle border
      --rs-grid-scrollbar-trackscrollbar_trackrgb(241,241,241)rgb(31,35,53)Scrollbar track background
      --rs-grid-scrollbar-thumbscrollbar_thumbrgba(100,100,110,0.63)rgba(169,177,214,0.4)Scrollbar thumb color
      --rs-grid-row-alt-bgrow_alt_bgrgb(252,252,253)rgb(30,32,48)Alternating row background
      --rs-grid-row-hover-bgrow_hover_bgrgba(0,0,0,0.04)rgba(255,255,255,0.04)Row hover overlay
      --rs-grid-checked-row-bgchecked_row_bgrgba(66,42,213,0.09)rgba(99,80,240,0.12)Background overlay for a row checked via the row-selection checkbox column
      --rs-grid-locked-cell-bglocked_cell_bgrgba(0,0,0,0.04)rgba(255,255,255,0.04)Background overlay for a non-editable cell (see Per-cell editability)
      --rs-grid-locked-cell-textlocked_cell_textrgba(24,29,31,0.55)rgba(208,208,208,0.55)Text color for a non-editable cell
      --rs-grid-invalid-cell-borderinvalid_cell_borderrgb(239,68,68)rgb(220,38,38)Border for a cell whose current value fails validation, shown even at rest (see Validation)
      --rs-grid-search-highlightsearch_highlightrgba(255,213,0,0.31)rgba(255,213,0,0.31)Search match highlight
      --rs-grid-search-currentsearch_currentrgba(255,165,0,0.55)rgba(255,165,0,0.55)Current search match
      --rs-grid-skeleton-fgskeleton_fgrgba(200,200,200,0.39)rgba(60,65,90,0.39)Skeleton loading bar color

      Size & typography variables

      CSS VariableTheme fieldDefaultTypeDescription
      --rs-grid-font-sizefont_size14pxpxCell text font size
      --rs-grid-header-font-sizeheader_font_size12pxpxHeader text font size
      --rs-grid-header-font-boldheader_font_boldtrueboolHeader bold (true/false/1/0)
      --rs-grid-cell-paddingcell_padding10pxpxHorizontal cell padding
      --rs-grid-scrollbar-widthscrollbar_width14pxpxScrollbar track + thumb width
      --rs-grid-scrollbar-radiusscrollbar_radius4pxpxScrollbar thumb corner radius
      --rs-grid-invalid-cell-border-widthinvalid_cell_border_width1pxpxWidth of the at-rest invalid-cell border
      --rs-grid-grid-line-widthgrid_line_width1pxpxWidth of the horizontal grid line between data rows
      --rs-grid-column-separator-widthcolumn_separator_width1pxpxWidth of the vertical column-separator line

      Example: custom dark theme

      :root {
  --rs-grid-bg: #1e1e2e;
  --rs-grid-header-bg: #313244;
  --rs-grid-header-text: #cdd6f4;
  --rs-grid-cell-text: #cdd6f4;
  --rs-grid-grid-line: #45475a;
  --rs-grid-header-border: #585b70;
  --rs-grid-selection-fill: rgba(137, 180, 250, 0.2);
  --rs-grid-selection-border: rgba(137, 180, 250, 0.8);
  --rs-grid-scrollbar-track: #1e1e2e;
  --rs-grid-scrollbar-thumb: rgba(166, 173, 200, 0.4);
  --rs-grid-row-alt-bg: #181825;
  --rs-grid-row-hover-bg: rgba(255, 255, 255, 0.04);
  --rs-grid-font-size: 13px;
  --rs-grid-header-font-size: 12px;
}
      Note

      CSS variables are read once at mount time. Changing them dynamically requires re-mounting the grid or passing an updated Theme struct programmatically via a Leptos signal.