#211 dark mode - finishing touches

assets/dark.scss

@@ -10,6 +10,7 @@ body[data-theme="dark"] {
   a { color: lighten($primary, 40%); }
   a:hover { color: lighten($primary, 30%); }
   .text-dark { color: $light !important; }
+  .btn-primary { color: $light; }
   .btn-outline-primary { color: $light; &:hover {color: $light;}}
   .btn-outline-success { color: lighten($success, 20%); &:hover {color: $light;} }
   .alert-info { background-color: darken($info, 35%); border-color: darken($info, 25%); color: $light; }

components/ModeSwitch.vue

@@ -4,6 +4,7 @@
             <label>
                 <input class="form-check-input" type="checkbox" v-model="isDark">
                 <Icon :v="isDark ? 'moon' : 'sun'"/>
+                {{ $t('mode.' + (isDark ? 'dark' : 'light')) }}
             </label>
         </div>
     </div>

locale/de/translations.suml

@@ -492,6 +492,10 @@ images:
 error:
     generic: 'Something went wrong, please try again…'  # TODO
 
+mode:
+    dark: 'Dark mode'  # TODO
+    light: 'Light mode'
+
 flags:
     Abrosexual: 'Abrosexuell'
     Achillean: 'Achillean'

locale/en/translations.suml

@@ -567,3 +567,7 @@ images:
 
 error:
     generic: 'Something went wrong, please try again…'
+
+mode:
+    dark: 'Dark mode'
+    light: 'Light mode'

locale/es/translations.suml

@@ -502,6 +502,10 @@ images:
 error:
     generic: 'Algo salió mal. Por favor, vuelve a intentarlo…'
 
+mode:
+    dark: 'Dark mode'  # TODO
+    light: 'Light mode'
+
 flags:
     Abroromantic: 'Abrorrománti{inflection_c}'
     Abrosexual: 'Abrosexual'

locale/fr/translations.suml

@@ -483,6 +483,10 @@ images:
 error:
     generic: 'Quelque chose s''est rompu, essayez encore s''il vous plaît…'
 
+mode:
+    dark: 'Dark mode'  # TODO
+    light: 'Light mode'
+
 flags:
     Abroromantic: 'Abroromantyczn{adjective_n}'
     Abrosexual: 'Abroseksualn{adjective_n}'

locale/nl/translations.suml

@@ -496,6 +496,10 @@ images:
 error:
     generic: 'Er is iets misgegaan, probeer het opnieuw…'
 
+mode:
+    dark: 'Dark mode'  # TODO
+    light: 'Light mode'
+
 flags:
     Abroromantic: 'Abroromantisch'
     Abrosexual: 'Abroseksueel'

locale/pl/translations.suml

@@ -1101,6 +1101,10 @@ images:
 error:
     generic: 'Coś poszło nie tak, spróbuj ponownie…'
 
+mode:
+    dark: 'Tryb nocny'
+    light: 'Tryb dzienny'
+
 flags:
     Abroromantic: 'Abroromantyczn{adjective_n}'
     Abrosexual: 'Abroseksualn{adjective_n}'

locale/pt/translations.suml

@@ -500,6 +500,10 @@ images:
 error:
     generic: 'Alguma coisa deu errado, tente novamente'
 
+mode:
+    dark: 'Dark mode'  # TODO
+    light: 'Light mode'
+
 flags:
     Abroromantic: 'Abrorromânti{inflection_c}'
     Abrosexual: 'Abrossexual'

locale/ru/translations.suml

@@ -1072,6 +1072,10 @@ images:
 error:
     generic: 'Coś poszło nie tak, spróbuj ponownie…'
 
+mode:
+    dark: 'Dark mode'  # TODO
+    light: 'Light mode'
+
 flags:
     Abroromantic: 'Abroromantyczn{adjective_n}'
     Abrosexual: 'Abroseksualn{adjective_n}'

locale/yi/translations.suml

@@ -513,6 +513,10 @@ images:
 error:
     generic: 'Something went wrong, please try again…'
 
+mode:
+    dark: 'Dark mode'  # TODO
+    light: 'Light mode'
+
 flags:
     Abroromantic: 'אַבראָראָמאַנטיש'
     Abrosexual: 'אַבראָסעקסועל'

locale/zh/translations.suml

@@ -481,6 +481,10 @@ images:
 error:
     generic: '出了點問題，請重試...'
 
+mode:
+    dark: 'Dark mode'  # TODO
+    light: 'Light mode'
+
 flags:
     Abrosexual: '嫩性戀'
     Abroromantic: '嫩浪漫傾向'

routes/homepage.vue

@@ -8,6 +8,8 @@
         <section>
             <T>home.about</T>
 
+            <ModeSwitch class="mt-3"/>
+
             <div v-if="!user && $t('profile.banner', {}, false)" class="alert alert-info">
                 <nuxt-link :to="'/' + config.user.route" class="float-end btn btn-primary m-2 me-0">
                     <Icon v="id-card"/>