Fixed light theme. (#21)

generateAssets.js

@@ -64,6 +64,16 @@ async function main() {
     "src/generated/emojiTypes.ts",
     `export type EmojiName = ${emojis.map((s) => `"${s}"`).join(" | ")};`
   );
+
+  // copy hljs themes to public folder
+  await fs.promises.copyFile(
+    "node_modules/highlight.js/styles/atom-one-light.css",
+    "public/generated/atom-one-light.css"
+  );
+  await fs.promises.copyFile(
+    "node_modules/highlight.js/styles/atom-one-dark.css",
+    "public/generated/atom-one-dark.css"
+  );
 }
 main();
 

src/app/LandingSegment.css

@@ -20,7 +20,7 @@
 
 .getstarted {
   background-color: #009a94;
-  color: white;
+  color: white !important;
   border: none;
 }
 

src/app/SecondSegment.css

@@ -1,5 +1,5 @@
 .second-segment {
-  background-color: #1c1f26;
+  background-color: #eceef1;
   padding-top: 2em;
   border-top: 1px solid #e5e7eb28;
   display: flex;
@@ -8,6 +8,12 @@
   padding-bottom: 6em;
 }
 
+@media (prefers-color-scheme: dark) {
+  .second-segment {
+    background-color: #1c1f26;
+  }
+}
+
 .splash-code-viewer {
   width: 70%;
 }

src/app/blog/[articleName]/CommentScript.tsx

@@ -1,12 +1,19 @@
 "use client";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export default function CommentScript() {
   // this is an "hack" because react doesn't like custom attribute in script tag.
   // So we gotta build the script tag manually.
   const commentBox = useRef<HTMLDivElement | null>(null);
+  const [isDarkMode, setIsDarkMode] = useState(false);
 
   useEffect(() => {
+    const matcher = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = ({ matches }: { matches: boolean }) => setIsDarkMode(matches);
+    matcher.addEventListener("change", onChange);
+
+    const isDarkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const theme = isDarkMode ? "dark_dimmed" : "light";
     const scriptEl = document.createElement("script");
     scriptEl.src = "https://giscus.app/client.js";
     scriptEl.setAttribute("data-repo", "Draco-lang/draco-lang.org");
@@ -18,7 +25,7 @@ export default function CommentScript() {
     scriptEl.setAttribute("data-reactions-enabled", "1");
     scriptEl.setAttribute("data-emit-metadata", "0");
     scriptEl.setAttribute("data-input-position", "top");
-    scriptEl.setAttribute("data-theme", "dark_dimmed");
+    scriptEl.setAttribute("data-theme", theme);
     scriptEl.setAttribute("data-lang", "en");
     scriptEl.setAttribute("crossorigin", "anonymous");
     scriptEl.async = true;
@@ -28,8 +35,9 @@ export default function CommentScript() {
 
     return () => {
       current.innerHTML = "";
+      matcher.removeEventListener("change", onChange);
     };
-  }, []);
+  }, [isDarkMode]);
 
   return <div ref={commentBox}></div>;
 }

src/app/blog/page.css

@@ -8,13 +8,12 @@
 }
 
 .blog-entries > a {
-  background-color: #1c1f26;
-  border: 1px solid #e5e7eb28;
+  background-color: #eceef1;
+  border: 1px solid rgba(0, 0, 0, 10%);
   border-radius: 5px;
   display: flex;
   flex-direction: row;
   height: 10.75rem;
-  color: white;
   text-decoration: none;
   margin-left: 1em;
   margin-right: 1em;
@@ -32,10 +31,27 @@
   margin-top: 0;
   margin-bottom: 0.5rem;
   font-size: 1.25rem;
+  color: rgb(42, 42, 42);
 }
 
 .article-preview-left-part {
   padding: 1.75rem 1.75rem 1.25rem;
+  color: rgb(117, 117, 117);
+}
+
+@media (prefers-color-scheme: dark) {
+  .blog-entries > a {
+    background-color: #1c1f26;
+    border-color: #e5e7eb28;
+  }
+
+  .article-preview-left-part {
+    color: white;
+  }
+
+  .blog-entries > a h1 {
+    color: white;
+  }
 }
 
 /* stylelint-disable-next-line media-feature-range-notation */
@@ -45,13 +61,15 @@
   }
 }
 
+/* stylelint-disable-next-line media-feature-range-notation */
 @media (max-width: 650px) {
   .blog-entries > a {
     flex-direction: column-reverse;
     justify-content: center;
     align-items: center;
     height: 20rem;
   }
+
   .blog-entries > a img {
     max-width: 100%;
     min-height: 30%;

src/app/community/page.css

@@ -11,8 +11,8 @@
   flex-direction: column;
   justify-content: left;
   height: 500px;
-  border: 1px solid #e5e7eb28;
-  background-color: #333740;
+  border: 1px solid rgba(0, 0, 0, 10%);
+  background-color: rgb(246, 247, 249);
   border-radius: 5px;
   margin: 10px;
   padding: 0 30px 0 30px;
@@ -22,6 +22,13 @@
   flex-shrink: 1;
 }
 
+@media (prefers-color-scheme: dark) {
+  .community-content > div {
+    background-color: #333740;
+    border-color: #e5e7eb28;
+  }
+}
+
 .community-content p {
   display: flex;
   align-items: flex-start;
@@ -53,6 +60,7 @@
   margin-bottom: 1em;
 }
 
+/* stylelint-disable-next-line media-feature-range-notation */
 @media (max-width: 650px) {
   .community-content {
     margin: 0 1em 2em 1em;

src/app/layout.css

@@ -1,5 +1,4 @@
 body {
-  background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -10,17 +9,6 @@ body {
     "Droid Sans", "Helvetica Neue", sans-serif;
 }
 
-@media (prefers-color-scheme: dark) {
-  body {
-    font-weight: 350;
-    color: white;
-  }
-
-  button {
-    color: white;
-  }
-}
-
 a {
   color: #00c8bd;
 }
@@ -40,10 +28,10 @@ code {
   align-items: center;
   justify-content: space-between;
   position: fixed;
-  width: 100vw;
+  width: 100%;
   box-sizing: border-box;
-  background-color: rgba(40, 44, 52, 95%);
   backdrop-filter: blur(16px) saturate(2);
+  background-color: rgba(255, 255, 255);
   border-bottom: 0 solid #e5e7eb;
   flex-grow: 1;
   z-index: 100;
@@ -125,19 +113,37 @@ code {
 }
 
 body:has(.page-docs) .active-on-docs {
-  outline: 1px solid #00c8bd;
+  outline: 1px solid #00857f;
 }
 
 body:has(.page-specs) .active-on-specs {
-  outline: 1px solid #00c8bd;
+  outline: 1px solid #00857f;
 }
 
 body:has(.page-community) .active-on-community {
-  outline: 1px solid #00c8bd;
+  outline: 1px solid #00857f;
 }
 
 body:has(.page-blog) .active-on-blog {
-  outline: 1px solid #00c8bd;
+  outline: 1px solid #00857f;
+}
+
+@media (prefers-color-scheme: dark) {
+  body:has(.page-docs) .active-on-docs {
+    outline: 1px solid #00c8bd;
+  }
+
+  body:has(.page-specs) .active-on-specs {
+    outline: 1px solid #00c8bd;
+  }
+
+  body:has(.page-community) .active-on-community {
+    outline: 1px solid #00c8bd;
+  }
+
+  body:has(.page-blog) .active-on-blog {
+    outline: 1px solid #00c8bd;
+  }
 }
 
 body:has(.page-docs) .active-on-docs:hover {
@@ -206,7 +212,6 @@ h6 {
     left: 0;
     top: 64px;
     width: 100%;
-    background-color: rgba(40, 44, 52);
     height: calc(100vh - 64px);
     align-items: flex-start;
     justify-content: flex-start;
@@ -217,3 +222,23 @@ h6 {
     display: flex;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  button {
+    color: white;
+  }
+
+  body {
+    background-color: #282c34;
+    font-weight: 350;
+    color: white;
+  }
+
+  .links {
+    background-color: rgba(40, 44, 52);
+  }
+
+  .top-bar {
+    background-color: rgba(40, 44, 52, 95%);
+  }
+}

src/app/layout.tsx

@@ -22,7 +22,8 @@ export default async function RootLayout({ children }: Params) {
   // Basically next.js prevent default behavior when clicking on a link
   // So we can't close it with pure html/css
   // So we add a lightweight script that close it when the user navigate to another page
-  const scriptHTML = `
+  // The css part is to get dynamic theme for the code viewer.
+  const rawHTML = `
   <script>
   let checkbox = document.getElementById("top-bar-hamburger");
   let originalPushState = history.pushState;
@@ -31,6 +32,10 @@ export default async function RootLayout({ children }: Params) {
       checkbox.checked = false;
   };
   </script>
+  <style>
+      @import url("/generated/atom-one-light.css") screen;
+      @import url("/generated/atom-one-dark.css") screen and (prefers-color-scheme: dark);
+    </style>
   `;
 
   const specs = await getSpecsInfo();
@@ -78,7 +83,7 @@ export default async function RootLayout({ children }: Params) {
                   Blog
                 </DracoButton>
               </div>
-              <div dangerouslySetInnerHTML={{ __html: scriptHTML }}></div>
+              <div dangerouslySetInnerHTML={{ __html: rawHTML }}></div>
             </div>
             <a href="https://github.com/Draco-lang/">
               <Image