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 <[email protected]>
Co-authored-by: vfdev <[email protected]>

Author: 3 people

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,43 +35,61 @@
   --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);
   line-height: 1.5;
   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,
 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);

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 {

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);

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>

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;
 }

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;

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;

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;