Add dark theme code blocks

2 files changed, 25 insertions, 2 deletions

diff --git a/src/css/design.scss b/src/css/design.scss
index a535536..10086ce 100755
--- a/src/css/design.scss
+++ b/src/css/design.scss
@@ -186,8 +186,22 @@ code {
   border-radius: 8px;
   padding: 0 5px;
 
-  color: #c22222;
-  background: #FFF;
+  @mixin lightMode {
+    color: #c22222;
+    background: #FFF;
+  }
+  @mixin darkMode {
+    color: red;
+    background: black;
+  }
+
+  @media (prefers-color-scheme: dark) { @include darkMode; }
+  @media (prefers-color-scheme: light) { @include lightMode; }
+
+  &.light { @include lightMode; }
+  &.dark { @include darkMode; }
+
+
 }
 table, th, td {
   padding: 7px 13px;
diff --git a/src/js/theme.js b/src/js/theme.js
index 4ac40ea..8239c69 100644
--- a/src/js/theme.js
+++ b/src/js/theme.js
@@ -13,6 +13,7 @@ window.addEventListener('DOMContentLoaded', () => {
   const links = document.querySelectorAll('a');
   const likes = document.querySelectorAll('.likes');
   const tables = document.querySelectorAll('table');
+  const codes = document.querySelectorAll('p code');
 
   if (storageTheme === 'dark' || storageTheme === 'light') {
     const theme = storageTheme;
@@ -36,6 +37,9 @@ window.addEventListener('DOMContentLoaded', () => {
     for (let table of tables) {
       table.classList.add(theme);
     }
+    for (let code of codes) {
+      code.classList.add(theme);
+    }
 
     for (const article of document.querySelectorAll('article')) {
       article.classList.add(theme);
@@ -85,6 +89,11 @@ window.addEventListener('DOMContentLoaded', () => {
         table.classList.add(theme);
       }
     }
+    for (let code of codes) {
+      if (!code.classList.replace(...arg)) {
+        code.classList.add(theme);
+      }
+    }
     for (let like of likes) {
       if (!like.classList.replace(...arg)) {
         like.classList.add(theme);