stylelint-root-colors
v2.0.2
Published
It is recommended to use `color` and `background-color` together on the root element
Maintainers
saekitominagaReadme
stylelint-root-colors
Summary
It is recommended to use color and background-color together on the root element.
Typically, the term root element refers to the <html> element. However, the CSS specification states that It is recommended that authors of HTML documents specify the canvas background using the BODY element rather than the HTML element. Therefore, this plugin performs linting on the <body> element by default.
/* 🆖 Do not specify only either `color` or `background-color` in the root element */
body {
color: #000;
}
body,
.foo {
background-color: #fff;
}
/* 🆗 It is good to specify both `color` and `background-color` */
body {
background-color: #fff;
color: #000;
}
/* 🆗 You may use the `background` short hand */
body {
background: #fff;
color: #000;
}
/* 🆗 The `color` and `background-color` are not required, but can be overridden with the `required` option */
body {
}
/* 🆗 Except in the root element, only either `color` or `background-color` may be specified */
.foo {
color: #000;
}Why?
The text and background colors in browsers have long been customizable by users.
▼ Internet Explorer 3 (1996) General Settings
The following screenshot shows a user-defined dark mode configuration in Firefox's Manage Colors settings, where the text color is set to white and the background color is set to black.
▼ Firefox 130 (2024) Colors Settings
And around 2024, browsers began implementing forced dark mode.
▼ iOS Vivaldi 7.7 (2025) Appearance & Theme Settings
In this case, if only either color or background-color is specified in the root element through producer stylesheets, the text will be unreadable in some cases.
The following screenshot shows a web page with body { color: black } displayed after setting iOS's system appearance to Dark and enabling Vivaldi's Force a dark theme on all websites.
▼ iOS Vivaldi 7.7 (2025) Rendering
See also F24 in Techniques for WCAG 2.2.
Usage
/** @type {import('stylelint').Config} */
export default {
plugins: ['stylelint-root-colors'],
rules: {
'plugin/root-colors': [
true,
{
root: ['#root'],
required: true,
},
],
},
};Rule options
| name | type | default | description |
| ---------- | -------------------- | ---------- | ------------------------------------------------- |
| root | string \| string[] | ['body'] | Specifies the selector of the root element |
| required | boolean | false | Make both color and background-color required |
* Note that setting required: true will considered problem when the code is divided into multiple declaration blocks as shown below.
body {
background-color: #fff;
color: #000;
}
.any-selector {
}
body /* considered problem */ {
line-height: 1.8;
}