---
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);
}
```