postcss-fomanticui-dark
v1.0.2
Published
FomanticUI dark theme generator using PostCSS
Readme
postcss-fomanticui-dark
PostCSS plugin that extracts FomanticUI's .inverted rules and turns these
inverted rules into overrides for the non-inverted base class names. The CSS
from this transform is meant to be conditionally loaded in addition to the base
FUI theme stylesheet.
How it works
The plugin walks the compiled FomanticUI CSS, finds every rule that references
an .inverted class, strips that class from the selector, discards all other
rules, and wraps the result inside a high-specificity scope selector.
Effectively, this applies the .ui.inverted.* styles to the .ui.* classes.
For example, source rules with inverted class:
.ui.button {
background: red;
&.inverted {
background: blue;
}
}Transformed inverted rules override the non-inverted class names:
html[data-theme="dark"]:not(#_),
html[data-theme="system"]:not(#_),
:host([data-theme="dark"]:not(#_)),
:host([data-theme="system"]:not(#_)) {
.ui.button {
background: blue;
}
}Set data-theme="dark" or data-theme="system" on <html> to control the
theme selection. You will also need to include the dark theme CSS alongside the
base FUI theme CSS with <link media="(prefers-color-scheme: dark)"> to
conditionally load the dark theme styles when the browser/system prefers dark
color schemes.
Usage
Webpack (two outputs)
FomanticUI is often built via less-loader. You need two CSS outputs, the
base FUI theme CSS and the dark theme overlay CSS file. Configuring Webpack can
be pretty complicated, but a general example is:
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import postcssFomanticDark from "postcss-fomanticui-dark";
const shared = {
entry: "./src/semantic.less",
module: {
rules: [
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
},
],
},
};
module.exports = [
// Base FUI theme
{
...shared,
plugins: [new MiniCssExtractPlugin({ filename: "semantic.css" })],
},
// Dark FUI theme overlay
{
...shared,
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [postcssFomanticDark()],
},
},
},
"less-loader",
],
},
],
},
plugins: [new MiniCssExtractPlugin({ filename: "semantic-dark.css" })],
},
];Other tools
Any tool that accepts PostCSS plugins can use postcss-fomanticui-dark.
Add it to your PostCSS config file:
module.exports = {
plugins: [require("postcss-fomanticui-dark")()],
};Fixes
This plugins transform respects the underlying theme and does not try to create a dark theme that operates any different than all elements using inverted styles. As such, there might be some visual gaps still if the underlying theme does not set inverted styles on all elements.
Some fixes are required for the default FUI theme as of 2.9.4:
- Basic segments have non-transparent background color
- Inputs have no inverted styles, only transparent input
- Form fields use light theme colors for inverted elements
- And in addition, you probably want to set the body background/color
Options
| Option | Type | Default | Description |
| --------- | --------- | ------- | --------------------------------------------------- |
| verbose | boolean | false | Annotate each output rule with its source selector. |