Skip to content

Dark Mode support #943

@cara-tm

Description

@cara-tm

Is your feature request related to a problem?

Nope!

What is the feature?

Maybe it's the time to add a "Dark Mode" support into the Default theme?
Simply because it's a user choice, after all.

Default theme with Dark Mode support preview

Here is a simple way with few lines of CSS:

@media (prefers-color-scheme:dark) {
    html{background-color: #000}
    body{filter: invert(100%)}
    header *,header a,footer *,footer a{filter: invert(0%)}
    img{filter: invert(100%)}
}

Note: changing heading links color, gives a little darker white on "Dark Mode" but keeps a good contrast ratio on "Light Mode":

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: #333;
}

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions