color-mode-and-theme

Name: color-mode-and-theme
Author: dembrandt

27stars5forks

How to install color-mode-and-theme?

dembrandt/dembrandt-skills/color-mode-and-theme

$npx -y skills add dembrandt/dembrandt-skills --skill color-mode-and-theme

Installs into the current project.

Summary

Choose light, dark, or combined color mode deliberately based on brand tone and user context. Offer a theme selector only when user control genuinely matters — enterprise tools, data-heavy UIs, or extended-use applications. Use when defining the base color palette, designing a de

Files · 1

View on GitHub

SKILL.md

1	# Color Mode and Theme
2
3	## The Decision: Light, Dark, or Both
4
5	Color mode is a brand and context decision, not a personal preference. Make it deliberately.
6
7	### Light (white design)
8	Tone: Open, trustworthy, content-forward, accessible, professional
9	Fits: Marketing sites, e-commerce, editorial, SaaS with mixed audiences, consumer products, B2B tools where the content is the focus
10
11	Light mode is the safer default for most products. It performs better in bright environments and has broader accessibility coverage out of the box.
12
13	### Dark (dark design)
14	Tone: Premium, focused, immersive, technical, high-contrast data
15	Fits: Trading platforms, developer tools, creative tools (video/audio editors), data dashboards with dense visualisations, entertainment, gaming
16
17	Dark mode reduces eye strain during extended use in low-light environments. It also makes colourful data visualisations (charts, heatmaps) pop more clearly against a dark surface.
18
19	Caution: Dark mode is harder to get right. Low-contrast text, over-saturated brand colours, and insufficient surface differentiation are common failures. If the team cannot maintain it properly, light mode is better than a broken dark mode.
20
21	### Combined (system-default + manual override)
22	Respect `prefers-color-scheme` and let the OS set the default. Offer a toggle for users who want to override. This is the modern standard for most products with a returning user base.
23
24	```css
25	@media (prefers-color-scheme: dark) {
26	:root { /* dark tokens */ }
27	}
28	@media (prefers-color-scheme: light) {
29	:root { /* light tokens */ }
30	}
31	[data-theme="dark"] { /* manual override */ }
32	[data-theme="light"] { /* manual override */ }
33	```
34
35	---
36
37	## When to Build a Theme Selector in the UI
38
39	A theme selector is a UI control — it takes space and adds complexity. Only build it when user control genuinely matters.
40
41	\| Situation \| Theme selector? \|
42	\|---\|---\|
43	\| Marketing site, landing page \| No — pick one mode, commit to it \|
44	\| Consumer SaaS, general audience \| Combined (system-default + toggle) \|
45	\| Developer tool, technical product \| Yes — developers expect it \|
46	\| Trading platform, financial dashboard \| Yes — extended use, low-light sessions common \|
47	\| B2B enterprise tool (ERP, analytics) \| Yes — power users, long sessions, personal preference varies \|
48	\| E-commerce storefront \| Usually no — light default, possibly system-default \|
49	\| Creative tool (design, video, audio) \| Yes — dark is often preferred, toggle still expected \|
50
51	Rule: if the user will spend hours per day in the tool, give them control. If it's a transactional or occasional-use product, pick the mode that fits the brand and move on.
52
53	Place the theme toggle in the header (top-right, near account) or in user settings — not in primary navigation.
54
55	---
56
57	## Brand Tone and Color Mode
58
59	The brand's existing visual identity should inform the default mode.
60
61	\| Brand tone \| Default mode \|
62	\|---\|---\|
63	\| Clean, minimal, trustworthy, open \| Light \|
64	\| Premium, exclusive, bold, immersive \| Dark \|
65	\| Technical, data-heavy, precise \| Dark \|
66	\| Playful, colourful, energetic \| Light (dark mode harder to maintain with vivid brand colours) \|
67	\| Neutral, enterprise, functional \| Light, with system-default toggle \|
68
69	If the brand uses a very dark primary colour (navy, deep green, near-black), a dark mode surfaces it naturally. If the brand is built around a bright, vivid primary, light mode lets it breathe.
70
71	---
72
73	## Dark Mode Token Principles
74
75	A theme switcher is a second palette, not a toggle. Every semantic colour needs a verified value in each mode — not one value flipped by an algorithm. Contrast that passes on light routinely fails on dark; saturation and elevation read differently. Re

People who liked this also viewed

6 picks

Type

color-mode-and-theme

27stars5forks

View on GitHub

How to install color-mode-and-theme?

dembrandt/dembrandt-skills/color-mode-and-theme

$npx -y skills add dembrandt/dembrandt-skills --skill color-mode-and-theme

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Color Mode and Theme
2
3	## The Decision: Light, Dark, or Both
4
5	Color mode is a brand and context decision, not a personal preference. Make it deliberately.
6
7	### Light (white design)
8	Tone: Open, trustworthy, content-forward, accessible, professional
9	Fits: Marketing sites, e-commerce, editorial, SaaS with mixed audiences, consumer products, B2B tools where the content is the focus
10
11	Light mode is the safer default for most products. It performs better in bright environments and has broader accessibility coverage out of the box.
12
13	### Dark (dark design)
14	Tone: Premium, focused, immersive, technical, high-contrast data
15	Fits: Trading platforms, developer tools, creative tools (video/audio editors), data dashboards with dense visualisations, entertainment, gaming
16
17	Dark mode reduces eye strain during extended use in low-light environments. It also makes colourful data visualisations (charts, heatmaps) pop more clearly against a dark surface.
18
19	Caution: Dark mode is harder to get right. Low-contrast text, over-saturated brand colours, and insufficient surface differentiation are common failures. If the team cannot maintain it properly, light mode is better than a broken dark mode.
20
21	### Combined (system-default + manual override)
22	Respect `prefers-color-scheme` and let the OS set the default. Offer a toggle for users who want to override. This is the modern standard for most products with a returning user base.
23
24	```css
25	@media (prefers-color-scheme: dark) {
26	:root { /* dark tokens */ }
27	}
28	@media (prefers-color-scheme: light) {
29	:root { /* light tokens */ }
30	}
31	[data-theme="dark"] { /* manual override */ }
32	[data-theme="light"] { /* manual override */ }
33	```
34
35	---
36
37	## When to Build a Theme Selector in the UI
38
39	A theme selector is a UI control — it takes space and adds complexity. Only build it when user control genuinely matters.
40
41	\| Situation \| Theme selector? \|
42	\|---\|---\|
43	\| Marketing site, landing page \| No — pick one mode, commit to it \|
44	\| Consumer SaaS, general audience \| Combined (system-default + toggle) \|
45	\| Developer tool, technical product \| Yes — developers expect it \|
46	\| Trading platform, financial dashboard \| Yes — extended use, low-light sessions common \|
47	\| B2B enterprise tool (ERP, analytics) \| Yes — power users, long sessions, personal preference varies \|
48	\| E-commerce storefront \| Usually no — light default, possibly system-default \|
49	\| Creative tool (design, video, audio) \| Yes — dark is often preferred, toggle still expected \|
50
51	Rule: if the user will spend hours per day in the tool, give them control. If it's a transactional or occasional-use product, pick the mode that fits the brand and move on.
52
53	Place the theme toggle in the header (top-right, near account) or in user settings — not in primary navigation.
54
55	---
56
57	## Brand Tone and Color Mode
58
59	The brand's existing visual identity should inform the default mode.
60
61	\| Brand tone \| Default mode \|
62	\|---\|---\|
63	\| Clean, minimal, trustworthy, open \| Light \|
64	\| Premium, exclusive, bold, immersive \| Dark \|
65	\| Technical, data-heavy, precise \| Dark \|
66	\| Playful, colourful, energetic \| Light (dark mode harder to maintain with vivid brand colours) \|
67	\| Neutral, enterprise, functional \| Light, with system-default toggle \|
68
69	If the brand uses a very dark primary colour (navy, deep green, near-black), a dark mode surfaces it naturally. If the brand is built around a bright, vivid primary, light mode lets it breathe.
70
71	---
72
73	## Dark Mode Token Principles
74
75	A theme switcher is a second palette, not a toggle. Every semantic colour needs a verified value in each mode — not one value flipped by an algorithm. Contrast that passes on light routinely fails on dark; saturation and elevation read differently. Re

People who liked this also viewed

6 picks

Type