Overriding CSS¶
If you need to further customize the theme, you can override the styles too. In fact, Sphinx comes with a built-in feature just for that.
In order to add your custom styles, put them into a
CSS file in _static directory and then add it to
the html_css_files in your conf.py:
html_css_files = [
"stylesnscripts/mewo.css"
]
Applying styles to Dark Mode¶
Your rules will apply to both light and dark theme,
but you’ll often want to target dark one
specifically. In order to do this, prefix your rules
with :root[data-color-scheme="dark"] or put your
variables in it:
1:root[data-color-scheme="dark"] {
2 --mcl-text-color: var(--mcl-text-color-inverse);
3 --mcl-text-color-alt: var(--mcl-text-color-inverse-alt);
4 --mcl-text-color-inverse: hwb(0 84% 16%);
5 --mcl-text-color-inverse-alt: var(--mcl-text-color-inverse);
CSS Variables¶
The theme includes plenty of elements that sometimes use same colors. In order to change their appearance quickly, CSS variables can be used for convenience.
With them, you can easily change the font stack, look and feel of sidebar, top navigation and other aspects of the theme.
Below is a reference of variables you can override in your custom CSS for customization purposes:
1:root {
2 /* # Typography */
3 /* Looking for fonts? They're set in webfonts.html! */
4 --mcl-text-color: hwb(0 0% 100%);
5 --mcl-text-color-alt: hwb(0 0% 100% / 0.85);
6 --mcl-text-color-inverse: hwb(0 100% 0%);
7 --mcl-text-color-inverse-alt: hwb(0 75% 25%);
8
9 --mcl-link-color: #00E;
10 --mcl-link-visited-color: #551A8B;
11
12 --mcl-heading-border: 1px solid hwb(210 64% 31%);
13 --mcl-heading-border-color: hwb(210 64% 31%);
14
15 --mcl-heading-link-color: hwb(0 0% 100% / 0.5);
16 --mcl-heading-link-active-color: hwb(0 0% 100%);
17
18 /* # Web Page Backgrounds */
19 /* Match those against your bg-header.png */
20 --mcl-header-trispective-top: #296820; /*< Triangles on right top side of nav buttons and searchbar */
21 --mcl-header-trispective-bottom: #5A3C25; /*< Triangle on right top side of document */
22 --mcl-header-bg: url("imagery/bg-header.png");
23
24 --mcl-body-bg: url("imagery/bg-body.png");
25 --mcl-body-bg-fallback: #303030;
26 --mcl-bg-sizes: 234px, 468px;
27
28 --mcl-mobile-top-nav-btn-filter: none;
29 --mcl-mobile-nav-bg: hwb(0 0% 100% / .7);
30
31 /* # Document Colors */
32 --mcl-document-bg: hwb(200 90% 4.3%);
33 --mcl-document-top-bg: hwb(200 71% 24%);
34 --mcl-document-side-shadow: hwb(0 0% 100% / 0.26);
35
36 /* # Blocks */
37 --mcl-block-bg: hwb(200 96% 2%);
38 --mcl-block-border: 2px solid var(--mcl-block-border-color);
39 --mcl-block-border-color: hwb(0 55% 45%);
40}
Tip
This block only lists some of the most important variables.
Please refer to configuration manuals of specific
things, use your browser’s DevTools or read the
source code (mcl_conf.css and mcl_conf_dark.css)
to discover even more variables you can use.
Good luck!