ZdS Dark Mode

firefox-stylus.user.css

/* ==UserStyle==
@name           ZdS dark mode
@namespace      zestedesavoir.com
@description    Adapte Zeste de Savoir au mode sombre automatiquement
@version        1.0.1
@author         Corentin Hatte (https://www.github.com/viki53)
@homepageURL    https://gist.github.com/viki53/6ca0ba05b5d1b903eae959f99eb24b1e
@updateURL      https://gist.github.com/viki53/6ca0ba05b5d1b903eae959f99eb24b1e/raw/firefox-stylus.user.css
@preprocessor   default
==/UserStyle== */

@-moz-document domain("zestedesavoir.com") {
	@media (prefers-color-scheme: dark) {
		.flexpage .flexpage-header {
			background-color: #063d56;
			border-bottom-color: #000;
		}

		.header-container .sub-header {
			background-color: #063d56;
			color: #fff;
		}
		.breadcrumb {
			&::after {
				background-image: none;
			}
			ol li a {
				color: rgb(245,247,250);
			}
		}
		.search .search-more {
			background-color: #0d6791;
		}

		.page-container .main-container {
			background-color: #101010;
		}

		.main .content-container h1,
		.main .content-container h2 {
			color: #0d6791;

			&.ico-after::after {
				filter: brightness(1.6);
			}
		}

		.content-item {
			background-color: #000;
			border-color: #404040;

			& .content-info header {
				& .content-title a {
					color: #cecece;
				}
				& .content-description a {
					color: #cecece;
				}
			}
			.content-tags li a {
				background-color: #202020;
				color: #cecece;
			}
		}

		.content-container .btn-grey:not(.link),
		.modals-container .btn-grey:not(.link) {
			background-color: #000;
			color: #cecece;
		}

		.main .sidebar {
			background-color: #202020;
			color: #cecece;

			& ol li a,
			& ol li button,
			& ol li.inactive > em,
			& ol li.inactive > span,
			& ul li a,
			& ul li button,
			& ul li.inactive > em,
			& ul li.inactive > span {
				background-color: #252525;
			}

			& ol li a:focus,
			& ol li a:hover,
			& ol li button:focus,
			& ol li button:hover,
			& ol li.inactive > em:focus,
			& ol li.inactive > em:hover,
			& ol li.inactive > span:focus,
			& ol li.inactive > span:hover,
			& ul li a:focus,
			& ul li a:hover,
			& ul li button:focus,
			& ul li button:hover,
			& ul li.inactive > em:focus,
			& ul li.inactive > em:hover,
			& ul li.inactive > span:focus,
			& ul li.inactive > span:hover {
				background-color: #353535;
			}

			& ol li a:focus .ico-after.action-hover, 
			& ol li button:focus .ico-after.action-hover, 
			& ol li:not(.inactive):hover .ico-after.action-hover, 
			& ul li a:focus .ico-after.action-hover, 
			& ul li button:focus .ico-after.action-hover, 
			& ul li:not(.inactive):hover .ico-after.action-hover {
				background-color: #252525;
			}
		}

		.topic-message .message {
			background-color: #202020;
			border-color: #000;

			& header ul.message-metadata li a.username {
				color: #0d6791;
			}
		}

		@media screen and (min-width: 1024px) {
			.topic-message .message {
				&::before {
					background-color: #000;
				}
				&::after {
					background-color: #202020;
				}
			}
		}

		.topic-message .user .avatar-link,
		.topic-message .user .avatar-link .avatar,
		.topic-message .user .user-metadata a {
			background-color: #202020;
			border-color: #000;
		}

		.main .content-container .article-content,
		.main .content-container .message-content {
			color: #cecece;
		}

		.markdown-help {
			background-color: #303030;
		}
		
		.topic-message .message .message-content textarea {
			color: #fff;
		}
	}
}

safari.user.css

/* ==UserStyle==
@name           ZdS dark mode
@namespace      zestedesavoir.com
@description    Adapte Zeste de Savoir au mode sombre automatiquement
@match          https://*.zestedesavoir.com/*
@version        1.0.1
@author         Corentin Hatte (https://www.github.com/viki53)
@homepageURL    https://gist.github.com/viki53/6ca0ba05b5d1b903eae959f99eb24b1e
@updateURL      https://gist.github.com/viki53/6ca0ba05b5d1b903eae959f99eb24b1e/raw/safari.user.css
==/UserStyle== */

@media (prefers-color-scheme: dark) {
	.flexpage .flexpage-header {
		background-color: #063d56;
		border-bottom-color: #000;
	}

	.header-container .sub-header {
		background-color: #063d56;
		color: #fff;
	}
	.breadcrumb {
		&::after {
			background-image: none;
		}
		ol li a {
			color: rgb(245,247,250);
		}
	}
	.search .search-more {
		background-color: #0d6791;
	}

	.page-container .main-container {
		background-color: #101010;
	}

	.main .content-container h1,
	.main .content-container h2 {
		color: #0d6791;

		&.ico-after::after {
			filter: brightness(1.6);
		}
	}

	.content-item {
		background-color: #000;
		border-color: #404040;

		& .content-info header {
			& .content-title a {
				color: #cecece;
			}
			& .content-description a {
				color: #cecece;
			}
		}
		.content-tags li a {
			background-color: #202020;
			color: #cecece;
		}
	}

	.content-container .btn-grey:not(.link),
	.modals-container .btn-grey:not(.link) {
		background-color: #000;
		color: #cecece;
	}

	.main .sidebar {
		background-color: #202020;
		color: #cecece;

		& ol li a,
		& ol li button,
		& ol li.inactive > em,
		& ol li.inactive > span,
		& ul li a,
		& ul li button,
		& ul li.inactive > em,
		& ul li.inactive > span {
			background-color: #252525;
		}

		& ol li a:focus,
		& ol li a:hover,
		& ol li button:focus,
		& ol li button:hover,
		& ol li.inactive > em:focus,
		& ol li.inactive > em:hover,
		& ol li.inactive > span:focus,
		& ol li.inactive > span:hover,
		& ul li a:focus,
		& ul li a:hover,
		& ul li button:focus,
		& ul li button:hover,
		& ul li.inactive > em:focus,
		& ul li.inactive > em:hover,
		& ul li.inactive > span:focus,
		& ul li.inactive > span:hover {
			background-color: #353535;
		}

		& ol li a:focus .ico-after.action-hover, 
		& ol li button:focus .ico-after.action-hover, 
		& ol li:not(.inactive):hover .ico-after.action-hover, 
		& ul li a:focus .ico-after.action-hover, 
		& ul li button:focus .ico-after.action-hover, 
		& ul li:not(.inactive):hover .ico-after.action-hover {
			background-color: #252525;
		}
	}

	.topic-message .message {
		background-color: #202020;
		border-color: #000;

		& header ul.message-metadata li a.username {
			color: #0d6791;
		}
	}

	@media screen and (min-width: 1024px) {
		.topic-message .message {
			&::before {
				background-color: #000;
			}
			&::after {
				background-color: #202020;
			}
		}
	}

	.topic-message .user .avatar-link,
	.topic-message .user .avatar-link .avatar,
	.topic-message .user .user-metadata a {
		background-color: #202020;
		border-color: #000;
	}

	.main .content-container .article-content,
	.main .content-container .message-content {
		color: #cecece;
	}

	.markdown-help {
		background-color: #303030;
	}

	.topic-message .message .message-content textarea {
		color: #fff;
	}
}