Extremely minimal stylesheet/setup for Web Extensions’ options pages (also dark mode)
npm install webext-base-css[badge-gzip]: https://img.badgesize.io/fregante/webext-base-css/master/webext-base.css.svg?compression=gzip&label=gzipped
[link-npm]: https://www.npmjs.com/package/webext-base-css
> Extremely minimal "native" stylesheet/setup for Web Extensions’ options pages (also dark mode)
It's meant to look as _native_ as possible, _invisible_. webext-base-css is what browsers should offer by default.
Look at the demo options.html for the suggested markup (it's basic and not really enforced.)
| Demo: Chrome with light theme | Firefox with dark theme |
| --- | --- |
| !white | !black |
Download the stylesheet manually or use npm:
``sh`
npm install webext-base-css
`html`
And in your manifest.json:
`json`
{
"options_ui": {
"page": "options.html",
}
}
💡 Tip: Also use webext-options-sync to manage and autosave your extension's options.
Depending on how your bundler is configured, you might be able to use one of these to import the module directly from node_modules. If you have issues or have a better solution, please send a PR or open an issue.
`html`
`js`
// From options.js
import 'webext-base-css';
`css`
/ From options.css or .scss /
/ Pick one, it depends on your bundler/config /
@import 'webext-base-css';
@import '~webext-base-css';
@import '~webext-base-css/webext-base.css';
@import 'npm:webext-base-css'; / Parcel /
@use 'webext-base-css';
Here's a minimal but full options.html example page:
`html`
There are some extra classes you can use:
- .text-monospace ideal for for and