Made by@slashcloneTwo theme brand colors
@slashclone/two-theme-brand-colors
Find brand colors that work in both light and dark mode: for each hue, the shade with the best WCAG contrast against all your light and dark backgrounds at once, so a logo or accent can keep one color in both themes. Prints a table and saves the results as JSON.
SkillContentv0.1.0 (latest)
- Activity
- New: be the first to try it
- Installs
- 0 installs
- Likes
- 0 likes
- Clones
- 0 clones
- 1{
- 2 "name": "two-theme-brand-colors",
- 3 "owner": "slashclone",
- 4 "version": "0.1.0",
- 5 "type": "skill",
- 6 "description": "Find brand colors that work in both light and dark mode: for each hue, the shade with the best WCAG contrast against all your light and dark backgrounds at once, so a logo or accent can keep one color in both themes. Prints a table and saves the results as JSON.",
- 7 "category": "content",
- 8 "license": "MIT",
- 9 "compat": ["claude-code"],
- 10 "permissions": {
- 11 "shell": ["node scripts/two-theme-colors.mjs"],
- 12 "files": { "read": ["./examples/**", "./data/**"], "write": ["./out/brand-colors*"] }
- 13 },
- 14 "tests": {
- 15 "cases": [
- 16 {
- 17 "name": "finds a passing shade for every example hue on warm light and dark grounds",
- 18 "inputs": {},
- 19 "checks": [
- 20 {
- 21 "type": "command_exits_zero",
- 22 "command": "node scripts/two-theme-colors.mjs --light #F0EAE1,#FBF8F3 --dark #181512,#211D19 --hues examples/hues.csv --out out/brand-colors.json"
- 23 },
- 24 {
- 25 "type": "output_matches_schema",
- 26 "path": "out/brand-colors.json",
- 27 "schema": {
- 28 "type": "object",
- 29 "required": ["candidates", "passing", "min"],
- 30 "properties": {
- 31 "min": { "const": 3 },
- 32 "passing": { "const": 12 },
- 33 "candidates": { "type": "array", "minItems": 12, "maxItems": 12 }
- 34 }
- 35 }
- 36 }
- 37 ]
- 38 },
- 39 {
- 40 "name": "reports that nothing passes an impossible target",
- 41 "inputs": { "data/hues.csv": "name,hue,saturation\nMoss,92,0.45\n" },
- 42 "checks": [
- 43 {
- 44 "type": "command_exits_zero",
- 45 "command": "node scripts/two-theme-colors.mjs --light #FFFFFF --dark #000000 --min 7 --hues data/hues.csv --out out/brand-colors.json"
- 46 },
- 47 {
- 48 "type": "output_matches_schema",
- 49 "path": "out/brand-colors.json",
- 50 "schema": {
- 51 "type": "object",
- 52 "properties": { "passing": { "const": 0 }, "min": { "const": 7 } }
- 53 }
- 54 }
- 55 ]
- 56 }
- 57 ]
- 58 }
- 59}