e9899d2e6d
Some checks failed
Android CI Build / check (push) Has been cancelled
Android CI Build / package-apks (push) Has been cancelled
Docs Deploy / build (push) Has been cancelled
Module Market Check / Validate modules/ (push) Has been cancelled
Module Market Publish / Generate submissions.json (push) Has been cancelled
Docs Deploy / deploy (push) Has been cancelled
- Package rename com.webtoapp -> br.com.drukstech.codeapp - Product rename WebToApp/web-to-app -> DruksCode/drukscode - Design system Wta* -> Dkc* - applicationId br.com.drukstech.codeapp (.play for gplay flavor) - rootProject.name DruksCode - Fresh git history (upstream kept as remote for sync)
57 lines
1.6 KiB
Markdown
57 lines
1.6 KiB
Markdown
# 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](/extensions/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
|
|
```
|
|
|
|
::: info 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`
|
|
|
|
```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`
|
|
|
|
```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/`](https://github.com/shiaho777/web-to-app/tree/main/modules) for a working `DOCUMENT_START` style module.
|