implement dark mode (#4)

VivienLN · May 31, 2022 · 4347e78 · 4347e78
1 parent 1427900
commit 4347e78
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -8,10 +8,21 @@
     <link href="https://fonts.googleapis.com/css2?family=Signika:wght@500;700&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
+    <script>
+      // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+      window.updateThemeMode = function() {
+        if (localStorage.theme_mode === 'dark' || (!('theme_mode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+          document.documentElement.classList.add('dark');
+        } else {
+          document.documentElement.classList.remove('dark');
+        }
+      }
+      window.updateThemeMode();
+    </script>
   </head>
-  <body>
+  <body class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-50">
     <div id="app"></div>
     <script src="https://cdn.jsdelivr.net/npm/comfy.js@latest/dist/comfy.min.js"></script>
     <script type="module" src="/src/main.js"></script>
   </body>
-</html>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -136,27 +136,27 @@
 
     <!-- Commands -->
     <div class="flex justify-center gap-2 w-full text-tiny z-50 p-4">
-      <Button @click="nextStep" color="indigo">
+      <Button @click="nextStep" color="primary">
         <FastForwardIcon />
         Next
       </Button>
 
       <Button 
-        color="sky"
+        color="secondary"
         @click="showModal('showLeaderboardSession')"
       >
         <PrizeIcon />
         Classement
       </Button>
       <Button 
-        color="sky"
+        color="secondary"
         @click="showModal('showLeaderboardGlobal')"
       >
         <PrizeIcon />
         Classement général
       </Button>
       <Button 
-        color="sky"
+        color="secondary"
         @click="showModal('showSettings')"
       >
         <CogIcon />
@@ -171,9 +171,6 @@
     font-family: 'Signika', sans-serif;
     font-weight: 500;
   }
-  body {
-    background: #f2f2f2;
-  }
   .timer {
     margin-bottom: -2rem;
     position: relative;

diff --git a/src/components/Leaderboard.vue b/src/components/Leaderboard.vue
@@ -45,7 +45,7 @@
     <ul>
       <li 
         v-for="({userName, score, rank}, index) in data" 
-        class="py-2 px-3 grid grid-cols-12 gap-x-2 bg-white mb-3 rounded-md border-2 bordexr-gray-200 items-center text-small"
+        class="py-2 px-3 grid grid-cols-12 gap-x-2 bg-gray-100 mb-3 rounded-md border-2 items-center text-small"
         :class="`border-${getRankColor(rank, 200)}`"
       >
         <div class="col-span-1 text-center font-bold">
@@ -64,7 +64,7 @@
         </div>
       </li>
     </ul>
-    <Button class="text-tiny" color="sky" @click="reset">Reset</Button>
+    <Button class="text-tiny" color="secondary" @click="reset">Reset</Button>
   </div>
 </template>
 

diff --git a/src/components/Settings.vue b/src/components/Settings.vue
@@ -1,5 +1,6 @@
 <script>
   import Button from './ui/Button.vue';
+  import DarkModeSelect from './ui/DarkModeSelect.vue';
   import DefaultSettings from '../utils/DefaultSettings';
   import JSON5 from 'json5';
 
@@ -9,6 +10,7 @@
     ],
     components: {
       Button,
+      DarkModeSelect,
     },
 
     data() {
@@ -36,22 +38,27 @@
     <div class="grid grid-cols-6 gap-2">
       <label class="font-bold py-1" for="settings-channel">Nom de la chaîne</label>
       <div class="col-span-5">
-        <input id="settings-channel" v-model="channel" class="w-full rounded border border-slate-300 px-2 py-1" />
+        <input id="settings-channel" v-model="channel" class="w-full rounded border border-gray-400 dark:border-gray-900 dark:bg-gray-700 px-2 py-1 outline-primary-500" />
       </div>
 
       <label class="font-bold py-1" for="settings-timer">Durée des questions (secondes)</label>
       <div class="col-span-5">
-        <input id="settings-timer" v-model="timer" type="number" min="0" step="5" class="w-full rounded border border-slate-300 px-2 py-1" />
+        <input id="settings-timer" v-model="timer" type="number" min="0" step="5" class="w-full rounded border border-gray-400 dark:border-gray-900 dark:bg-gray-700 px-2 py-1 outline-primary-500" />
         <em>(Utilisé seulement pour afficher le timer des questions. Tant que vous ne révélez pas la réponse, les viewers peuvent jouer)</em>
       </div>
 
+      <label class="font-bold py-1" for="settings-thememode">Mode sombre / clair</label>
+      <div class="col-span-5">
+        <DarkModeSelect id="settings-thememode" />
+      </div>
+
       <label class="font-bold py-1" for="settings-question">Questions</label>
       <div class="col-span-5">
-        <textarea id="settings-question" cols="80" rows="20" v-model="questions" class="w-full rounded border border-slate-300 px-2 py-1 font-mono" />
+        <textarea id="settings-question" cols="80" rows="20" v-model="questions" class="w-full rounded border border-gray-400 dark:border-gray-900 dark:bg-gray-700 px-2 py-1 font-mono outline-primary-500" />
       </div>
 
       <div class="col-start-6">
-        <Button class="w-full" color="indigo" @click="save">Save</Button>
+        <Button class="w-full" color="primary" @click="save">Save</Button>
       </div>
     </div>
   </div>

diff --git a/src/components/Timer.vue b/src/components/Timer.vue
@@ -52,17 +52,16 @@
       'started': isStarted,
       'scale-75': !isStarted,
       'scale-100': isStarted,
-      'text-indigo-500': time >0, 
-      'text-rose-500': time <= 0
+      'text-primary-500 dark:text-primary-300': time >0, 
+      'text-rose-500 dark:text-rose-400': time <= 0
     }"
   >
     <div class="relative">
-      <svg viewBox="0 0 100 100" class="circle mx-auto -rotate-90">
+      <svg viewBox="0 0 100 100" class="circle mx-auto -rotate-90 fill-gray-50 dark:fill-gray-800">
         <circle 
           cx="50" 
           cy="50" 
           r="46" 
-          fill="#fff" 
           stroke="currentColor"
           stroke-width="6"
           stroke-dasharray="290"

diff --git a/src/components/questions/MCQ.vue b/src/components/questions/MCQ.vue
@@ -96,20 +96,20 @@
 
 <template>
   <div class="text-center">
-    <h2 class="rounded-md text-xl text-indigo-700 p-4 drop-shadow-lg bg-white mb-4 font-bold border-b-6 border-gray-200">
+    <h2 class="rounded-md text-xl text-primary-700 p-4 pt-6 drop-shadow-lg bg-gray-50 mb-4 font-bold border-b-6 border-gray-200 dark:text-primary-300 dark:bg-gray-800 dark:border-gray-900">
       {{ question.label }}
     </h2>
     <ul v-if="step>=1" class="grid grid-cols-2 gap-3">
       <li v-for="({ users, letter, label, is_right }, index) in computedAnswers">
         <div
           class="rounded-md p-2 drop-shadow-lg grid grid-cols-6 items-center gap-1 border-b-6 h-full"
           :class="{
-            ['bg-white border-gray-200']: (step < 2 || !is_right),
-            ['bg-emerald-400 border-emerald-500 font-bold']: (step>= 2 && is_right),
+            ['bg-gray-50 border-gray-200 dark:bg-gray-800 dark:border-gray-900']: (step < 2 || !is_right),
+            ['bg-correct-400 border-correct-500 dark:bg-correct-400 dark:border-correct-400 font-bold']: (step>= 2 && is_right),
             'opacity-50': (step>= 2 && !is_right)
           }"
         >
-          <div class="letter bg-gray-100 font-bold rounded-md" :class="{'text-emerald-600':(step>= 2 && is_right)}">
+          <div class="letter bg-gray-200 font-bold rounded-md dark:bg-gray-700" :class="{'text-correct-600 dark:text-correct-500':(step>= 2 && is_right)}">
             {{ letter }}
           </div>
           <div class="answer-text col-span-4">

diff --git a/src/components/ui/Button.vue b/src/components/ui/Button.vue
@@ -15,11 +15,18 @@
         text-${color}-100 
         border-${color}-600
         hover:bg-${color}-400
-        hover:text-white 
+        hover:text-gray-50 
         hover:border-${color}-500
         active:bg-${color}-300
-        active:text-white  
-        active:border-${color}-400`
+        active:text-gray-50  
+        active:border-${color}-400
+        dark:bg-${color}-600 
+        dark:text-${color}-100 
+        dark:border-${color}-700
+        dark:hover:bg-${color}-700
+        dark:border-${color}-800
+        dark:active:bg-${color}-400
+        dark:active:border-${color}-500`
       ]: color,
     }"
     v-bind="$attrs"

diff --git a/src/components/ui/DarkModeSelect.vue b/src/components/ui/DarkModeSelect.vue
@@ -0,0 +1,35 @@
+<script>
+  export default {
+    computed: {
+      themeMode: {
+        get() {
+          return (localStorage.theme_mode === 'dark' || (!('theme_mode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) ? 'dark' : 'light';
+        },
+        set(value) {
+          if(value !== '') {
+            localStorage.theme_mode = value;
+          } else {
+            localStorage.removeItem('theme_mode');
+          }
+          window.updateThemeMode();
+        }
+      }
+    },
+  }
+</script>
+
+<template>
+  <select
+    class="w-full rounded border border-gray-300 dark:border-gray-900 px-2 py-1 outline-primary-500 dark:bg-gray-700"
+    v-model="themeMode"
+    v-bind="$attrs"
+  >
+    <option value="">Par défaut</option>
+    <option value="dark">Sombre</option>
+    <option value="light">Clair</option>
+  </select>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/ui/Modal.vue b/src/components/ui/Modal.vue
@@ -16,10 +16,10 @@
 
 <template>
   <div class="absolute inset-0 z-40">
-    <div class="absolute inset-4 rounded-md border-b-4 border-gray-200 bg-white drop-shadow-lg p-4 flex flex-col items-stretch">
+    <div class="absolute inset-4 rounded-md border-b-4 border-gray-200 bg-gray-50 dark:border-gray-900 dark:bg-gray-800 drop-shadow-lg p-4 flex flex-col items-stretch">
       <div class="flex justify-between items-start px-2 pb-4">
-        <h2 class="font-bold text-indigo-700">{{ title }}</h2>
-        <Button class="text-tiny" color="slate" @click="this.$emit('close')">&times; Fermer</Button>
+        <h2 class="font-bold text-primary-700 dark:text-primary-400">{{ title }}</h2>
+        <Button class="text-tiny" color="gray" @click="this.$emit('close')">&times; Fermer</Button>
       </div>
       <div class="grow overflow-auto h-full p-2">
         <slot></slot>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,4 +1,7 @@
+const colors = require('tailwindcss/colors');
+
 module.exports = {
+  darkMode: 'class',
   content: [
     "./index.html",
     "./src/**/*.{vue,js,ts,jsx,tsx}",
@@ -11,6 +14,18 @@ module.exports = {
       base: "2rem",
       xl: '2.8rem',
     },
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      primary: colors.indigo,
+      secondary: colors.sky,
+      gray: colors.gray,
+      amber: colors.amber,
+      slate: colors.slate,
+      orange: colors.orange,
+      correct: colors.emerald,
+      rose: colors.rose
+    },
     spacing: {
       '0': '0',
       '1': '.5rem',
@@ -45,7 +60,7 @@ module.exports = {
   safelist: [
     {
       pattern: /(bg|border|text)-[a-z-]+-[0-9]+/,
-      variants: ['hover', 'focus', 'active'],
+      variants: ['hover', 'focus', 'active', 'dark', 'dark:hover', 'dark:active'],
     },
   ],
 }