mindwi.se

dark-mode-css

Published on: 2020-10-10

With the rise of dark mode on all our devices, to have our eyes focused on their screen longer, I decided to integrate an easy CSS to auto-adapt the website to a dark version when the OS is set to Dark Mode.

For WikiMind, I tried to keep it simple.

Dark mode:

@media (prefers-color-scheme:dark)

{

body {background:#1c1c1c;}

body *{color:#eeeeee;}

a:link,a:visited{color:#eeeeee}

a:hover{color:#FFFFFF}

textarea,input{background-color:#1c1c1c;border:1px solid #333;}

}

Light mode:

@media (prefers-color-scheme:light)

{

body {background:#FFFFFF;}

body *{color:#000000;}

a:link,a:visited{color:#333}

a:hover{color:#b7b7b7}

}

Common styles unrelated to dark/light modes:

div.p{margin:0 auto;max-width:500px}

div.c a{text-decoration:underline}

div.c{text-align:justify}

div.f{text-align:center}

h1{font-size:1.6em;font-weight:400}

blockquote{font-family:monospace}

body{font-family:Helvetica;font-size:1em;line-height:1.5em;margin:20px}

input,textarea{font-size:1em}

a:link,a:visited,a:hover{text-decoration:none}

As you can see, it is fairly easy to integrate a dark mode on your website. Basically, invert the background and the text color and tweak around the link colors and the textarea/input elements.

Reference: Mozilla - prefers-color-scheme

2021-01-18 / archives / about