Agent Skills › lichtblick-suite/lichtblick › theme

theme

GitHub

提供 Material-UI (MUI) 主题系统的深度知识，涵盖深色/浅色调色板、字体排版及 tss-react 样式规范。用于指导正确创建主题、应用配色方案及使用特定样式库，确保视觉设计一致性。

.github/skills/theme/SKILL.md lichtblick-suite/lichtblick

Trigger Scenarios

需要创建或修改 MUI 主题配置时询问深色或浅色模式的颜色定义与字体设置时在组件中实现样式且需遵循 tss-react/mui 规范时

Install

npx skills add lichtblick-suite/lichtblick --skill theme -g -y

More Options

Non-standard path

npx skills add https://github.com/lichtblick-suite/lichtblick/tree/develop/.github/skills/theme -g -y

Use without installing

npx skills use lichtblick-suite/lichtblick@theme

指定 Agent (Claude Code)

npx skills add lichtblick-suite/lichtblick --skill theme -a claude-code -g -y

安装 repo 全部 skill

npx skills add lichtblick-suite/lichtblick --all -g -y

预览 repo 内 skill

npx skills add lichtblick-suite/lichtblick --list

SKILL.md

Frontmatter

{
    "name": "theme",
    "description": "Deep theme system knowledge: createMuiTheme factory, dark\/light palette tokens, typography scale, ThemeProvider color-scheme application, and tss-react\/mui styling conventions."
}

Theme Skill

How colors, typography, and the overall visual design are managed via Material-UI (MUI) theming.

Layout

packages/theme/src/
    ├── index.ts            (package entry, re-exports)
    ├── createMuiTheme.ts   (MUI theme factory)
    ├── palette.ts          (dark & light color definitions)
    ├── typography.ts       (font families & sizes)
    └── components/         (MUI component overrides)

Core Files

File	Role
`packages/theme/src/createMuiTheme.ts`	Factory that builds the full MUI theme
`packages/theme/src/palette.ts`	Dark and light palette color definitions
`packages/theme/src/typography.ts`	Font families (Inter, IBM Plex Mono) and scale
`packages/theme/src/index.ts`	Package entry, re-exports

Treat palette.ts / typography.ts as the source of truth for exact token values (hex codes, font sizes). Read them directly rather than hardcoding specific values elsewhere.

Color Scheme

Lichtblick supports two schemes: dark (default) and light. Each is defined as a palette object (mode, primary, secondary, error, warning, info, success, background, text, …) in palette.ts.

How a Color Scheme is Applied

User sets a preference (AppConfiguration colorScheme setting)
ThemeProvider reads the preference from context
createMuiTheme(colorScheme) is called with "dark" or "light"
MUI's ThemeProvider wraps the entire app with the resulting theme

function createMuiTheme(colorScheme: "dark" | "light"): Theme {
  const palette = colorScheme === "dark" ? darkPalette : lightPalette;
  return createTheme({ palette, typography, components: { /* MUI overrides */ } });
}

Typography

Inter — primary UI font (variable weight)
IBM Plex Mono — code/data display (timestamps, topic names, raw messages)

The scale (h1, h2, body1, body2, …) is defined in typography.ts.

Styling Convention (tss-react/mui)

Components are styled with tss-react/mui — not @emotion/styled, MUI's styled(), Box, or the sx prop. Styles live in ComponentName.style.ts files.

import { makeStyles } from "tss-react/mui";

const useStyles = makeStyles()((theme) => ({
  root: {
    backgroundColor: theme.palette.background.paper,
    color: theme.palette.text.primary,
    fontFamily: theme.typography.fontFamily,
  },
  highlight: { color: theme.palette.primary.main },
}));