Auto-dark mode

kitswas · Dec 9, 2024 · a379367 · a379367
1 parent d423c0e
commit a379367
Showing 1 changed file with 108 additions and 24 deletions.
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -4,34 +4,118 @@
 @import "{{ site.theme }}";
 
 .project-icon {
-	box-shadow: 0px 0px 1rem 4px whitesmoke;
-	border-radius: 0.3rem;
-	display: inline-block;
-	opacity: 1;
-	vertical-align: middle;
+  box-shadow: 0px 0px 1rem 4px whitesmoke;
+  border-radius: 0.3rem;
+  display: inline-block;
+  opacity: 1;
+  vertical-align: middle;
 }
 
 .project-tagline {
-	display: inline-flex;
-	font-weight: 600;
+  display: inline-flex;
+  font-weight: 600;
 }
 
 header .btn {
-	color: rgba(white, 0.8);
-	font-weight: bold;
-	border-color: rgba(white, 0.6);
-	background-image: linear-gradient(
-		300deg,
-		hsla(198deg, 45%, 45%, 0.6) 0%,
-		hsla(186deg, 100%, 36%, 0.6) 20%,
-		hsla(174deg, 100%, 37%, 0.6) 40%,
-		hsla(151deg, 67%, 51%, 0.6) 60%,
-		hsla(89deg, 75%, 61%, 0.6) 80%,
-		hsla(55deg, 100%, 50%, 0.6) 100%
-	);// https://www.joshwcomeau.com/gradient-generator/
-}
-
-header .btn:hover{
-	color: rgba(white, 1.0);
-	box-shadow: 0px 0px 8px whitesmoke;
+  color: rgba(white, 0.8);
+  font-weight: bold;
+  border-color: rgba(white, 0.6);
+  background-image: linear-gradient(
+    300deg,
+    hsla(198deg, 45%, 45%, 0.6) 0%,
+    hsla(186deg, 100%, 36%, 0.6) 20%,
+    hsla(174deg, 100%, 37%, 0.6) 40%,
+    hsla(151deg, 67%, 51%, 0.6) 60%,
+    hsla(89deg, 75%, 61%, 0.6) 80%,
+    hsla(55deg, 100%, 50%, 0.6) 100%
+  ); // https://www.joshwcomeau.com/gradient-generator/
 }
+
+header .btn:hover {
+  color: rgba(white, 1);
+  box-shadow: 0px 0px 8px whitesmoke;
+}
+
+/**
+https://gist.github.com/Lachee/ed18217cb9a5e38040093192a38ae81d
+Auto dark theme for Github Pages, by Lachee.
+Put this exactly /assets/css/style.scss in your GitHub Pages root.
+*/
+
+$background: #fff;
+$background-dark: #17181c;
+
+$markdown: #f6f8fa;
+$markdown-dark: #0a0a0a;
+$markdown-border: #4a4a4a;
+
+$color: #000;
+$color-dark: #fefefe;
+
+$link: #254dff;
+$link-dark: #6b95ff;
+
+/** Light Theme **/
+body,
+.markdown-body img {
+  background: $background;
+  color: $color;
+}
+
+a {
+  color: $link;
+}
+video {
+  background: $markdown;
+  border: 1px solid $markdown-border;
+  border-radius: 5px;
+  padding: 1px;
+}
+
+.markdown-body .highlight pre,
+.markdown-body pre,
+.markdown-body table tr,
+.markdown-body code,
+.markdown-body tt {
+  background: $markdown;
+  border: 1px solid $markdown-border;
+  border-radius: 5px;
+}
+.markdown-body table th,
+.markdown-body table td {
+  border: 1px solid $markdown-border;
+}
+
+/** Dark Theme **/
+@media (prefers-color-scheme: dark) {
+  .light-only {
+    display: none;
+  }
+
+  body {
+    background: $background-dark;
+    color: $color-dark;
+  }
+  a {
+    color: $link-dark;
+  }
+  video {
+    background: $markdown-dark;
+  }
+  .markdown-body .highlight pre,
+  .markdown-body pre,
+  .markdown-body table tr,
+  .markdown-body code,
+  .markdown-body tt .markdown-body img {
+    background-color: $markdown-dark;
+  }
+}
+
+/** Hide the dark-only */
+@media (prefers-color-scheme: light) {
+  .dark-only {
+    display: none;
+  }
+}
+
+/** Auto Dark Theme end **/