Merge pull request #8 from alkrauss48/dark-mode

Implement dark mode
alkrauss48 · Aug 1, 2023 · 66c861b · 66c861b
2 parents 5b27e10 + 69833ac
commit 66c861b
Show file tree

Hide file tree

Showing 12 changed files with 94 additions and 29 deletions.
diff --git a/index.html b/index.html
@@ -32,7 +32,7 @@
     <meta name="twitter:creator" content="@thecodeboss">
   </head>
   <body class="m-0">
-    <div id="app"></div>
+    <div id="app" class="dark:bg-zinc-900 dark:text-white"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import { applyVisualMode } from './utils/handleVisualMode.ts';
 
+applyVisualMode();
 </script>
 
 <template>

diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
@@ -8,7 +8,7 @@ defineProps<{
 
 <template>
   <aside
-    class="bg-gray-300 fixed bottom-0 left-0 h-2"
+    class="bg-gray-400/50 fixed bottom-0 left-0 h-2"
     :style="{width: `${current / total * 100}%`}"
   ></aside>
 </template>
diff --git a/src/components/SettingsPage.vue b/src/components/SettingsPage.vue
@@ -1,31 +1,37 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
+import { VisualMode, isDarkMode } from '../enums/visualMode.ts';
+import { getVisualMode, setVisualMode } from '../utils/handleVisualMode.ts';
+
 const router = useRouter();
+const visualMode = getVisualMode();
 
 const slidesUrl = ref<string>(localStorage.getItem('slidesUrl') ?? '');
+const darkMode = ref<boolean>(isDarkMode(visualMode));
 
 const back = () => {
   router.back();
-}
+};
 
 const go = () => {
   router.push(`/${btoa(slidesUrl.value)}`);
-}
+};
+
+watch(darkMode, async (newValue: boolean) => {
+  const newMode = newValue ? VisualMode.Dark : VisualMode.Light;
 
+  setVisualMode(newMode);
+});
 </script>
 
 <template>
   <main>
     <router-link
       to="/"
-      class="
-        px-4 py-2
-        fixed top-6 left-8
-        bg-black text-white border-solid border-2 border-black
-        hover:bg-white hover:text-black
-      ">Home</router-link>
+      class="button fixed top-6 left-8"
+      >Home</router-link>
     <button
       @click="back()"
       class="fixed top-6 right-8 text-4xl"
@@ -36,23 +42,24 @@ const go = () => {
       action=""
       method="post"
     >
+        <div class="flex mb-8">
+          <input type="checkbox" id="darkMode" v-model="darkMode">
+          <label class="ml-4 font-bold" for="darkMode">Dark Mode?</label>
+        </div>
+        <hr class="border-1 border-black">
         <p class="w-64 mb-8">Enter the URL to your markdown file below, and then click present.</p>
         <label for="slidesUrl">URL to your slides:</label>
         <textarea
           id="slidesUrl"
-          class="w-64 p-2 my-4 border-solid border-2 border-black"
+          class="w-64 p-2 my-4 border-solid border-2 border-black text-black"
           name="slidesUrl"
           v-model="slidesUrl"
           rows="4"
           required
           placeholder="https://example.com/your-presentation.md"
           ></textarea>
       <button
-        class="
-          p-4 border-solid border-2 border-black
-          bg-black text-white
-          hover:text-black hover:bg-white
-        "
+        class="button"
         type="submit"
       >Present</button>
     </form>

diff --git a/src/components/SlideArrows.vue b/src/components/SlideArrows.vue
@@ -13,13 +13,17 @@ const emit = defineEmits<{
       type="button"
       @click="emit('previous')"
       title="Go back 1 slide"
-      class="slide-arrow-button left-6 border-r-[30px] border-r-gray-200"
+      class="
+        slide-arrow-button left-6
+        border-r-[30px] border-r-gray-300/50 hover:border-r-gray-300"
     ></button>
     <button
       type="button"
       @click="emit('next')"
       title="Go forward 1 slide"
-      class="slide-arrow-button right-6 border-l-[30px] border-l-gray-200"
+      class="
+        slide-arrow-button right-6
+        border-l-[30px] border-l-gray-300/50 hover:border-l-gray-300"
     ></button>
   </section>
 </template>
diff --git a/src/components/SlideView.vue b/src/components/SlideView.vue
@@ -82,16 +82,16 @@ window.addEventListener('keydown', (event) : void => {
     " ",
     "ArrowDown",
     "ArrowRight",
-    "j",
-    "l",
+    "j", 'J',
+    "l", 'L',
   ];
 
   const decrementors = [
     "Backspace",
     "ArrowUp",
     "ArrowLeft",
-    "k",
-    "h",
+    "k", 'K',
+    "h", 'H',
   ];
 
   if (incrementors.includes(key)) {

diff --git a/src/components/SlidesPage.vue b/src/components/SlidesPage.vue
@@ -73,8 +73,8 @@ onMounted(async () => {
       to="/settings"
       class="
         fixed top-6 right-8
-        text-5xl text-gray-300
-        hover:text-gray-500 focus:text-gray-500
+        text-5xl text-gray-300/50
+        hover:text-gray-300 focus:text-gray-300
       "
       ><CogIcon /></router-link>
     <div v-if="data.length > 0">

diff --git a/src/css/index.css b/src/css/index.css
@@ -11,3 +11,16 @@ body {
 .slide-arrow-button {
   @apply fixed bottom-6 w-0 h-0 touch-none border-y-[20px] border-y-transparent;
 }
+
+.button {
+  @apply
+    px-4 py-2
+    bg-black text-white
+    dark:bg-white dark:text-black
+    border-black dark:border-white
+    border-solid border-2
+    hover:bg-white hover:text-black
+    focus:bg-white focus:text-black
+    dark:hover:bg-black dark:hover:text-white
+    dark:focus:bg-black dark:focus:text-white;
+}
diff --git a/src/css/typography.css b/src/css/typography.css
@@ -48,16 +48,20 @@
 }
 
 .typography code {
-  background-color: #e2e2e2;
+  background-color: rgba(226, 226, 226, .4);
   padding: .25rem;
 }
 
 .typography pre {
-  background-color: #e2e2e2;
+  background-color: rgba(226, 226, 226, .4);
   padding: .5rem 1rem;
   text-align: left;
 }
 
+.typography pre code {
+  background-color: transparent;
+}
+
 .typography a {
   color: #05a0db;
 }
@@ -79,7 +83,7 @@
 }
 
 .typography h4 {
-  font-size: 1;
+  font-size: 1em;
 }
 
 .typography h5 {

diff --git a/src/enums/visualMode.ts b/src/enums/visualMode.ts
@@ -0,0 +1,14 @@
+export enum VisualMode {
+  Dark = "dark",
+  Light = "light",
+}
+
+export const isDarkMode = (mode: VisualMode) : boolean => {
+  return mode === VisualMode.Dark;
+};
+
+export const isLightMode = (mode: VisualMode) : boolean => {
+  return mode === VisualMode.Light;
+};
+
+export default VisualMode;
diff --git a/src/utils/handleVisualMode.ts b/src/utils/handleVisualMode.ts
@@ -0,0 +1,20 @@
+import { VisualMode, isDarkMode } from '../enums/visualMode.ts';
+
+export const getVisualMode = () : VisualMode => {
+  return (localStorage.getItem('visualMode') as VisualMode) ?? VisualMode.Light
+};
+
+export const setVisualMode = (value: VisualMode) => {
+  localStorage.setItem('visualMode', value.toString());
+
+  applyVisualMode(value);
+};
+
+export const applyVisualMode = (value: VisualMode = getVisualMode()) : void => {
+  if (isDarkMode(value)) {
+    document.body.classList.add('dark');
+    return;
+  }
+
+  document.body.classList.remove('dark');
+};
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -1,7 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
   content: [
-    './public/index.html',
+    './index.html',
     './src/**/*.{vue,js,ts,jsx,tsx}',
   ],
   theme: {