Building with the GitHub Copilot SDK, Part 6 – Styling with CSS Design Tokens and Themes
In my previous post, I pulled Outlook calendar data into Chad’s Copilot and added time-allocation metrics that show how much of your week is already committed. That was about making the app useful. This post is about making it look good.
You stare at this thing all day, so it better not just work — it should feel nice to look at too. Here’s how I added a full theming system without turning the codebase into a maintenance nightmare.
Why Bother with Theming?
If you are building a tool that developers will use every day, appearance matters more than you might think. A polished interface builds trust and reduces friction. And if you are going to support multiple themes, you need a system that won’t collapse under its own weight the moment you add a third color scheme.
The answer is design tokens.
CSS Variables Are the Foundation
Everything runs on design tokens now. No more hunting down random hex codes scattered across dozens of files. Instead, I use semantic variables like --theme-primary, --app-surface, and --app-background.
Flip the whole app’s personality by setting a data-theme attribute on <html>:
Glassmorphism for Depth
The Midnight and 80s Arcade themes get the full glass treatment: semi-transparent panels with a backdrop blur. This makes everything feel layered and floating instead of flat.
It’s a subtle effect, but it instantly makes the app feel more polished. The performance cost is minimal on current hardware, and the visual payoff is worth it.
Themes with Actual Personality
I didn’t stop at dark and light. I added four separate themes, each with its own colors, background images, and border treatments. This isn’t a half-baked color swap. Each theme feels like a different app.
- Midnight – A clean dark mode. This is the default and my daily driver.
- 80s Arcade – Neon overload with retro synthwave energy. Hot pink accents on deep purple.
- 90s Grunge – Earthy, textured, and raw. Warm browns and muted gold tones.
- Light – Clean and bright for those who prefer it. Teal accents on a white surface.
Light
Midnight
80s Arcade
90s Grunge
Making the AI Chat Readable
The chat window renders Markdown: code blocks, tables, lists, and everything else Copilot sends back. So I spent time on the .message-text styles to make sure all of that content looks good.
Inline code pops with a primary-color tint. Code blocks get monospace fonts with proper padding and borders. Tables are readable without feeling like a spreadsheet.
Here is a quick example:
.message-text code {
background-color: var(--app-surface);
padding: 2px 6px;
border-radius: 4px;
color: var(--theme-primary);
}I spent more time than I’d like to admit tweaking line-heights and shadows, but now it actually feels good to read long responses from Copilot.
How It All Stays Organized
An Angular ThemeService handles the heavy lifting. It watches user preferences, saves the selection to localStorage, and sets the data-theme attribute on the document root. Close the app and reopen it? Everything is exactly how you left it.
I kept the design tokens (colors, borders, background images) completely separate from the layout styles. This separation makes adding new themes simple and keeps the codebase from turning into spaghetti.
If you want to add a fifth theme, you just define a new set of CSS variable values under a new data-theme selector. No layout changes required.
Give It a Try
If you are on the latest build, flip through the themes and tell me which one is your favorite. I am partial to Midnight for daily use, but 80s Arcade hits different at 2 AM.
More polish is coming. Stay tuned.
Repo: https://github.com/chadmichel/chadscopilot
Tell me your favorite style by reaching out to me on X at @chadmichel.
