41 lines
No EOL
971 B
Markdown
41 lines
No EOL
971 B
Markdown
---
|
|
title: "Updated the Css Again (prefers-color-scheme)"
|
|
date: 2023-04-05T16:58:44+03:00
|
|
draft: false
|
|
tags: ['updates']
|
|
---
|
|
|
|
I actually updated the css once more.
|
|
|
|
If you're using a dark theme in your browser, the website will follow suit and change to darker colors.
|
|
|
|
I did this by setting the light theme to be by default for more readability:
|
|
|
|
```css
|
|
:root {
|
|
--bg: #fafafa;
|
|
--fg: #2f343f;
|
|
--links: #4084d6;
|
|
--muted_text: rgb(93, 93, 99);
|
|
}
|
|
```
|
|
and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn't know this stuff existed, thought webshits just use java script for everything, but I guess I'm wrong.
|
|
|
|
```css
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #141414;
|
|
--fg: rgb(232, 228, 228);
|
|
--links: #5da0f2;
|
|
--muted_text: rgb(179, 182, 186);
|
|
}
|
|
}
|
|
```
|
|
And this is how CSS variables are used:
|
|
```css
|
|
body {
|
|
font-family: sans-serif;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
}
|
|
``` |