Introduce dark mode

Author: TheoWinterhalter

README.md

@@ -28,7 +28,7 @@ but is entirely independent.
 
 - Now go to the repository "Settings" then click "Pages" on the left and select
   "Github Actions" instead of "Deploy from a branch" for "Source".
-  
+
   <img width="837" alt="Screenshot 2024-11-27 at 16 51 07" src="https://github.com/user-attachments/assets/7219187c-7370-42dd-a9cf-c7559072b42f">
 
   <img width="304" alt="Screenshot 2024-11-27 at 16 52 45" src="https://github.com/user-attachments/assets/9af6698f-2c47-422f-8dff-61ee3629089e">
@@ -82,10 +82,16 @@ We give the semantics of the various fields (all of whom are optional).
 - `pronouns`: A string to show your pronouns.
 
 - `footer`: Some data to put in the footer of the page. You can use it to put
-  some disclaimer, or maybe to advertise basicpage. ☺️
+  some disclaimer, or maybe to advertise `basicpage`. ☺️
   If nothing is provided, then the footer doesn't appear, and thus the
   horizontal that precedes is will not show either.
 
+- `disable-dark-mode`: A Boolean deciding whether the page automatically
+  switches to dark mode based on browser settings. It will load the `dark.css`
+  CSS file.
+  By default, this setting is `false`, meaning dark mode will automatically
+  activate.
+
 ### OpenGraph
 
 OpenGraph carries information that used by social media and messaging app to

pandoc/template.html4

@@ -35,6 +35,9 @@
   $for(css)$
   <link rel="stylesheet" href="$css$">
   $endfor$
+  $if(disable-dark-mode)$$else$
+  <link rel="stylesheet" href="dark.css">
+  $endif$
   $if(og-picture)$
   <meta property="og:image" content="$og-picture$">
   $endif$

src/index.md

@@ -10,6 +10,7 @@ clickable-email: false
 picture: img/profile.png
 picture-round: false
 side-by-side: true
+disable-dark-mode: false
 pronouns: They/Them
 og-picture: https://basicpage.github.io/img/profile.png
 orcid: 0000-0000-0000-0000
@@ -69,7 +70,7 @@ My workflow is usually to use <kbd>Ctrl</kbd> + <kbd>C</kbd> /
 ``` yaml {.paper}
 title: Yet another yaml parser 3
 authors: Templato Urnehm
-awards: 
+awards:
   - Yet another "Yet another" award
   - Never-ending Work Award
 venue: Proceedings of Nihilism

website/dark.css

@@ -0,0 +1,92 @@
+/*
+
+bg: #1c1d1f
+icons: #739fe7
+links: #d1beb3
+award-bg: #2e2813
+award: #cf9c10
+
+*/
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #424242;
+    color: #f4ebdb;
+  }
+
+  a {
+    color: #91c1ff;
+  }
+
+  div.tip {
+    border-left: 4px solid #45df45;
+    padding-left: 10px;
+  }
+
+  div.tip > div.title p {
+    color: #45df45;
+  }
+
+  div.important {
+    border-left: 4px solid rgb(192, 51, 228);
+  }
+
+  div.important > div.title p {
+    color: rgb(192, 51, 228);
+  }
+
+  div.warning {
+    border-left: 4px solid rgb(255, 203, 99);
+  }
+
+  div.warning > div.title p {
+    color: rgb(255, 203, 99);
+  }
+
+  div.caution {
+    border-left: 4px solid rgb(255, 104, 134);
+  }
+
+  div.caution > div.title p {
+    color: rgb(255, 104, 134);
+  }
+
+  div.note {
+    border-left: 4px solid #7799ff;
+  }
+
+  div.note > div.title p {
+    color: #7799ff;
+  }
+
+  pre {
+    background-color: #070707;
+  }
+
+  nav ul li a {
+    color: #d1beb3;
+    border-bottom-color: #d1beb3;
+  }
+
+  nav ul li a:hover {
+    color: #d1beb3;
+    border-bottom-color: #d1beb3;
+  }
+
+  table tr {
+    background-color: #414141;
+  }
+
+  table tr:nth-child(2n) {
+    background-color: #4e4e4e;
+  }
+
+  section.paper p {
+    color: rgb(189, 189, 189);
+  }
+
+  div.awards span {
+    background: #2e2813;
+    color: #cf9c10;
+  }
+}