A dark theme for learncpp.com, as a Chrome extension (Manifest V3).
The tutorials are long and the site is bright. This themes the whole thing — content, chrome, tables, forms, the comment section, the code samples — behind a one-click toggle.
Before
Not on the Chrome Web Store — load it unpacked:
- Clone or download this repo
- Open
chrome://extensions - Turn on Developer mode (top right)
- Load unpacked → select the folder
- Visit any page on learncpp.com
Click the toolbar icon to toggle it off and on. The setting syncs across your Chrome profiles.
Five files, no build step, no dependencies.
| File | Role |
|---|---|
manifest.json |
MV3 manifest. Matches *://*.learncpp.com/*, storage permission only |
dark.css |
The whole theme. Every rule scoped under html.lcd-dark |
content.js |
Adds/removes that one class |
popup.html / popup.js |
The toggle |
Two details worth calling out, because they're the parts that are easy to get wrong:
No white flash. The content script runs at document_start and adds lcd-dark
immediately — before reading storage — then reconciles with the stored setting. Waiting for
the async storage read first means a full white page render on every navigation.
The toggle is a class, not a stylesheet swap. dark.css is always injected; everything in
it is scoped under html.lcd-dark. Toggling adds or removes that class, and a
storage.onChanged listener applies it to open tabs live, with no reload.
Colours are CSS custom properties on html.lcd-dark — retheme it by editing the handful of
variables at the top of dark.css.
Ad iframes stay light. The page embeds Google AdSense frames from
googleads.g.doubleclick.net. A content script can only inject into frames matching its own
matches pattern, so a cross-origin ad frame is out of reach by design — the extension cannot
style what's inside it, and no CSS can. On a lesson page this shows up as a bright
"Discover more" panel in each sidebar.
The <iframe> element itself can be dimmed from outside (a filter on the element), which
takes the edge off without touching its contents. Not currently applied.
Styling is selector-based. It targets the site's current markup, so a redesign would need rules updated. The trade-off is deliberate: a generic inverting filter works everywhere and looks wrong everywhere, especially on syntax-highlighted code.
MIT — see LICENSE.
Not affiliated with learncpp.com. It restyles pages in your own browser and changes nothing on the site; the tutorials themselves are free and excellent, and worth supporting.