adding dark mode option

holger1411 · Apr 20, 2023 · 1e099c2 · 1e099c2 · vercel · Apr 20, 2023
1 parent d9397ad
commit 1e099c2
Show file tree

Hide file tree

Showing 10 changed files with 13 additions and 10 deletions.
diff --git a/src/_data/global.json b/src/_data/global.json
@@ -0,0 +1,3 @@
+{
+  "colorMode": "light"
+}
diff --git a/src/_includes/layouts/blank.njk b/src/_includes/layouts/blank.njk
@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="h-100" lang="{{ metadata.language }}">
+<html class="h-100" lang="{{ metadata.language }}" data-bs-theme="{{ global.colorMode }}">
 
   <head>
     {% include 'snippets/head.njk' %}

diff --git a/src/_includes/layouts/blog.njk b/src/_includes/layouts/blog.njk
@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="h-100" lang="{{ metadata.language }}">
+<html class="h-100" lang="{{ metadata.language }}" data-bs-theme="{{ global.colorMode }}">
 
   <head>
     {% include 'snippets/head.njk' %}

diff --git a/src/_includes/layouts/code.njk b/src/_includes/layouts/code.njk
@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="h-100" lang="{{ metadata.language }}">
+<html class="h-100" lang="{{ metadata.language }}" data-bs-theme="{{ global.colorMode }}">
 
   <head>
     {% include 'snippets/head.njk' %}

diff --git a/src/_includes/layouts/default.njk b/src/_includes/layouts/default.njk
@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="h-100" lang="{{ metadata.language }}">
+<html class="h-100" lang="{{ metadata.language }}" data-bs-theme="{{ global.colorMode }}">
 
   <head>
     {% include 'snippets/head.njk' %}

diff --git a/src/_includes/layouts/post.njk b/src/_includes/layouts/post.njk
@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="h-100" lang="{{ metadata.language }}">
+<html class="h-100" lang="{{ metadata.language }}" data-bs-theme="{{ global.colorMode }}">
 
   <head>
     {% include 'snippets/head.njk' %}

diff --git a/src/_includes/snippets/blogsidebar.njk b/src/_includes/snippets/blogsidebar.njk
@@ -1,4 +1,4 @@
-<div class="bg-light p-4 rounded">
+<div class="p-4">
   <h3>Sidebar</h3>
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
 </div>

diff --git a/src/_includes/snippets/postloop.njk b/src/_includes/snippets/postloop.njk
@@ -2,7 +2,7 @@
   <div class="col-12">
     {%- for post in posts %}
       <div class="py-5 border-bottom">
-        <a href="{{ post.url | url }}" class="text-decoration-none text-dark"><h2 class="display-4">{{ post.data.title}}</h2></a>
+        <a href="{{ post.url | url }}"><h2 class="display-4">{{ post.data.title}}</h2></a>
         <p>Published
           <time datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
         </p>

diff --git a/src/_includes/snippets/tagslist.njk b/src/_includes/snippets/tagslist.njk
@@ -1,7 +1,7 @@
 {% for tag in collections.tagList %}
   {% set tagUrl %}/tags/{{ tag.tagName | slug }}/{% endset %}
-  <a href="{{ '/tags/' | url }}{{ tag.tagName | slug }}" class="btn btn-outline-dark btn-sm me-2">{{ tag.tagName }}
-    <span class="ms-1 badge bg-dark">
+  <a href="{{ '/tags/' | url }}{{ tag.tagName | slug }}" class="btn btn-outline-secondary btn-sm me-2">{{ tag.tagName }}
+    <span class="ms-1 badge bg-primary">
     {{ tag.tagCount }}
     </span>
   </a>

diff --git a/src/index.njk b/src/index.njk
@@ -19,7 +19,7 @@ layout: layouts/blank.njk
   </div>
 </div>
 
-<div class="wrapper position-relative my-vh-5 bg-light">
+<div class="wrapper position-relative my-vh-5 bg-light text-dark">
   <div class="bg-white w-50 h-100 position-absolute d-none d-lg-block"></div>
   <div class="container position-relative py-vh-4">
     <div class="row justify-content-between d-flex align-items-stretch py-vh-2">