feat: added dark mode support

Author: technikhil314

README.md

@@ -34,6 +34,7 @@ The simplest solution in my opinion will be
 In the chase of one such tool I ended up creating one as I did not find any that satisfied my requirements.
 This is open source and has very easy user interface. Here is the link to the tool https://diffviewer.vercel.app/
 It has following benefits
+
 1. Since the tool does not store your data on its server there is no server required in the tool
 2. The tool is blazing fast
 3. Most importantly the link can be shared with anyone without security concerns(Unless you share link itself over some insecure network)
@@ -65,3 +66,4 @@ For detailed explanation on how things work, check out the [documentation](https
 - [ ] Auto detect language
 - [ ] Add small shadow to line numbers
 - [x] Fix toast issue. (Click on copy button while toast is on)
+- [ ] Handle line gutter issue when last line in data is empty

components/RTStickyCopyButton.vue

@@ -4,7 +4,7 @@
       @click="handleClick"
       class="absolute top-0 right-0 p-2 transition-all transform rounded-full shadow  z-1 hover:shadow-lg hover:scale-110 hover:rotate-12"
       v-bind:class="{
-        'bg-gray-100': !copied,
+        'bg-gray-100 dark:bg-gray-600': !copied,
         'bg-green-500': copied,
       }"
     >

components/navbar.vue

@@ -1,5 +1,7 @@
 <template>
-  <header class="fixed top-0 left-0 right-0 shadow-lg bg-gray-50 z-100">
+  <header
+    class="fixed top-0 left-0 right-0 shadow-lg  dark:shadow-dark bg-gray-50 dark:bg-gray-900 z-100 dark:text-gray-50"
+  >
     <div class="container flex items-center h-full py-4 m-auto">
       <div v-if="showBackButton" class="mr-4">
         <NuxtLink to="/">
@@ -24,7 +26,9 @@
           <svg
             height="40px"
             width="40px"
+            class="dark:text-white"
             fill="#000000"
+            stroke="currentColor"
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
             version="1.1"
@@ -55,6 +59,42 @@
         </div>
         <div class="items-center">
           <slot name="right" />
+          <button
+            type="button"
+            class="inline-flex items-center justify-center ml-4 text-gray-800 bg-transparent border-2 border-gray-700 rounded-full shadow-lg  dark:text-gray-50 w-9 h-9 active:scale-y-75"
+            @click="toggleDarkMode"
+          >
+            <svg
+              fill="none"
+              stroke="currentColor"
+              class="w-6 h-6"
+              viewBox="0 0 24 24"
+              v-if="!darkMode"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+              ></path>
+            </svg>
+            <svg
+              fill="none"
+              class="w-6 h-6"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              v-if="darkMode"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+              ></path>
+            </svg>
+          </button>
         </div>
       </div>
       <!-- buttons -->
@@ -113,5 +153,34 @@
 <script>
 export default {
   props: ['showBackButton'],
+  data() {
+    return {
+      darkMode: false,
+    }
+  },
+  mounted() {
+    const cookies = document.cookie.split(';')
+    const cookieMap = {}
+    cookies.forEach((element) => {
+      const [name, val] = element.split('=')
+      cookieMap[name] = val
+    })
+    if (
+      window.matchMedia('(prefers-color-scheme: dark)').matches &&
+      (cookieMap.darkMode === undefined || cookieMap.darkMode === 'true')
+    ) {
+      this.toggleDarkMode(null, true)
+    }
+  },
+  methods: {
+    toggleDarkMode(e, val) {
+      e && e.preventDefault()
+      this.darkMode = val || !this.darkMode
+      document.documentElement.classList[this.darkMode ? 'add' : 'remove'](
+        'dark'
+      )
+      document.cookie = `darkMode=${this.darkMode}; Secure; max-age=31536000;`
+    },
+  },
 }
 </script>

pages/diff/_diff.vue

@@ -5,9 +5,9 @@
         <button
           type="button"
           @click="copyUrlToClipboard"
-          class="inline-flex justify-center px-4 py-2 transition-transform transform rounded-md shadow-lg outline-none  copy-uri-button align-center focus:ring-4 active:scale-y-75"
+          class="inline-flex justify-center px-4 py-2 transition-transform transform rounded-md shadow outline-none  copy-uri-button align-center focus:ring-4 active:scale-y-75"
           v-bind:class="{
-            'bg-blue-600 text-white': !copied,
+            'bg-blue-500 text-white': !copied,
             'bg-green-500 text-gray-800': copied,
           }"
         >
@@ -49,17 +49,17 @@
       </template>
     </Navbar>
     <main>
-      <div class="flex items-start w-full gap-4 font-mono">
+      <div class="flex items-start w-full gap-4 font-mono dark:text-gray-50">
         <div
-          class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-sm  max-h-screen--nav line-number-gutter min-h-80"
+          class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-md  dark:border-gray-500 max-h-screen--nav line-number-gutter min-h-80"
         >
           <RTStickyCopyButton :clickHandler="copyTextToClipboard" />
           <div v-for="(lineDiff, index) in lhsDiff" :key="index">
             <p class="break-all whitespace-pre-wrap" v-html="lineDiff"></p>
           </div>
         </div>
         <div
-          class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-sm  min-h-80 line-number-gutter max-h-screen--nav"
+          class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-md  dark:border-gray-500 min-h-80 line-number-gutter max-h-screen--nav"
         >
           <RTStickyCopyButton :clickHandler="copyTextToClipboard" />
           <div v-for="(lineDiff, index) in rhsDiff" :key="index">
@@ -84,7 +84,8 @@ export default {
       .map((item) => {
         const hunkState = item[0]
         if (hunkState === -1 || hunkState === 0) {
-          const className = hunkState === -1 ? 'bg-red-400' : ''
+          const className =
+            hunkState === -1 ? 'bg-red-400 dark:bg-yellow-700' : ''
           return `<span class="break-all inline p-0 m-0 ${className}">${item[1]}</span>`
         }
         return false
@@ -96,7 +97,8 @@ export default {
       .map((item) => {
         const hunkState = item[0]
         if (hunkState === 1 || hunkState === 0) {
-          const className = hunkState === 1 ? 'bg-green-400' : ''
+          const className =
+            hunkState === 1 ? 'bg-green-400 dark:bg-green-700' : ''
           return `<span class="break-all inline p-0 m-0 ${className}">${item[1]}</span>`
         }
         return false
@@ -183,13 +185,13 @@ export default {
     line-height: 1.65;
     @apply relative;
     &:hover {
-      @apply bg-gray-200;
+      @apply bg-gray-200 dark:bg-gray-700;
     }
     &::before {
       counter-increment: line-numbers;
       content: counter(line-numbers);
       width: var(--line-number-gutter-width);
-      @apply absolute left-0 top-0 -mx-4 bottom-0 text-center bg-gray-200 text-gray-500 flex justify-center items-center text-sm;
+      @apply absolute left-0 top-0 -mx-4 bottom-0 text-center bg-gray-200 dark:bg-gray-700 dark:text-gray-50 text-gray-500 flex justify-center items-center text-sm;
     }
     &:first-of-type {
       &::before {

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="contents">
     <Navbar />
-    <main>
+    <main class="text-gray-800 dark:text-gray-50">
       <h1 class="w-full mb-2 text-xl text-center">
         Find difference in any two text blocks and get easy sharable link
       </h1>
@@ -20,7 +20,7 @@
           ></textarea>
           <div class="self-end w-full text-center">
             <button
-              class="inline-flex items-center justify-center w-48 px-4 py-2 text-white transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none  focus:ring-4 active:scale-y-75"
+              class="inline-flex items-center justify-center w-48 px-4 py-2 transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none  text-gray-50 focus:ring-4 active:scale-y-75"
             >
               Compare
             </button>

styles/global.scss

@@ -1,12 +1,15 @@
 /* Basic layout */
+:root {
+  color-scheme: dark light;
+}
 html,
 body,
 #__nuxt,
 #__layout,
 .page-root,
 main {
   @apply h-full;
-  @apply bg-gray-50;
+  @apply bg-gray-50 dark:bg-gray-900;
 }
 
 body {
@@ -27,11 +30,11 @@ main {
   width: 10px;
 }
 ::-webkit-scrollbar-track {
-  background: #f1f1f1;
+  @apply bg-gray-50 dark:bg-gray-700;
 }
 ::-webkit-scrollbar-thumb {
-  background: #888;
+  @apply bg-gray-500 dark:bg-gray-500;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: #555;
+  @apply bg-gray-400 dark:bg-gray-400;
 }

tailwind.config.js

@@ -1,6 +1,11 @@
 module.exports = {
   mode: 'jit',
   darkMode: 'class',
+  variants: {
+    extend: {
+      boxShadow: ['dark']
+    },
+  },
   theme: {
     maxHeight: {
       'screen--nav': 'calc(100vh - 7rem)',
@@ -17,7 +22,18 @@ module.exports = {
     },
     translate: {
       '-screen': '-100vh',
-    }
+    },
+    boxShadow: {
+      DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+      '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
+      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+      dark: '0 5px 10px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05)',
+      none: 'none',
+    },
   },
   plugins: [
     require('@tailwindcss/forms'),