Add dark mode

[rubenwardy]

No description provided.

[Miniontoby]

I can help with this, I have done a lot of darkmode styling before

[Miniontoby]

I have worked on it, here below is the result

It is rn just a User Stylesheet for Stylus extension.
If you want to use this you should add this as an EXTRA stylesheet and without the @-moz-document domain("blog.minetest.net") {} things

Note: you need to add the 'data-theme' attribute to 'dark' at the html element (can be done using document.all[0].setAttribute('data-theme', 'dark') inside the console (f12 thing)). This is due to my own darkmode switcher which I written and can be found here (You can use the script tag with this script, but check the url so you know how to use it...)

User Stylesheet for Stylus Extension:

/* ==UserStyle==
@name           Minetest Blog Dark Mode
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Dark Mode
@author         Miniontoby
==/UserStyle== */

@-moz-document domain("blog.minetest.net") {
	:root {
		--a-font: var(--navbar-background);
		--a-hover: #004c70;
		--background-color: #fff;
		--button-background: #fff;
		--button-hover: #53ac56;
		--button-primary: var(--navbar-background);
		--button-primary-hover: #4fa452;
		--code-background: #f5f5f5;
		--code-font: #292929;
		--font: #4a4a4a;
		--footer-background: #292929;
		--grey-font: #7a7a7a;
		--grey-a-font: var(--a-font);
		--navbar-background: #53ac56;
		--navbar-font: #fff;
	}
	[data-theme="dark"] {
		--a-font: #433302;
		--a-hover: #004c70;
		--background-color: #9e9e9e;
		--button-background: #a9a9a9;
		--button-hover: #004c70;
		--button-primary: var(--navbar-background);
		--button-primary-hover: #607d8b;
		--code-background: #868686;
		--code-font: #0f0f0f;
		--font: #111111;
		--footer-background: #292929;
		--grey-font: #b5b5b5;
		--grey-a-font: #e3ad07;
		--navbar-background: #696969;
		--navbar-font: #fff;
	}
	
	html, body {
		background-color: var(--background-color);
		color: var(--font);
	}
	
	.navbar.is-primary {
		background-color: var(--navbar-background);
		color: var(--navbar-font);
	}
	
	.post .readmore {
    	background-image: linear-gradient(to bottom, rgba(255,255,255,0), var(--background-color));
	}
	
	a {
		color: var(--a-font);
	}
	
	a:hover {
		color: var(--a-hover);
	}
	
	.has-text-grey {
		color: var(--grey-font);
	}
	
	.has-text-grey a {
		color: var(--grey-a-font);
	}
	
	footer {
		background-color: var(--footer-background);
	}
	
	code {
		background-color: var(--code-background);
		color: var(--code-font);
	}
	
	.button {
		background-color: var(--button-background);
	}
	
	.button:hover, .button.is-hovered {
		color: var(--button-hover);
	}
	
	.button.is-primary {
		background-color: var(--button-primary);
	}
	
	.button.is-primary:hover, .button.is-primary.is-hovered {
		background-color: var(--button-primary-hover);
	}
}

[rubenwardy]

The latest version of Bulma has built in support for light/dark mode: https://bulma.io/documentation/features/themes/