Merge branch 'feat/dynamic-light-mode' into development

build/esbuild-build.ts

@@ -1,20 +1,17 @@
+import * as dotenv from "dotenv";
 import esbuild from "esbuild";
+import { invertColors } from "./plugins/invert-colors";
 const typescriptEntries = [
   "src/home/home.ts",
   // "src/login/login.ts",
   // "src/authenticated/authenticated.ts"
 ];
-// const cssEntries = ["static/style.css"];
-import * as dotenv from "dotenv";
-dotenv.config();
-const entries = [
-  ...typescriptEntries,
-  //  ...cssEntries
-];
+const cssEntries = ["static/style/style.css"];
+const entries = [...typescriptEntries, ...cssEntries];
 
 export const esBuildContext: esbuild.BuildOptions = {
   define: createEnvDefines(["GITHUB_TOKEN", "SUPABASE_URL", "SUPABASE_KEY"]),
-
+  plugins: [invertColors],
   sourcemap: true,
   entryPoints: entries,
   bundle: true,
@@ -42,6 +39,7 @@ esbuild
 
 function createEnvDefines(variableNames: string[]): Record<string, string> {
   const defines: Record<string, string> = {};
+  dotenv.config();
   for (const name of variableNames) {
     const envVar = process.env[name];
     if (envVar !== undefined) {

build/plugins/invert-colors.ts

@@ -0,0 +1,51 @@
+import esbuild from "esbuild";
+import fs from "fs";
+import path from "path";
+
+export const invertColors: esbuild.Plugin = {
+  name: "invert-colors",
+  setup(build) {
+    build.onLoad({ filter: /\.css$/ }, async (args) => {
+      const contents = await fs.promises.readFile(args.path, "utf8");
+
+      const updatedContents = contents.replace(/prefers-color-scheme: dark/g, "prefers-color-scheme: light");
+
+      // Invert greyscale colors and accommodate alpha channels in the CSS content
+      const invertedContents = updatedContents.replace(/#([0-9A-Fa-f]{3,6})([0-9A-Fa-f]{2})?\b/g, (match, rgb, alpha) => {
+        let color = rgb.startsWith("#") ? rgb.slice(1) : rgb;
+        if (color.length === 3) {
+          color = color
+            .split("")
+            .map((char) => char + char)
+            .join("");
+        }
+        const r = parseInt(color.slice(0, 2), 16);
+        const g = parseInt(color.slice(2, 4), 16);
+        const b = parseInt(color.slice(4, 6), 16);
+        // const a = alpha ? parseInt(alpha, 16) : 255;
+
+        // Check if the color is greyscale (R, G, and B components are equal)
+        if (r === g && g === b) {
+          // Invert RGB values and calculate inverted alpha
+          const invertedColorValue = (255 - r).toString(16).padStart(2, "0");
+          // const invertedAlphaValue = (255 - a).toString(16).padStart(2, "0");
+          // Return the inverted greyscale color with alpha channel
+          return `#${invertedColorValue}${invertedColorValue}${invertedColorValue}${alpha}`;
+        }
+
+        // If the color is not greyscale, return it as is, including the alpha channel
+        return `#${color}${alpha || ""}`;
+      });
+
+      // Define the output path for the new CSS file
+      const outputPath = path.resolve("static/style", "inverted-style.css");
+      const outputDir = path.dirname(outputPath);
+      await fs.promises.mkdir(outputDir, { recursive: true });
+      // Write the new contents to the output file
+      await fs.promises.writeFile(outputPath, invertedContents, "utf8");
+
+      // Return an empty result to esbuild since we're writing the file ourselves
+      return { contents: "", loader: "css" };
+    });
+  },
+};

src/home/home-controller.ts

@@ -96,6 +96,7 @@ export function homeController(container: HTMLDivElement, issues: GitHubIssue[])
       }
 
       container.appendChild(issueWrapper);
+      container.classList.add("ready");
     }
   });
 }

src/home/home.ts

@@ -16,3 +16,29 @@ displayGitHubIssues(gitHubToken)
   .catch((error) => {
     console.error(error);
   });
+
+// const isLight = prefersLightMode();
+// if (isLight) {
+//   console.trace({ isLight });
+//   downloadStylesheet("style/inverted-style.css");
+// }
+
+// function downloadStylesheet(url: string) {
+//   const xhr = new XMLHttpRequest();
+//   xhr.open("GET", url, true);
+//   xhr.onreadystatechange = () => {
+//     if (xhr.readyState === XMLHttpRequest.DONE) {
+//       if (xhr.status === 200) {
+//         const style = document.createElement("style");
+//         style.textContent = xhr.responseText;
+//         document.head.appendChild(style);
+//       } else {
+//         console.error("Failed to load stylesheet", url);
+//       }
+//     }
+//   };
+//   xhr.send();
+// }
+// function prefersLightMode() {
+//   return window.matchMedia("(prefers-color-scheme: light)").matches;
+// }

static/index.html

@@ -4,7 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DevPool Directory | Ubiquity DAO</title>
+    <link rel="stylesheet" href="style/special.css" />
     <link rel="stylesheet" href="style/style.css" />
+    <link rel="stylesheet" href="style/inverted-style.css" />
   </head>
   <body>
     <div id="issues-container"></div>
@@ -17,6 +19,6 @@
         ><span><span class="full">Ubiquity DAO | </span><span>DevPool Directory</span></span></div
       ></div
     >
-    <script type="module" src="dist/home.js"></script>
+    <script type="module" src="dist/src/home/home.js"></script>
   </body>
 </html>