Complete dark mode

src/App.vue

@@ -1,5 +1,5 @@
 <template>
- <div id="app" class="antialiased flex h-screen">
+ <div id="app" class="antialiased flex h-screen dark:bg-gray-900">
  <Navigation />
  <router-view />
  </div>

src/components/Customizer.vue

@@ -1,9 +1,9 @@
 <template>
  <section
- class="flex flex-col flex-shrink-0 overflow-y-hidden bg-gray-100 border-l border-gray-300 w-56 p-2"
+ class="flex flex-col flex-shrink-0 overflow-y-hidden bg-gray-100 dark:bg-gray-800 border-l border-gray-300 dark:border-gray-700 w-56 p-2"
  >
  <div class="flex justify-center items-center h-screen" v-if="isSelected">
- <p class="text-xs text-gray-800">No selection</p>
+ <p class="text-xs text-gray-800 dark:text-gray-500">No selection</p>
  </div>
  <div v-else class="flex flex-col overflow-y-hidden flex-grow">
  <Preview />
@@ -76,9 +76,17 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .prism-editor-wrapper {
- @apply h-auto;
+ @apply h-auto !important;
  @apply text-xs;
+ @apply rounded;
+}
+
+@media (prefers-color-scheme: dark) {
+ .prism-editor__line-numbers,
+ .prism-editor-wrapper .language-markup {
+ @apply bg-gray-900 !important;
+ }
 }
 </style>

src/components/General.vue

@@ -1,23 +1,25 @@
 <template>
  <div class="flex w-full">
  <div class="w-1/3">
- <h2 class="text-xs text-gray-800 font-semibold tracking-wide">
+ <h2
+ class="text-xs text-gray-800 dark:text-gray-600 font-semibold tracking-wide"
+ >
  General
  </h2>
- <h3 class="text-xs text-gray-600">
+ <h3 class="text-xs text-gray-600 dark:text-gray-500">
  Changes will be applicable directly into the application itself.
  </h3>
  </div>
  <div class="w-2/3 space-y-5">
  <label class="flex flex-col space-y-1">
  <span
- class="text-xs text-gray-800 hover:text-indigo-600 font-semibold transition duration-150 ease-in-out"
+ class="text-xs text-gray-800 dark:text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-500 font-semibold transition duration-150 ease-in-out"
  >Default storage location</span
  >
  <div class="flex">
  <span
  tabindex="0"
- class="flex items-center text-xs bg-white hover:bg-gray-100 text-gray-800 font-semibold px-2 border border-r-0 border-gray-400 rounded rounded-r-none focus:outline-none focus:shadow-outline transition duration-150 ease-in-out"
+ class="flex items-center text-xs bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-800 dark:text-gray-500 font-semibold px-2 border border-r-0 border-gray-400 dark:border-gray-700 rounded rounded-r-none focus:outline-none focus:shadow-outline transition duration-150 ease-in-out"
  >
  <svg
  class="w-4 h-4 mr-1 stroke-current stroke-2"
@@ -39,21 +41,21 @@
  name="storage-location"
  />
  <input
- class="w-full max-w-md bg-white text-sm text-gray-900 border border-gray-400 rounded rounded-l-none appearance-none leading-normal placeholder-gray-700 focus:outline-none focus:shadow-outline pl-2"
+ class="w-full max-w-md bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-500 border border-gray-400 dark:border-gray-700 rounded rounded-l-none appearance-none leading-normal placeholder-gray-700 focus:outline-none focus:shadow-outline pl-2"
  type="text"
  placeholder="/Users/mazik/Desktop/untitled"
  />
  </div>
  </label>
  <label class="flex flex-col space-y-1">
  <span
- class="text-xs text-gray-800 hover:text-indigo-600 font-semibold transition duration-150 ease-in-out"
+ class="text-xs text-gray-800 dark:text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-500 font-semibold transition duration-150 ease-in-out"
  >Default bookmark location</span
  >
  <div class="flex">
  <span
  tabindex="0"
- class="flex items-center text-xs bg-white hover:bg-gray-100 text-gray-800 font-semibold px-2 border border-r-0 border-gray-400 rounded rounded-r-none focus:outline-none focus:shadow-outline transition duration-150 ease-in-out"
+ class="flex items-center text-xs bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-800 dark:text-gray-500 font-semibold px-2 border border-r-0 border-gray-400 dark:border-gray-700 rounded rounded-r-none focus:outline-none focus:shadow-outline transition duration-150 ease-in-out"
  >
  <svg
  class="w-4 h-4 mr-1 stroke-current stroke-2"
@@ -75,20 +77,22 @@
  name="storage-location"
  />
  <input
- class="w-full max-w-md bg-white text-sm text-gray-900 border border-gray-400 rounded rounded-l-none appearance-none leading-normal placeholder-gray-700 focus:outline-none focus:shadow-outline pl-2"
+ class="w-full max-w-md bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-500 border border-gray-400 dark:border-gray-700 rounded rounded-l-none appearance-none leading-normal placeholder-gray-700 focus:outline-none focus:shadow-outline pl-2"
  type="text"
  placeholder="/Users/mazik/Desktop/untitled"
  />
  </div>
  </label>
  <label class="flex flex-col">
  <span
- class="text-xs text-gray-800 hover:text-indigo-600 font-semibold transition duration-150 ease-in-out"
+ class="text-xs text-gray-800 dark:text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-500 font-semibold transition duration-150 ease-in-out"
  >Boot</span
  >
  <div>
  <input type="checkbox" name="startup" />
- <span class="text-xs text-gray-800 ml-2">Login at startup</span>
+ <span class="text-xs text-gray-800 dark:text-gray-500 ml-2"
+ >Login at startup</span
+ >
  </div>
  </label>
  </div>

src/components/Icon.vue

@@ -1,6 +1,6 @@
 <template>
  <button
- class="relative flex flex-col items-center w-20 h-20 m-2 p-2 bg-gray-100 hover:bg-white hover:shadow-outline text-gray-700 rounded focus:bg-white focus:outline-none focus:shadow-outline transition duration-150 ease-in-out"
+ class="relative flex flex-col items-center w-20 h-20 m-2 p-2 bg-gray-100 hover:bg-white hover:shadow-outline dark:bg-gray-800 dark:hover:bg-gray-900 text-gray-700 dark:text-gray-500 rounded focus:bg-white focus:outline-none focus:shadow-outline dark:focus:bg-gray-900 transition duration-150 ease-in-out"
  >
  <Star />
  <svg

src/components/Listing.vue

@@ -1,14 +1,14 @@
 <template>
  <section
- class="flex flex-col flex-shrink-0 bg-gray-100 border-r border-gray-300 p-2"
+ class="flex flex-col flex-shrink-0 bg-gray-100 dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 p-2"
  >
  <div class="overflow-y-scroll">
  <h2 class="text-xs text-gray-600 font-semibold tracking-wide">
  Icon Pack
  </h2>
  <ul class="space-y-2 p-2">
  <li
- class="text-gray-800 hover:text-indigo-600 transition duration-150 ease-in-out"
+ class="text-gray-800 dark:text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out"
  >
  <router-link class="flex items-center" to="/download/free">
  <svg
@@ -30,7 +30,7 @@
  </router-link>
  </li>
  <li
- class="text-gray-800 hover:text-indigo-600 transition duration-150 ease-in-out"
+ class="text-gray-800 dark:text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out"
  >
  <router-link class="flex items-center" to="/download/premium">
  <svg

src/components/Navigation.vue

@@ -1,6 +1,6 @@
 <template>
  <section
- class="flex flex-col justify-between items-center bg-blue-900 border-r border-blue-300 text-blue-300 p-2"
+ class="flex flex-col justify-between items-center bg-blue-900 border-r border-blue-300 text-blue-300 p-2 dark:bg-gray-900 dark:border-gray-700"
  >
  <ul class="flex flex-col items-center space-y-6">
  <li class="text-blue-100 bg-blue-800 rounded-lg p-2 mb-4">