feature: add a light and dark themeHEADmaster

3 files changed, 173 insertions, 29 deletions

diff --git a/src/styles/index.css b/src/styles/index.css
index b5b923d..3856449 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,10 +1,54 @@
+:root {
+  --bg: transparent;
+  --color: black;
+  --link-color: darkviolet;
+  --image-border: rgba(0, 0, 0, 0.3);
+  --image-border-hover: rgba(0, 0, 0, 0.7);
+  --image-overlay: rgba(0, 0, 0, 0.7);
+  --theme-btn-bg: white;
+  --theme-btn-border: gray;
+  --theme-btn-color: black;
+  --input-focus-border: lightgray;
+  --action-button-border: #f0f0f0;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: rgba(13, 17, 23, 0.92);
+    --color: #e6edf3;
+    --link-color: #b083f0;
+    --image-border: rgba(255, 255, 255, 0.2);
+    --image-border-hover: rgba(255, 255, 255, 0.5);
+    --image-overlay: rgba(0, 0, 0, 0.85);
+    --theme-btn-bg: #21262d;
+    --theme-btn-border: #444c56;
+    --theme-btn-color: #e6edf3;
+    --input-focus-border: #586069;
+    --action-button-border: #30363d;
+  }
+}
+
+[data-theme="dark"] {
+  --bg: rgba(13, 17, 23, 0.92);
+  --color: #e6edf3;
+  --link-color: #b083f0;
+  --image-border: rgba(255, 255, 255, 0.2);
+  --image-border-hover: rgba(255, 255, 255, 0.5);
+  --image-overlay: rgba(0, 0, 0, 0.85);
+  --theme-btn-bg: #21262d;
+  --theme-btn-border: #444c56;
+  --theme-btn-color: #e6edf3;
+  --input-focus-border: #586069;
+  --action-button-border: #30363d;
+}
+
 body {
   width: 50vw;
   height: calc(100vh - 2rem);
   font-family: "Noto Sans", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 14px;
-  background-color: transparent;
-  color: black;
+  background-color: var(--bg);
+  color: var(--color);
   padding: 0;
   margin: auto;
 }
@@ -43,7 +87,7 @@ header > nav > ul > li {
 
 header > nav > ul a {
   text-decoration: none;
-  color: darkviolet;
+  color: var(--link-color);
   font-size: 1rem;
 	border-bottom: 1px solid transparent;
 }
@@ -72,13 +116,29 @@ p {
 }
 
 a {
-  color: darkviolet;
+  color: var(--link-color);
 }
 
 a:hover {
   opacity: 0.7;
 }
 
+/* Theme toggle button */
+#theme-toggle {
+  background: none;
+  border: 1px solid var(--theme-btn-border);
+  color: var(--link-color);
+  border-radius: 3px;
+  padding: 0.1rem 0.5rem;
+  cursor: pointer;
+  font-size: 0.85rem;
+  font-family: inherit;
+}
+
+#theme-toggle:hover {
+  opacity: 0.8;
+}
+
 /* Image styling */
 #image_container {
   display: flex;
@@ -100,7 +160,7 @@ a:hover {
 }
 
 #image_container .image_item:hover > img {
-	border: 2px solid rgba(0, 0, 0, 0.7);
+	border: 2px solid var(--image-border-hover);
 }
 
 .image_item > figcaption {
@@ -111,14 +171,14 @@ a:hover {
 .image_item > img {
   width: inherit;
   border-radius: 3px;
-	border: 2px solid rgba(0, 0, 0, 0.3);
+	border: 2px solid var(--image-border);
 }
 
 .image_item_expanded_container {
     position: fixed;
     width: 100vw;
     height: 100vh;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: var(--image-overlay);
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -140,11 +200,11 @@ input {
 }
 
 input:focus {
-    border: 1px solid lightgray;
+    border: 1px solid var(--input-focus-border);
 }
 
 .action_button {
-    border: 1px solid #f0f0f0;
+    border: 1px solid var(--action-button-border);
     border-radius: 2px;
     width: 108px;
     height: 2rem;
@@ -201,9 +261,9 @@ input:focus {
 	width: 6rem;
 	height: 2rem;
 	border-radius: 3px;
-	border: 1px solid gray;
-	color: black;
-	background-color: white;
+	border: 1px solid var(--theme-btn-border);
+	color: var(--theme-btn-color);
+	background-color: var(--theme-btn-bg);
 	cursor: pointer;
 	transition: opacity 100ms linear;
 }
diff --git a/src/styles/post.css b/src/styles/post.css
index 8ae1513..32e69c2 100644
--- a/src/styles/post.css
+++ b/src/styles/post.css
@@ -1,6 +1,29 @@
+:root {
+  --code-bg: #F5F0FF;
+  --code-border: #D5C8F0;
+  --code-inline-color: #D0372D;
+  --meta-color: #707183;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --code-bg: #1e1b2e;
+    --code-border: #3d3560;
+    --code-inline-color: #ff9090;
+    --meta-color: #8b929e;
+  }
+}
+
+[data-theme="dark"] {
+  --code-bg: #1e1b2e;
+  --code-border: #3d3560;
+  --code-inline-color: #ff9090;
+  --meta-color: #8b929e;
+}
+
 pre {
-    background-color: #FEFEFE;
-    border: 1px solid #D5D5D5;
+    background-color: var(--code-bg);
+    border: 1px solid var(--code-border);
     border-radius: 2px;
     padding: 1rem;
     overflow: auto;
@@ -8,7 +31,27 @@ pre {
 
 code {
     font-family: "Consolas" sans-serif;
-    color: #D0372D;
+    color: var(--code-inline-color);
+}
+
+/* Shiki dual-theme support */
+.astro-code, .astro-code span {
+    color: var(--shiki-light) !important;
+    background-color: var(--shiki-light-bg) !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .astro-code,
+  :root:not([data-theme="light"]) .astro-code span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+  }
+}
+
+[data-theme="dark"] .astro-code,
+[data-theme="dark"] .astro-code span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
 }
 
 .underline {
@@ -26,7 +69,7 @@ code {
     font-family: "Space Grotesk", sans-serif;
 }
 
-#content {
+.org-article-content {
     padding-bottom: 10vh;
 }
 
@@ -39,7 +82,7 @@ code {
 }
 
 .org-article-title > span {
-    color: #707183;
+    color: var(--meta-color);
 }
 
 #org-div-home-and-up {
diff --git a/src/styles/resume.css b/src/styles/resume.css
index a36fc0d..3cbf769 100644
--- a/src/styles/resume.css
+++ b/src/styles/resume.css
@@ -3,6 +3,47 @@
     src: url(/fonts/Ubuntu-M.ttf);
   }
 
+:root {
+  --resume-bg: white;
+  --resume-color: black;
+  --resume-link-color: #343231;
+  --resume-section-bg: #583759;
+  --resume-section-color: white;
+  --skills-bar-bg: white;
+  --skills-table-border: gray;
+  --skills-table-inner-border: lightgray;
+  --skills-table-th-color: #2E4C6D;
+  --experience-hover-color: #583759;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --resume-bg: #161b22;
+    --resume-color: #e6edf3;
+    --resume-link-color: #8b949e;
+    --resume-section-bg: #3d2b5e;
+    --resume-section-color: #e6edf3;
+    --skills-bar-bg: #21262d;
+    --skills-table-border: #444c56;
+    --skills-table-inner-border: #30363d;
+    --skills-table-th-color: #79b8ff;
+    --experience-hover-color: #b083f0;
+  }
+}
+
+[data-theme="dark"] {
+  --resume-bg: #161b22;
+  --resume-color: #e6edf3;
+  --resume-link-color: #8b949e;
+  --resume-section-bg: #3d2b5e;
+  --resume-section-color: #e6edf3;
+  --skills-bar-bg: #21262d;
+  --skills-table-border: #444c56;
+  --skills-table-inner-border: #30363d;
+  --skills-table-th-color: #79b8ff;
+  --experience-hover-color: #b083f0;
+}
+
 html {
     overflow-y: overlay;
     font-size: 16px;
@@ -23,8 +64,8 @@ header {
 #resume {
     position: relative;
     text-align: left;
-    background-color: white;
-    color: black;
+    background-color: var(--resume-bg);
+    color: var(--resume-color);
     font-family: 'Ubuntu', Tahoma, Geneva, Verdana, sans-serif;
     line-height: 1.325rem;
 }
@@ -35,7 +76,7 @@ header {
 }
 
 #resume a {
-    color: #343231;
+    color: var(--resume-link-color);
 }
 
 #resume_sidebar {
@@ -96,8 +137,8 @@ header {
     padding: 0;
     margin: 0;
     padding: 0.25rem;
-    background-color: #583759;
-    color: white;
+    background-color: var(--resume-section-bg);
+    color: var(--resume-section-color);
 }
 
 .resume_section_content {
@@ -111,7 +152,7 @@ header {
 }
 
 .experience-item:hover {
-    color: #583759;
+    color: var(--experience-hover-color);
 }
 
 .experience-item ul {
@@ -145,7 +186,7 @@ header {
 .skills_table {
     width: 100%;
     border-spacing: 0;
-    border: 1px solid gray;
+    border: 1px solid var(--skills-table-border);
     border-radius: 2px;
     margin-bottom: 2rem;
 }
@@ -155,11 +196,11 @@ header {
 }
 
 .skills_table th, .skills_table tr:not(:last-child) td {
-    border-bottom: 1px solid lightgray;
+    border-bottom: 1px solid var(--skills-table-inner-border);
 }
 
 .skills_table tr th {
-    color: #2E4C6D;
+    color: var(--skills-table-th-color);
 }
 
 .skills_table td, th {
@@ -183,9 +224,9 @@ header {
     position: relative;
     width: 100%;
     height: 1rem;
-    background-color: white;
+    background-color: var(--skills-bar-bg);
     border-radius: 3px;
-    border: 1px solid lightgray;
+    border: 1px solid var(--skills-table-inner-border);
 }
 
 .skills_section_bar_fill {
@@ -222,7 +263,7 @@ header {
 .skills_section_label {
     width: 100%;
     margin-top: 0.25rem;
-    color: black;
+    color: var(--resume-color);
     font-size: 1rem;
 }