CSS Modules

A CSS module is a pure style override — theming, restyling, or a dark mode for a site. It uses the same module.json manifest as a JS module, but the substance is the stylesheet.

File layout

my-theme/
├── module.json    # required
├── main.js        # required — can be a near-empty stub
├── style.css      # the actual styles
└── icon.png       # optional

A main.js is still required

Even a pure CSS module needs a main.js (it can be a minimal stub). Set runAt to DOCUMENT_START so your styles apply as early as possible and avoid a flash of unstyled content.

module.json

{
  "id": "dark-reader-lite",
  "name": "Dark Reader Lite",
  "description": "A simple dark theme",
  "category": "THEME",
  "runAt": "DOCUMENT_START",
  "urlMatches": [
    { "pattern": "*://news.ycombinator.com/*" }
  ],
  "permissions": ["CSS_INJECT"]
}

Use category: "STYLE_MODIFIER" or "THEME". The market's hasCss flag must be true and a style.css must be present — the validator checks that these agree.

How CSS is injected

When a module has CSS (cssCode / style.css), it is injected as a <style id="ext-module-<id>"> element before the JS runs. Your main.js can still manipulate the DOM if needed.

Example style.css

:root {
  color-scheme: dark;
}
body {
  background: #111 !important;
  color: #ddd !important;
}
a {
  color: #60a5fa !important;
}

See the built-in web-tint module under modules/ for a working DOCUMENT_START style module.