Themes and fonts

Built-in themes: light, dark, and four simple Korean-style themes — board (bulletin board: thick top rule, horizontal lines), erp (every cell bordered,…

Live demoThemes & fonts

Light and dark themes, CSS variables, font size and family.

Code for this demo

import { createGrid } from '@freegridjs/core';
import { demoColumns, makeRows } from '../data';
import { select, separator, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const grid = createGrid(ctx.host, { columns: demoColumns(lang), data: makeRows(3000), rowSelection: 'multiple', locale: lang });

  // A custom theme is just CSS variables on a class named fg-theme-<name>.
  const style = document.createElement('style');
  style.textContent = `
    .fg-theme-ocean { --fg-font: inherit; --fg-font-size: 13px; --fg-radius: 12px; --fg-cell-px: 14px;
      --fg-bg: #f3fbfb; --fg-fg: #0b3b3c; --fg-muted: #4f7a7b; --fg-header-bg: #dff2f1; --fg-header-fg: #0b3b3c;
      --fg-border: #b9dedc; --fg-row-border: #d5ecea; --fg-row-odd: #ebf7f6; --fg-row-hover: #d8f0ee;
      --fg-row-selected: #bfe6e2; --fg-accent: #0f8c86; --fg-accent-fg: #fff; --fg-focus: #0f8c86;
      --fg-popup-bg: #fff; --fg-input-bg: #fff; --fg-shadow: 0 12px 32px rgba(11,59,60,.18); }`;
  document.head.append(style);

  select(ctx, tr(lang, { en: 'Theme', ko: '테마' }), [
    ['light', 'Light'], ['dark', 'Dark'],
    ['board', tr(lang, { en: 'Board (Korean)', ko: '게시판형' })],
    ['erp', tr(lang, { en: 'ERP (Korean)', ko: '관리자·ERP형' })],
    ['excel', tr(lang, { en: 'Excel-like', ko: '엑셀형' })],
    ['classic', tr(lang, { en: 'Classic navy', ko: '진한 헤더형' })],
    ['ocean', tr(lang, { en: 'Ocean (custom CSS)', ko: 'Ocean (사용자 정의 CSS)' })],
  ], 'light', v => grid.setTheme(v));
  separator(ctx);
  select(ctx, tr(lang, { en: 'Font size', ko: '글꼴 크기' }), [9, 10, 11, 12, 13, 14, 15, 16, 17, 18].map(n => [String(n), `${n}px`] as [string, string]), '13',
    v => grid.setFont({ size: Number(v) }));
  select(ctx, tr(lang, { en: 'Font', ko: '글꼴' }), [
    ['', tr(lang, { en: 'Theme default', ko: '테마 기본' })],
    ['Georgia, serif', 'Georgia'],
    ['ui-monospace, Consolas, monospace', 'Monospace'],
    ['"Malgun Gothic", "Apple SD Gothic Neo", sans-serif', '맑은 고딕 / Apple SD'],
  ], '', v => grid.setFont({ family: v || null }));
  return grid;
}

Built-in themes: light, dark, and four simple Korean-style themes — board (bulletin board: thick top rule, horizontal lines), erp (every cell bordered, compact), excel (gridlines, green focus) and classic (navy header). Font size and family are one option each; row heights follow the size unless you set them.

createGrid(el, { columns, data, theme: 'erp', fontSize: 12, fontFamily: 'Pretendard, sans-serif' });
grid.setTheme('board');
grid.setFont({ size: 14 });
grid.setFont({ family: null }); // back to the theme font

Make your own theme

/* any class named fg-theme-<name> is a theme */
.fg-theme-brand {
  --fg-font: "Pretendard", sans-serif;
  --fg-font-size: 13px;
  --fg-bg: #fff; --fg-fg: #1d2433; --fg-muted: #6b7385;
  --fg-header-bg: #f2f5fa; --fg-header-fg: #1d2433;
  --fg-border: #d9dfe8; --fg-row-border: #edf0f5;
  --fg-col-line: inset -1px 0 #edf0f5;
  --fg-row-odd: #fff; --fg-row-hover: #f5f8ff; --fg-row-selected: #e6eeff;
  --fg-accent: #3056d3; --fg-focus: #3056d3;
  --fg-header-text-align: center; --fg-header-label-flex: 1 1 auto;
}

Variable	Kind	Controls
`--fg-font / --fg-font-size`	`font`	Font family and size.
`--fg-bg / --fg-fg / --fg-muted`	`color`	Background, text and secondary text.
`--fg-header-bg / --fg-header-fg / --fg-header-weight`	`color / weight`	Header colors and weight.
`--fg-border / --fg-row-border`	`color`	Outer border and row lines.
`--fg-col-line`	`box-shadow`	Vertical cell lines, e.g. 'inset -1px 0 #ddd'. Default none.
`--fg-row-odd / --fg-row-hover / --fg-row-selected`	`color`	Zebra, hover and selected rows.
`--fg-accent / --fg-focus`	`color`	Buttons, sort icons and the focused cell.
`--fg-radius / --fg-cell-px`	`length`	Corner radius and cell padding.
`--fg-header-text-align / --fg-top-border`	`keyword / border`	Center header labels; thick top rule.