Fix: Dark mode implemntation

PROxZIMA · Aug 21, 2022 · 332fdff · 332fdff
1 parent 91e5d50
commit 332fdff
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 61 deletions.
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -1,3 +1,4 @@
+import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React, { useEffect, useRef, useState } from 'react';
 import style from '../styles/404.module.css';
@@ -138,7 +139,6 @@ const NotFoundPage = () => {
     if (inputRef.current) {
       inputRef.current.focus({ preventScroll: true });
     }
-    document.title = '404 - Page Not Found';
   }, []);
 
   useEffect(() => {
@@ -149,37 +149,43 @@ const NotFoundPage = () => {
   }, [history]);
 
   return (
-    <div
-      className="overflow-hidden h-full"
-      onClick={() => inputRef.current.focus({ preventScroll: true })}
-    >
-      <div className="overflow-y-auto h-full">
-        <form className={style.four_oh_four_form} onSubmit={onSubmit}>
-          <input
-            type={style.text}
-            className={style.input_404}
-            ref={inputRef}
-            onChange={onChange}
-            value={input}
-          />
-        </form>
-
-        <div className={style.terminal}>
-          <h1
-            className={`${style.error} text-light-green/[.8] dark:text-dark-green/[.8]`}
-          >
-            Error <span className={style.errorcode}>404</span>
-          </h1>
-          {history}
-          <p
-            className={`${style.prompt} ${style.output} ${style.new_output}`}
-            ref={outputRef}
-          >
-            {input}
-          </p>
+    <>
+      <Head>
+        <title>404 - Page Not Found</title>
+      </Head>
+
+      <div
+        className="overflow-hidden h-full"
+        onClick={() => inputRef.current.focus({ preventScroll: true })}
+      >
+        <div className="overflow-y-auto h-full">
+          <form className={style.four_oh_four_form} onSubmit={onSubmit}>
+            <input
+              type={style.text}
+              className={style.input_404}
+              ref={inputRef}
+              onChange={onChange}
+              value={input}
+            />
+          </form>
+
+          <div className={style.terminal}>
+            <h1
+              className={`${style.error} text-light-green/[.8] dark:text-dark-green/[.8]`}
+            >
+              Error <span className={style.errorcode}>404</span>
+            </h1>
+            {history}
+            <p
+              className={`${style.prompt} ${style.output} ${style.new_output}`}
+              ref={outputRef}
+            >
+              {input}
+            </p>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,5 +1,4 @@
 import Head from 'next/head';
-import Script from 'next/script';
 import React from 'react';
 import config from '../../config.json';
 import '../styles/global.css';
@@ -111,8 +110,6 @@ const App = ({ Component, pageProps }) => {
         <meta name="theme-color" content="#282A36" />
       </Head>
 
-      <Script strategy="beforeInteractive" src="/scripts/darkMode.js" />
-
       <div
         className="text-light-foreground dark:text-dark-foreground min-w-max text-xs md:min-w-full md:text-base"
         onClick={onClickAnywhere}

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -0,0 +1,17 @@
+import { Head, Html, Main, NextScript } from 'next/document';
+
+const Document = () => {
+  return (
+    <Html className="dark" lang="en">
+      <Head>
+        <script src="/scripts/darkMode.js" async />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+};
+
+export default Document;
diff --git a/src/utils/api.ts b/src/utils/api.ts
@@ -37,9 +37,29 @@ export const getQuote = async () => {
   }
 };
 
-export const theme = () =>
-  localStorage.getItem('proxzimaDarkMode') === 'dark' ||
-  (!('proxzimaDarkMode' in localStorage) &&
-    window.matchMedia('(prefers-color-scheme: dark)').matches) ||
-  (!('proxzimaDarkMode' in localStorage) &&
-    window.document.documentElement.classList.contains('dark'));
+/**
+ * Get default theme from localStorage, window media or document body class.
+ * @returns {boolean} false if light theme, true by default.
+ */
+export const defaultTheme = () => {
+  const id = 'proxzimaDarkMode';
+  if (typeof window !== 'undefined' && window.localStorage) {
+    const storedPrefs = window.localStorage.getItem(id);
+    if (storedPrefs === 'light') {
+      return false;
+    }
+
+    const userMedia = window.matchMedia('(prefers-color-scheme: light)');
+    if (!(id in localStorage) && userMedia.matches) {
+      return false;
+    }
+
+    const docTheme =
+      window.document.documentElement.classList.contains('light');
+    if (!(id in localStorage) && docTheme) {
+      return false;
+    }
+  }
+
+  return true;
+};
diff --git a/src/utils/bin/api_commands.tsx b/src/utils/bin/api_commands.tsx
@@ -1,7 +1,13 @@
 // List of commands that require API calls
 
 import RepoCard from '../../components/RepoCard';
-import { getProjects, getQuote, getReadme, getWeather, theme } from '../api';
+import {
+  defaultTheme,
+  getProjects,
+  getQuote,
+  getReadme,
+  getWeather
+} from '../api';
 
 import GitHubCalendar from 'react-github-calendar';
 import ReactMarkdown from 'react-markdown';
@@ -37,7 +43,8 @@ export const quote = async (args: string[]): Promise<string> => {
 };
 
 export const about = async (args: string[]): Promise<JSX.Element> => {
-  const calendarTheme = theme()
+  const theme = defaultTheme();
+  const calendarTheme = theme
     ? {
         level0: '#252733',
         level1: '#0e4429',
@@ -53,7 +60,7 @@ export const about = async (args: string[]): Promise<JSX.Element> => {
         level4: '#216e39',
       };
 
-  const codeTheme = theme() ? dracula : oneLight;
+  const codeTheme = theme ? dracula : oneLight;
 
   const readme = await getReadme();
 

diff --git a/src/utils/bin/index.ts b/src/utils/bin/index.ts
@@ -1,4 +1,4 @@
-export * from './commands';
 export * from './api_commands';
+export * from './commands';
 export { default as sumfetch } from './sumfetch';
-export { default as toggle } from './themeProvider';
+export { default as toggle } from './themeToggle';
diff --git a/src/utils/bin/themeProvider.ts b/src/utils/bin/themeProvider.ts
diff --git a/src/utils/bin/themeToggle.ts b/src/utils/bin/themeToggle.ts
@@ -0,0 +1,19 @@
+import { defaultTheme } from '../api';
+
+const toggle = async (args: string[]): Promise<string> => {
+  let newTheme;
+
+  if (args.length > 0 && (args[0] === 'light' || args[0] === 'dark')) {
+    newTheme = args[0];
+  } else {
+    newTheme = defaultTheme() ? 'light' : 'dark';
+  }
+
+  window.document.documentElement.classList.toggle('dark', newTheme === 'dark');
+
+  localStorage.setItem('proxzimaDarkMode', newTheme);
+
+  return `Switched to ${newTheme} theme...`;
+};
+
+export default toggle;