Add dark theme

2 files changed, 85 insertions, 3 deletions

diff --git a/_includes/navigation_buttons.liquid b/_includes/navigation_buttons.liquid
index 5ac3719..adfed25 100644
--- a/_includes/navigation_buttons.liquid
+++ b/_includes/navigation_buttons.liquid
@@ -2,7 +2,7 @@
     <div class="column">
 	<div class="navigation-element">
 	    {% if page.next %}
-		<a class="button is-info" rel="next" href="{{ page.next.url | relative_url }}">
+		<a class="button is-info has-text-white" rel="next" href="{{ page.next.url | relative_url }}">
 		    {{ site.data[site.active_lang].strings.post.next }}
 		</a>
 	    {% endif %}
@@ -11,7 +11,7 @@
     <div class="column is-offset-9">
 	<div class="navigation-element end-justified">
 	    {% if page.previous %}
-		<a class="button is-info" rel="prev" href="{{ page.previous.url | relative_url }}">
+		<a class="button is-info has-text-white" rel="prev" href="{{ page.previous.url | relative_url }}">
 		    {{ site.data[site.active_lang].strings.post.previous }}
 		</a>
 	    {% endif %}
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 8897de9..a7c9f07 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -240,6 +240,87 @@
    margin-top: .7em;
    line-height: 1em;
    } */
+@media(prefers-color-scheme: dark) {
+    .content {
+	border: 1px solid #5e5c64;
+	background: black;
+    }
+
+    .sidebar-element {
+	border-bottom: 1px solid #fcf6f6;
+    }
+
+    .sidebar {    
+	border: 1px solid #5e5c64;
+	border-radius: 1px;
+	background: black;
+	color: white;
+	justify-content: space-between;
+    }
+
+    .date {
+	color: #f6f5f4;
+    }
+
+    .sidebar a {
+	color: #f6f5f4;
+    }
+
+    .sidebar a:hover {
+	color: #1c71d8;
+    }
+
+    .banner {
+	color: #ffffff !important;
+    }
+
+    .post-summary {
+	border-bottom: solid 1px;
+	color: #1760cd;
+    }
+
+    :root {
+	--bulma-primary-h: 219deg;
+	--bulma-primary-l: 50%;
+	--bulma-info-h: 253deg;
+	--bulma-info-s: 79%;
+	--bulma-info-l: 56%;
+    }
+
+    html {
+	background: #1f1e24;
+    }
+
+    p {
+	color: #fcf6f6;
+	font-size: 1.5rem;
+    }
+
+    a {
+	color: #2685e6;
+    }
+
+    h1 {
+	color: #3c8aff !important;
+    }
+
+    h2 {
+	color: #3833d4 !important;
+    }
+
+    strong {
+	color: #3833d4;
+    }
+
+    .footer p {
+	color: white;
+    }
+
+    .footer a {
+	color: #3833d4;
+    }
+}
+
 @media(prefers-color-scheme: light) {
     .content {
 	border: 1px solid #dadff1;
@@ -283,6 +364,7 @@
 	--bulma-primary-h: 357deg;
 	--bulma-primary-s: 84%;
 	--bulma-primary-l: 56%;
+	--bulma-info-h: 5deg;
     }
 
     html {
@@ -291,7 +373,7 @@
 
     p {
 	color: #241f31;
-	font-size: 1.3rem;
+	font-size: 1.5rem;
     }
 
     a {