feat(instance-chooser): add dark mode support

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2701>

front/src/components/auth/LoginForm.vue

@@ -77,14 +77,22 @@ const submit = async () => {
 </script>
 
 <template>
-  <form class="ui form" @submit.prevent="submit()">
+  <form
-    <div v-if="errors.length > 0" role="alert" class="ui negative message">
+    class="ui form"
+    @submit.prevent="submit()"
+  >
+    <div
+      v-if="errors.length > 0"
+      role="alert"
+      class="ui negative message"
+    >
       <h4 class="header">
         {{ $t('components.auth.LoginForm.header.loginFailure') }}
       </h4>
       <ul class="list">
         <li
-          v-if="errors[0] == 'invalid_credentials' && $store.state.instance.settings.moderation.signup_approval_enabled.value">
+          v-if="errors[0] == 'invalid_credentials' && $store.state.instance.settings.moderation.signup_approval_enabled.value"
+        >
           {{ $t('components.auth.LoginForm.help.approvalRequired') }}
         </li>
         <li v-else-if="errors[0] == 'invalid_credentials'">
@@ -106,18 +114,33 @@ const submit = async () => {
             </router-link>
           </template>
         </label>
-        <input id="username-field" ref="username" v-model="credentials.username" required name="username" type="text"
+        <input
-          autofocus :placeholder="labels.usernamePlaceholder">
+          id="username-field"
+          ref="username"
+          v-model="credentials.username"
+          required
+          name="username"
+          type="text"
+          autofocus
+          :placeholder="labels.usernamePlaceholder"
+        >
       </div>
       <div class="field">
         <label for="password-field">
           {{ $t('components.auth.LoginForm.label.password') }}
           <span class="middle pipe symbol" />
-          <router-link tabindex="1" :to="{ name: 'auth.password-reset', query: { email: credentials.username } }">
+          <router-link
+            tabindex="1"
+            :to="{ name: 'auth.password-reset', query: { email: credentials.username } }"
+          >
             {{ $t('components.auth.LoginForm.link.resetPassword') }}
           </router-link>
         </label>
-        <password-input v-model="credentials.password" field-id="password-field" required />
+        <password-input
+          v-model="credentials.password"
+          field-id="password-field"
+          required
+        />
       </div>
     </template>
     <template v-else>
@@ -125,7 +148,10 @@ const submit = async () => {
         {{ $t('components.auth.LoginForm.message.redirect', { domain: $store.getters['instance/domain'] }) }}
       </p>
     </template>
-    <button :class="['ui', { 'loading': isLoading }, 'right', 'floated', buttonClasses, 'button']" type="submit">
+    <button
+      :class="['ui', { 'loading': isLoading }, 'right', 'floated', buttonClasses, 'button']"
+      type="submit"
+    >
       {{ $t('components.auth.LoginForm.button.login') }}
     </button>
   </form>

front/src/views/ChooseInstance.vue

@@ -57,7 +57,14 @@ const isTauriInstance = computed(() => store.getters['instance/url'].href === TA
 
 <template>
   <div class="instance-chooser">
-    <img src="../assets/logo/logo-full-500.png">
+    <img
+      class="light-logo"
+      src="../assets/logo/logo-full-500.png"
+    >
+    <img
+      class="dark-logo"
+      src="../assets/logo/logo-full-500-white.png"
+    >
 
     <div class="card">
       <h3 class="header">
@@ -100,7 +107,7 @@ const isTauriInstance = computed(() => store.getters['instance/url'].href === TA
                 <i class="external icon" />
               </a>
             </i18n-t>
-            {{ t('', {url: store.state.instance.instanceUrl, hostname: store.getters['instance/domain']}) }}
+            {{ t('', { url: store.state.instance.instanceUrl, hostname: store.getters['instance/domain'] }) }}
           </p>
           <p
             v-else
@@ -120,7 +127,7 @@ const isTauriInstance = computed(() => store.getters['instance/url'].href === TA
               >
               <button
                 type="submit"
-                :class="['ui', 'icon', {loading: isLoading}, 'button']"
+                :class="['ui', 'icon', { loading: isLoading }, 'button']"
               >
                 {{ t('views.ChooseInstance.button.submit') }}
               </button>
@@ -172,7 +179,7 @@ const isTauriInstance = computed(() => store.getters['instance/url'].href === TA
   align-items: center;
   justify-content: center;
 
-  > .card {
+  >.card {
     margin-top: 2rem;
     max-width: 30rem;
     width: 100%;
@@ -189,4 +196,16 @@ const isTauriInstance = computed(() => store.getters['instance/url'].href === TA
     }
   }
 }
+
+.theme-dark .instance-chooser>.card {
+  background: var(--sidebar-background);
+}
+
+.theme-dark .instance-chooser>.light-logo {
+  display: none;
+}
+
+.theme-light .instance-chooser>.dark-logo {
+  display: none;
+}
 </style>