matlab-theming

Name: matlab-theming
Author: matlab

815stars105forks

How to install matlab-theming?

matlab/matlab-agentic-toolkit/matlab-theming

$npx -y skills add matlab/matlab-agentic-toolkit --skill matlab-theming

Installs into the current project.

Summary

Style MATLAB charts and figures. colororder palettes for chart series colors, colormap selection, brand color organization, and the R2025a Theme API for uifigure apps (dark mode with fliplightness, ThemeChangedFcn, uistyle, component colors). Use when customizing chart colors, ap

Files · 1

View on GitHub

SKILL.md

1	# MATLAB Theming
2
3	Style MATLAB charts with color palettes and — for uifigure apps — apply the R2025a Theme API for brand colors, dark mode, and component styling.
4
5	## When to Use This Skill
6
7	Use this skill when:
8	- Setting `colororder` for chart series colors (any context)
9	- Choosing or importing a color palette for plots
10	- Organizing brand colors into a reusable struct
11	- Applying a custom `colormap` for continuous data
12	- Implementing dark mode with `fliplightness()` (uifigure)
13	- Wiring `ThemeChangedFcn` to react to OS/user theme changes (uifigure)
14	- Using `uistyle` for conditional formatting in tables/trees (uifigure)
15	- Importing an external color scheme (Material Design, Adobe Color, Tailwind)
16
17	## When NOT to Use This Skill
18
19	- Choosing chart types or building charts from scratch (use `matlab-build-chart`)
20	- Building a full app layout (use `matlab-build-app` — it invokes this skill for theming sub-steps)
21	- Setting colors on individual plot elements as a one-off (just use the `Color` property directly)
22	- Non-MATLAB styling (CSS, HTML themes for web apps)
23
24	## Critical Rules
25
26	### Universal (all contexts)
27
28	- MUST centralize brand/palette colors in a struct — never scatter RGB values
29	- ALWAYS use `colororder()` for categorical chart series colors
30	- ALWAYS use `colormap()` for continuous scalar-mapped colors
31	- NEVER confuse `colororder` (categorical series) with `colormap` (continuous gradient)
32
33	### Additional rules for uifigure apps (R2025a Theme API)
34
35	- MUST use R2025a Theme API — do NOT manually set figure background or standard component colors
36	- MUST use `fliplightness()` to derive dark variants unless explicitly designing custom dark colors
37	- NEVER set a component's color explicitly unless branding requires it — breaks theme adaptation
38	- ALWAYS use the semantic token vocabulary defined below for cross-path consistency
39
40	## Semantic Token Vocabulary
41
42	Both MATLAB and web implementations map to these common tokens. When importing an external color scheme, map its colors to these tokens once.
43
44	\| Token \| Purpose \| MATLAB (struct field) \| Web (CSS variable) \|
45	\|---\|---\|---\|---\|
46	\| `primary` \| Brand/action color (buttons, links, active states) \| `theme.primary` \| `--accent` \|
47	\| `onPrimary` \| Text/icon on primary background \| `theme.onPrimary` \| `--accent-text` \|
48	\| `secondary` \| Secondary brand color (less prominent actions) \| `theme.secondary` \| `--secondary` \|
49	\| `error` \| Error/destructive state \| `theme.error` \| `--error` \|
50	\| `success` \| Success/confirmation state \| `theme.success` \| `--success` \|
51	\| `warning` \| Warning/caution state \| `theme.warning` \| `--warning` \|
52	\| `border` \| Custom borders and dividers \| `theme.border` \| `--border` \|
53	\| `plotColors` \| Chart series colors (Nx3 RGB matrix) \| `theme.plotColors` \| N/A (use chart library config) \|
54
55	MATLAB note: Surface/text colors (`--bg-primary`, `--text-primary` in CSS) are NOT in the MATLAB theme struct. The R2025a Theme API handles those automatically. Only define brand/custom colors.
56
57	## Quick Start
58
59	### Color palettes for any figure
60
61	```matlab
62	colors = [0 0.447 0.741; 0.85 0.33 0.10; 0.93 0.69 0.13; ...
63	0.49 0.18 0.56; 0.47 0.67 0.19; 0.30 0.75 0.93];
64	colororder(ax, colors);
65	% All series in this axes now cycle through these colors
66	```
67
68	### Theme struct for uifigure apps (R2025a)
69
70	```matlab
71	function theme = createTheme(mode)
72	arguments
73	mode string {mustBeMember(mode, ["light", "dark"])} = "light"
74	end
75	theme.primary = [0 0.447 0.741]; % MATLAB blue
76	theme.onPrimary = [1 1 1];
77	theme.error = [0.83 0.18 0.18];
78	theme.success = [0.22 0.56 0.24];
79	theme.border = [0.88 0.88 0.88];
80	theme.plotColors = [0 0.447 0.741; 0.85 0.33 0.10; 0.93 0.69 0.13; ...
81	0.49 0.18 0.56; 0.47 0.67 0.19; 0.30 0.75 0.93; 0.64 0.08 0.18];
82	if mode == "dark"
83	theme.primary = fliplightness(theme.primary);
84	theme.plotColors = fliplightness(theme.plotColors);
85	end
86	end
87	```
88
89	Wiring to a figure:
90
91	```matlab
92	fig.ThemeChangedFcn = @(src, ~) applyTheme(src, ax);
93
94	function applyTheme(fig, ax)
95	theme = createTheme(fig.Theme.BaseColorStyle);
96	colororder(ax, theme.plotColors);
97	end
98	```
99
100	## Light/Dark Strategy
101
102	1. Don't set figure background, standard component bg/text — Theme API handles it automatically
103	2. **Do

People who liked this also viewed

6 picks

Type

matlab-theming

815stars105forks

View on GitHub

How to install matlab-theming?

matlab/matlab-agentic-toolkit/matlab-theming

$npx -y skills add matlab/matlab-agentic-toolkit --skill matlab-theming

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# MATLAB Theming
2
3	Style MATLAB charts with color palettes and — for uifigure apps — apply the R2025a Theme API for brand colors, dark mode, and component styling.
4
5	## When to Use This Skill
6
7	Use this skill when:
8	- Setting `colororder` for chart series colors (any context)
9	- Choosing or importing a color palette for plots
10	- Organizing brand colors into a reusable struct
11	- Applying a custom `colormap` for continuous data
12	- Implementing dark mode with `fliplightness()` (uifigure)
13	- Wiring `ThemeChangedFcn` to react to OS/user theme changes (uifigure)
14	- Using `uistyle` for conditional formatting in tables/trees (uifigure)
15	- Importing an external color scheme (Material Design, Adobe Color, Tailwind)
16
17	## When NOT to Use This Skill
18
19	- Choosing chart types or building charts from scratch (use `matlab-build-chart`)
20	- Building a full app layout (use `matlab-build-app` — it invokes this skill for theming sub-steps)
21	- Setting colors on individual plot elements as a one-off (just use the `Color` property directly)
22	- Non-MATLAB styling (CSS, HTML themes for web apps)
23
24	## Critical Rules
25
26	### Universal (all contexts)
27
28	- MUST centralize brand/palette colors in a struct — never scatter RGB values
29	- ALWAYS use `colororder()` for categorical chart series colors
30	- ALWAYS use `colormap()` for continuous scalar-mapped colors
31	- NEVER confuse `colororder` (categorical series) with `colormap` (continuous gradient)
32
33	### Additional rules for uifigure apps (R2025a Theme API)
34
35	- MUST use R2025a Theme API — do NOT manually set figure background or standard component colors
36	- MUST use `fliplightness()` to derive dark variants unless explicitly designing custom dark colors
37	- NEVER set a component's color explicitly unless branding requires it — breaks theme adaptation
38	- ALWAYS use the semantic token vocabulary defined below for cross-path consistency
39
40	## Semantic Token Vocabulary
41
42	Both MATLAB and web implementations map to these common tokens. When importing an external color scheme, map its colors to these tokens once.
43
44	\| Token \| Purpose \| MATLAB (struct field) \| Web (CSS variable) \|
45	\|---\|---\|---\|---\|
46	\| `primary` \| Brand/action color (buttons, links, active states) \| `theme.primary` \| `--accent` \|
47	\| `onPrimary` \| Text/icon on primary background \| `theme.onPrimary` \| `--accent-text` \|
48	\| `secondary` \| Secondary brand color (less prominent actions) \| `theme.secondary` \| `--secondary` \|
49	\| `error` \| Error/destructive state \| `theme.error` \| `--error` \|
50	\| `success` \| Success/confirmation state \| `theme.success` \| `--success` \|
51	\| `warning` \| Warning/caution state \| `theme.warning` \| `--warning` \|
52	\| `border` \| Custom borders and dividers \| `theme.border` \| `--border` \|
53	\| `plotColors` \| Chart series colors (Nx3 RGB matrix) \| `theme.plotColors` \| N/A (use chart library config) \|
54
55	MATLAB note: Surface/text colors (`--bg-primary`, `--text-primary` in CSS) are NOT in the MATLAB theme struct. The R2025a Theme API handles those automatically. Only define brand/custom colors.
56
57	## Quick Start
58
59	### Color palettes for any figure
60
61	```matlab
62	colors = [0 0.447 0.741; 0.85 0.33 0.10; 0.93 0.69 0.13; ...
63	0.49 0.18 0.56; 0.47 0.67 0.19; 0.30 0.75 0.93];
64	colororder(ax, colors);
65	% All series in this axes now cycle through these colors
66	```
67
68	### Theme struct for uifigure apps (R2025a)
69
70	```matlab
71	function theme = createTheme(mode)
72	arguments
73	mode string {mustBeMember(mode, ["light", "dark"])} = "light"
74	end
75	theme.primary = [0 0.447 0.741]; % MATLAB blue
76	theme.onPrimary = [1 1 1];
77	theme.error = [0.83 0.18 0.18];
78	theme.success = [0.22 0.56 0.24];
79	theme.border = [0.88 0.88 0.88];
80	theme.plotColors = [0 0.447 0.741; 0.85 0.33 0.10; 0.93 0.69 0.13; ...
81	0.49 0.18 0.56; 0.47 0.67 0.19; 0.30 0.75 0.93; 0.64 0.08 0.18];
82	if mode == "dark"
83	theme.primary = fliplightness(theme.primary);
84	theme.plotColors = fliplightness(theme.plotColors);
85	end
86	end
87	```
88
89	Wiring to a figure:
90
91	```matlab
92	fig.ThemeChangedFcn = @(src, ~) applyTheme(src, ax);
93
94	function applyTheme(fig, ax)
95	theme = createTheme(fig.Theme.BaseColorStyle);
96	colororder(ax, theme.plotColors);
97	end
98	```
99
100	## Light/Dark Strategy
101
102	1. Don't set figure background, standard component bg/text — Theme API handles it automatically
103	2. **Do

People who liked this also viewed

6 picks

Type