[{"data":1,"prerenderedAt":225},["ShallowReactive",2],{"project-artlab-theme":3},{"id":4,"title":5,"description":6,"extension":7,"favorite":8,"icon":9,"meta":10,"publishedAt":215,"readingTime":162,"shortDescription":216,"slug":217,"status":218,"stem":219,"tags":220,"type":223,"__hash__":224},"projects\u002Fprojects\u002Fartlab-theme.md","ArtLab Theme — Cross-Platform Design System","A cohesive, cross-platform theme ecosystem blending the clarity of Vitesse with the warm palettes of Catppuccin. Published on the VS Code Marketplace and ported to Home Assistant, Zed, and Ghostty.","md",false,"i-ph-palette-duotone",{"body":11},{"type":12,"value":13,"toc":205},"minimark",[14,23,45,48,53,64,76,78,82,87,90,94,101,105,115,119,130,132,136,143,190,193,195,201],[15,16,17,18,22],"p",{},"Design consistency across tools reduces cognitive load. ",[19,20,21],"strong",{},"ArtLab Theme"," is my answer to that principle — a unified color system that spans my entire development and home automation environment, from code editor to dashboard.",[15,24,25,33,34,39,40,44],{},[26,27,31],"a",{"href":28,"rel":29},"https:\u002F\u002Fgithub.com\u002FArthurDanjou\u002Ftheme-artlab",[30],"nofollow",[19,32,21],{}," is available on the ",[26,35,38],{"href":36,"rel":37},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=arthurdanjou.theme-artlab",[30],"VS Code Marketplace"," and as open-source on ",[26,41,43],{"href":28,"rel":42},[30],"GitHub"," under the MIT license.",[46,47],"hr",{},[49,50,52],"h2",{"id":51},"design-philosophy","Design Philosophy",[15,54,55,56,59,60,63],{},"The theme bridges two influences: the ",[19,57,58],{},"clean readability of Vitesse"," (by antfu) and the ",[19,61,62],{},"cozy, well-tested palettes of Catppuccin",". The result is a theme that is neither too cold nor too warm — optimized for extended coding sessions without eye fatigue.",[15,65,66,67,70,71,75],{},"Both light and dark variants are available with ",[19,68,69],{},"system auto-detection"," support via VS Code's ",[72,73,74],"code",{},"autoDetectColorScheme",".",[46,77],{},[49,79,81],{"id":80},"platform-coverage","Platform Coverage",[83,84,86],"h3",{"id":85},"vs-code","VS Code",[15,88,89],{},"Published on the Visual Studio Marketplace with full token coverage for TypeScript, Python, Markdown, JSON, YAML, and all major web languages. The theme ships with Monaspace (GitHub's custom font) as the recommended typeface, paired with Catppuccin file icons and Carbon product icons.",[83,91,93],{"id":92},"home-assistant","Home Assistant",[15,95,96,97,100],{},"A dedicated theme port (",[72,98,99],{},"artlab.yaml",") integrates with Home Assistant's theming engine. Used across all three ArtHome dashboards — Home, Map, and Kiosk — ensuring a seamless visual transition between code and home control interfaces.",[83,102,104],{"id":103},"zed","Zed",[15,106,107,108,111,112,75],{},"A native Zed port (",[72,109,110],{},"zed\u002Fartlab.json",") for the editor I use daily for scripting and remote development. Installed by copying to ",[72,113,114],{},"~\u002F.config\u002Fzed\u002Fthemes\u002F",[83,116,118],{"id":117},"ghostty","Ghostty",[15,120,121,122,125,126,129],{},"Terminal themes (",[72,123,124],{},"ghostty\u002Fartlab-dark"," and ",[72,127,128],{},"ghostty\u002Fartlab-light",") maintain the same color palette in the shell, providing a consistent visual experience from editor to terminal.",[46,131],{},[49,133,135],{"id":134},"technical-implementation","Technical Implementation",[15,137,138,139,142],{},"The theme is defined as a ",[19,140,141],{},"VS Code extension"," (yo code + TypeScript) with separate color definitions for light and dark variants. Each platform port maps the core semantic colors — base, surface, overlay, muted, text, and accent — to the platform's own theming tokens, ensuring the same visual hierarchy regardless of the target environment.",[144,145,150],"pre",{"className":146,"code":147,"language":148,"meta":149,"style":149},"language-jsonc shiki shiki-themes material-theme-lighter catppuccin-latte catppuccin-macchiato","\u002F\u002F Example: VS Code settings for auto-detection\n{\n  \"window.autoDetectColorScheme\": true,\n  \"workbench.preferredLightColorTheme\": \"ArtLab Light\",\n  \"workbench.preferredDarkColorTheme\": \"ArtLab Dark\",\n}\n","jsonc","",[72,151,152,160,166,172,178,184],{"__ignoreMap":149},[153,154,157],"span",{"class":155,"line":156},"line",1,[153,158,159],{},"\u002F\u002F Example: VS Code settings for auto-detection\n",[153,161,163],{"class":155,"line":162},2,[153,164,165],{},"{\n",[153,167,169],{"class":155,"line":168},3,[153,170,171],{},"  \"window.autoDetectColorScheme\": true,\n",[153,173,175],{"class":155,"line":174},4,[153,176,177],{},"  \"workbench.preferredLightColorTheme\": \"ArtLab Light\",\n",[153,179,181],{"class":155,"line":180},5,[153,182,183],{},"  \"workbench.preferredDarkColorTheme\": \"ArtLab Dark\",\n",[153,185,187],{"class":155,"line":186},6,[153,188,189],{},"}\n",[15,191,192],{},"The Home Assistant port adapts the Bubble card theme structure to ArtLab's palette, maintaining compatibility with custom cards like Bubble Card and Mushroom while preserving the overall color identity.",[46,194],{},[15,196,197],{},[198,199,200],"em",{},"ArtLab Theme demonstrates that visual consistency across a development ecosystem is achievable with a well-defined palette and per-platform adapters — no compromise on either aesthetics or readability.",[202,203,204],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":149,"searchDepth":162,"depth":162,"links":206},[207,208,214],{"id":51,"depth":162,"text":52},{"id":80,"depth":162,"text":81,"children":209},[210,211,212,213],{"id":85,"depth":168,"text":86},{"id":92,"depth":168,"text":93},{"id":103,"depth":168,"text":104},{"id":117,"depth":168,"text":118},{"id":134,"depth":162,"text":135},"2026-01-01","A cross-platform color theme for VS Code, Home Assistant, Zed, and Ghostty.","artlab-theme","Active","projects\u002Fartlab-theme",[221,86,93,104,118,222],"Theme","Design","Personal Project","ZEl2S-B4XaI3efKEiw0a-fjO37E4_PWhOqJAydSvnMw",1781553201959]