From f7fd28896d5be0a0fac3caa99c5fca8d6c2c9f83 Mon Sep 17 00:00:00 2001
From: Avinashsharma <62421538+avinashsharma080@users.noreply.github.com>
Date: Mon, 19 Feb 2024 04:05:58 +0530
Subject: [PATCH] added HTML and CSS and JS for dark Mode button (#347)

* added HTML and CSS for dark Mode button

* commit to check how dark mode can be added

* added dark mode CSS support

* added dark mode CSS support

* default dark mode design

* Fixed dark mode css

* added dark mode css for nebari,handler and loggers

* added dark mode css for nebari,handler and loggers

* Fixed JS for white/dark mode toggle

* Resolved suggested changes

* Update src/App.vue

* Formatted code

* Refactored code for Vue

* Refactored code for Vue

* Refactored code for Vue

* Refactored and removed unused css

* Refactored and removed unused css

* refactored code

* Changed code to use Vuejs v-show property

---------

Co-authored-by: Avinash Sharma <avi@Avinashs-MacBook-Pro-2.local>
Co-authored-by: vfdev <vfdev.5@gmail.com>
---
 src/App.vue                          |  27 ++++-
 src/components/FormInput.vue         |   5 +-
 src/components/FormSelect.vue        |   4 +-
 src/components/NavBar.vue            |   9 +-
 src/components/NavCode.vue           |  17 ++-
 src/components/NavContributors.vue   |   2 +-
 src/components/NavHelp.vue           |   2 +-
 src/components/NavNebari.vue         |  12 ++-
 src/components/NavToggleDarkMode.vue | 155 +++++++++++++++++++++++++++
 src/components/PaneLeft.vue          |  11 +-
 src/components/PaneRight.vue         |   2 +-
 11 files changed, 225 insertions(+), 21 deletions(-)
 create mode 100644 src/components/NavToggleDarkMode.vue

diff --git a/src/App.vue b/src/App.vue
index c804cb93..072a823f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,10 +13,12 @@
   box-sizing: border-box;
   border-width: 0;
 }
+
 ::selection {
   color: var(--c-white-light);
   background: var(--c-brand-red);
 }
+
 :root {
   --c-white: #fff;
   --c-white-light: #f6f6f6;
@@ -33,7 +35,18 @@
   --code-line-height: 24px;
   --code-text-light: #476582;
   --code-inline-bg-color: rgba(27, 31, 35, 0.05);
+  --accent-color: #cacaca;
+  --background-color-primary: #fff;
+  --background-color-secondary: #fafafa;
 }
+
+:root.dark-theme {
+  --background-color-primary: #1e1e1e;
+  --background-color-secondary: #2d2d30;
+  --c-text: white;
+  --c-white-dark: #3f3f3f;
+}
+
 body {
   font-family: var(--font-family-base);
   font-size: var(--font-size);
@@ -41,13 +54,15 @@ body {
   margin: 0;
   height: 100%;
   color: var(--c-text);
-  background-color: var(--c-white);
+  background-color: var(--background-color-primary);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
 h1 {
   font-weight: 600;
 }
+
 h2,
 h3,
 h4,
@@ -55,21 +70,26 @@ h5,
 h6 {
   font-weight: 500;
 }
+
 @media (max-width: 915px) {
   h1 {
     font-size: 1.5rem;
   }
+
   h2 {
     font-size: 1.25rem;
   }
+
   h3 {
     font-size: 1.125rem;
   }
 }
+
 a {
   text-decoration: none;
   color: var(--c-text);
 }
+
 @media (prefers-reduced-motion) {
   :focus {
     border-radius: 3px;
@@ -78,18 +98,21 @@ a {
     outline: 2px solid var(--c-brand-yellow);
   }
 }
+
 /* margin for left pane tabs */
 .tab {
   --left-pane-margin-x: 1.5rem;
   margin: 0 var(--left-pane-margin-x);
   padding-bottom: 2rem;
 }
+
 /* overriding prismjs defaults */
 pre,
 code {
   font-family: var(--code-font-family) !important;
   font-size: var(--code-font-size) !important;
 }
+
 /* for three backticks code block */
 code {
   margin: 0;
@@ -98,10 +121,12 @@ code {
   color: var(--code-text-light);
   background-color: var(--code-inline-bg-color);
 }
+
 .slide-fade-leave-active,
 .slide-fade-enter-active {
   transition: all 0.25s ease-out;
 }
+
 .slide-fade-enter-from,
 .slide-fade-leave-to {
   transform: translateY(10px);
diff --git a/src/components/FormInput.vue b/src/components/FormInput.vue
index 4d17faae..cf3d90fe 100644
--- a/src/components/FormInput.vue
+++ b/src/components/FormInput.vue
@@ -103,7 +103,8 @@ input[type='text'],
 input[type='number'] {
   border-radius: 3px 3px 0 0;
   border: 1px solid var(--c-white-light);
-  background: var(--c-white-light);
+  background: var(--background-color-secondary);
+  color: var(--c-text);
   padding: 0.5rem 1rem;
   width: 100%;
 }
@@ -120,7 +121,7 @@ input[type='number'] ~ .expand {
 input[type='text']:focus,
 input[type='number']:focus {
   outline: none;
-  background: var(--c-white);
+  background: var(--background-color-secondary);
 }
 input[type='text']:focus ~ .expand,
 input[type='number']:focus ~ .expand {
diff --git a/src/components/FormSelect.vue b/src/components/FormSelect.vue
index 944083fc..719219c3 100644
--- a/src/components/FormSelect.vue
+++ b/src/components/FormSelect.vue
@@ -95,8 +95,8 @@ function toTitleCase(v) {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  background: var(--c-white-light);
-  border-radius: 3px;
+  background: var(--background-color-secondary);
+  border-radius: 3px solid var(--c-text);
   color: var(--c-text);
   cursor: pointer;
   font-family: var(--font-family-base);
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index a158aa05..36653cc6 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -27,6 +27,7 @@
         v{{ version }}@{{ currentCommit.slice(0, 7) }}
       </a>
       <NavContributors />
+      <NavToggleDarkMode />
     </div>
   </nav>
 </template>
@@ -42,7 +43,7 @@ import NavIgniteDocs from './NavIgniteDocs.vue'
 import NavTwitter from './NavTwitter.vue'
 import NavHelp from './NavHelp.vue'
 import NavContributors from './NavContributors.vue'
-
+import NavToggleDarkMode from './NavToggleDarkMode.vue'
 export default {
   components: {
     NavDiscord,
@@ -53,11 +54,11 @@ export default {
     NavTwitter,
     NavHelp,
     NavIgniteDocs,
-    NavContributors
+    NavContributors,
+    NavToggleDarkMode
   },
   setup() {
     const currentCommit = __COMMIT__ // from vite.config.js
-
     return { version, currentCommit }
   }
 }
@@ -97,7 +98,7 @@ h1 img {
     z-index: 6;
     width: 100%;
     padding: 0.5rem 0.5rem 0;
-    background-color: var(--c-white);
+    background-color: var(--background-color-primary);
   }
 }
 </style>
diff --git a/src/components/NavCode.vue b/src/components/NavCode.vue
index 235b703d..3818c3dc 100644
--- a/src/components/NavCode.vue
+++ b/src/components/NavCode.vue
@@ -234,16 +234,18 @@ export default {
   color: white;
   text-align: center;
 }
+
 /* Dropdown Content (Hidden by Default) */
 .dropdown-content {
   display: none;
   position: absolute;
-  background-color: var(--c-white-light);
+  background-color: var(--background-color-primary);
   min-width: 15vw;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
   padding: 0.5vh;
-  text-align: center; /* Center-align the dropdown content */
+  text-align: center;
+  /* Center-align the dropdown content */
   border: 1px solid var(--c-brand-red);
   border-radius: 3%;
   text-align: -webkit-center;
@@ -272,21 +274,26 @@ export default {
   align-self: center;
   margin-left: 1.1vw;
 }
+
 .generate {
-  background-color: #ffffff;
+  background-color: var(--background-color-primary);
   width: 80%;
   font-size: 60%;
   height: 1.5rem;
 }
+
 #text-box {
   font-size: 90%;
   height: 1.6rem;
   border-radius: 3%;
+  color: var(--c-text);
+  background: var(--background-color-primary);
 }
 
 .icon {
   vertical-align: bottom;
 }
+
 .inline-icon {
   display: inline-flex;
   vertical-align: bottom;
@@ -302,7 +309,7 @@ export default {
 }
 
 .copy-link-input:hover {
-  background: var(--c-brand-red);
+  background: var(--c-brand-red) !important;
   border: 1px solid #cccccc;
   color: #f1f1f1;
 }
@@ -335,9 +342,11 @@ export default {
   display: block;
   z-index: 10;
 }
+
 .copy-button {
   font-size: 1rem;
 }
+
 .wget-text {
   font-size: 0.6em;
 }
diff --git a/src/components/NavContributors.vue b/src/components/NavContributors.vue
index 390932be..9068ed13 100644
--- a/src/components/NavContributors.vue
+++ b/src/components/NavContributors.vue
@@ -116,7 +116,7 @@ export default {
 }
 .contributors-wrapper div {
   padding: 1rem 0;
-  background-color: var(--c-white-light);
+  background-color: var(--background-color-primary);
   font-size: var(--font-size);
   color: var(--c-text);
   border-radius: 8px;
diff --git a/src/components/NavHelp.vue b/src/components/NavHelp.vue
index c37dbb99..7fbba09e 100644
--- a/src/components/NavHelp.vue
+++ b/src/components/NavHelp.vue
@@ -91,7 +91,7 @@ export default {
 }
 .help-wrapper div {
   padding: 1rem 0;
-  background-color: var(--c-white-light);
+  background-color: var(--background-color-primary);
   font-size: var(--font-size);
   color: var(--c-text);
   border-radius: 8px;
diff --git a/src/components/NavNebari.vue b/src/components/NavNebari.vue
index 7bef247c..e7a86623 100644
--- a/src/components/NavNebari.vue
+++ b/src/components/NavNebari.vue
@@ -254,7 +254,7 @@ export default {
 .dropdown-content {
   display: none;
   position: absolute;
-  background-color: var(--c-white-light);
+  background-color: var(--background-color-primary);
   min-width: 15vw;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 100;
@@ -303,7 +303,7 @@ export default {
 }
 .code-snippet {
   text-align: center;
-  background-color: #cccccc;
+  background-color: var(--c-white-dark);
 }
 
 /* Text Box CSS */
@@ -316,14 +316,16 @@ export default {
   font-size: larger;
 }
 .text-box-nebari-details {
+  background: var(--background-color-secondary);
+  color: var(--c-text);
   width: 95%;
   height: 3vh;
 }
 
 .copy-link-input:hover {
-  background: var(--c-brand-red);
+  background: var(--c-brand-red) !important;
   border: 1px solid #cccccc;
-  color: #f1f1f1;
+  color: black;
 }
 
 #nebari-bottom-button {
@@ -336,6 +338,8 @@ export default {
   margin: 2.8vh;
   margin-top: 3vh;
   margin-bottom: 2vh;
+  background: var(--background-color-primary);
+  color: var(--c-text);
 }
 .copy-button-nebari {
   font-size: 1rem;
diff --git a/src/components/NavToggleDarkMode.vue b/src/components/NavToggleDarkMode.vue
new file mode 100644
index 00000000..1b20ea07
--- /dev/null
+++ b/src/components/NavToggleDarkMode.vue
@@ -0,0 +1,155 @@
+<template>
+  <button
+    aria-label="Toggle Color Scheme"
+    @click="toggleTheme"
+    title="Toggle Light/Dark mode"
+    class="sun-moon-btn"
+    id="toggleDark"
+  >
+    <svg
+      id="sun"
+      v-show="isDark"
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-6 w-6"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <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"
+      />
+    </svg>
+
+    <svg
+      id="moon"
+      xmlns="http://www.w3.org/2000/svg"
+      v-show="!isDark"
+      class="h-6 w-6"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <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"
+      />
+    </svg>
+  </button>
+</template>
+
+<style scoped>
+@import url('./css/nav-right.css');
+
+*,
+::before,
+::after {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+* {
+  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgba(59, 130, 246, 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+}
+
+button {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  text-transform: none;
+  background-color: transparent;
+  background-image: none;
+  padding: 0;
+  line-height: inherit;
+  color: inherit;
+}
+
+button,
+[type='button'] {
+  appearance: button;
+  -webkit-appearance: button;
+}
+
+button,
+[role='button'] {
+  cursor: pointer;
+}
+
+svg {
+  display: block;
+  vertical-align: middle;
+}
+
+.before\:hidden::before {
+  display: none;
+}
+.h-6 {
+  height: 1.5rem;
+}
+.w-6 {
+  width: 1.5rem;
+}
+</style>
+
+<script>
+export default {
+  mounted() {
+    const initUserTheme = this.getTheme() || this.getMediaPreference()
+    this.setTheme(initUserTheme)
+  },
+
+  data() {
+    return {
+      userTheme: 'light-theme',
+      isDark: true
+    }
+  },
+
+  methods: {
+    toggleTheme() {
+      const activeTheme = localStorage.getItem('user-theme')
+      if (activeTheme === 'light-theme') {
+        this.setTheme('dark-theme')
+      } else {
+        this.setTheme('light-theme')
+      }
+    },
+
+    getTheme() {
+      return localStorage.getItem('user-theme')
+    },
+
+    setTheme(theme) {
+      localStorage.setItem('user-theme', theme)
+      this.userTheme = theme
+      document.documentElement.className = theme
+      this.isDark = !this.isDark
+    },
+
+    getMediaPreference() {
+      const hasDarkPreference = window.matchMedia(
+        '(prefers-color-scheme: dark)'
+      ).matches
+      if (hasDarkPreference) {
+        return 'dark-theme'
+      } else {
+        return 'light-theme'
+      }
+    }
+  }
+}
+</script>
diff --git a/src/components/PaneLeft.vue b/src/components/PaneLeft.vue
index 0df66359..3f535698 100644
--- a/src/components/PaneLeft.vue
+++ b/src/components/PaneLeft.vue
@@ -87,15 +87,18 @@ export default {
   scrollbar-width: none;
   border-bottom: 1px solid var(--c-white-dark);
 }
+
 .left-pane-tabs::-webkit-scrollbar {
   display: none;
 }
+
 .left-pane-tabs,
 .left-pane-contexts {
   padding-left: 1.5rem;
 }
+
 .left-pane-tab {
-  background-color: var(--c-white);
+  background-color: var(--background-primary-color);
   cursor: pointer;
   color: var(--c-text);
   font-family: var(--font-family-base);
@@ -104,21 +107,26 @@ export default {
   padding: 0.4rem 0.8rem;
   border-bottom: 3px solid transparent;
 }
+
 .disable {
   cursor: not-allowed;
 }
+
 .active {
   cursor: pointer;
 }
+
 .left-pane-tab:hover,
 .active {
   color: var(--c-brand-red);
   border-bottom-color: var(--c-brand-red);
 }
+
 .left-pane-contexts {
   height: 100vh;
   overflow: auto;
 }
+
 /* media queries */
 @media (max-width: 915px) {
   .left-pane-contexts {
@@ -127,6 +135,7 @@ export default {
     margin-bottom: 2.5rem;
   }
 }
+
 .download-n-colab {
   display: flex;
   align-items: center;
diff --git a/src/components/PaneRight.vue b/src/components/PaneRight.vue
index e18cf9ba..6cbb8a12 100644
--- a/src/components/PaneRight.vue
+++ b/src/components/PaneRight.vue
@@ -98,7 +98,7 @@ export default {
 .right-pane-tab {
   display: flex;
   place-items: center;
-  background-color: var(--c-white);
+  background-color: var(--background-color-primary);
   cursor: pointer;
   color: var(--c-text);
   font-family: var(--font-family-base);