0Pricing
Browser Extensions Development (Chrome & Edge) · Lesson

Theming with CSS & Dark Mode Support

Style your popup and options pages consistently, support light and dark themes, and respect user preferences.

Theming with CSS & Dark Mode Support is a free Browser Extensions Development (Chrome & Edge) lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Browser Extensions Development (Chrome & Edge) learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Theming Matters

Your popup and options pages are small windows into your extension. Consistent, polished styling builds trust and makes the extension feel native to the browser.

Supporting dark mode respects users who set their system to a dark appearance.

Linking a Stylesheet

Keep styles in a separate CSS file and link it from your popup HTML for clean separation.

<head>
  <link rel="stylesheet" href="popup.css">
</head>

CSS Custom Properties

Define your color palette once with CSS variables. Then every component references the variable instead of a hard-coded color.

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --accent: #3367d6;
}

Applying the Variables

Use the variables across your layout so a single change updates the whole theme.

body {
  background: var(--bg);
  color: var(--text);
}
button {
  background: var(--accent);
}

Detecting System Dark Mode

The prefers-color-scheme media query tells you the user's system theme. Override your variables inside it.

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1e1e;
    --text: #f5f5f5;
  }
}

Sizing the Popup

Popups size themselves to their content. Set an explicit width so the layout is predictable and not too cramped.

body {
  width: 320px;
  margin: 0;
  font-family: system-ui, sans-serif;
}

A Manual Theme Toggle

Let users override the system theme by adding a class to the root element from JavaScript.

document.documentElement.classList.toggle('dark', isDark)

Styling the Manual Theme

Pair the toggle class with its own variable overrides, mirroring the media query.

.dark {
  --bg: #1e1e1e;
  --text: #f5f5f5;
}

Persisting the Choice

Save the user's theme preference with the storage API so it survives popup reopens and browser restarts.

chrome.storage.sync.set({ theme: 'dark' })

Reusing Styles Across Pages

Share one CSS file between your popup and options page to keep them visually consistent and avoid duplicating colors and spacing rules.

<link rel="stylesheet" href="../shared/theme.css">

Accessibility Considerations

Ensure enough contrast between text and background in both themes, and never rely on color alone to convey meaning. Test with browser dev tools' contrast checker.

Quick Check

Check your theming knowledge.

Recap

You learned to theme extension UI:

  • Centralize colors in CSS custom properties
  • Detect dark mode with prefers-color-scheme
  • Offer a manual toggle and persist it in storage
  • Share styles across popup and options pages
  • Keep contrast accessible

A polished, theme-aware UI makes your extension feel professional.

Frequently asked questions

Is the “Theming with CSS & Dark Mode Support” lesson free?

Yes — the full text of “Theming with CSS & Dark Mode Support” is free to read here on the web, and the Browser Extensions Development (Chrome & Edge) course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Browser Extensions Development (Chrome & Edge) course, upgrade to CoddyKit PRO.

What will I learn in “Theming with CSS & Dark Mode Support”?

Style your popup and options pages consistently, support light and dark themes, and respect user preferences. You practise Browser Extensions Development (Chrome & Edge) with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Browser Extensions Development (Chrome & Edge)?

No prior experience is required. Browser Extensions Development (Chrome & Edge) on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Theming with CSS & Dark Mode Support” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Browser Extensions Development (Chrome & Edge) lesson?

Yes. Every Browser Extensions Development (Chrome & Edge) lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Creating Interactive Popup UI
  2. Building an Options Page
  3. Communication Between UI Components
  4. Theming with CSS & Dark Mode Support
← Back to Browser Extensions Development (Chrome & Edge)