style: add theme images

ICIJ · Oct 3, 2024 · 5aa038c · 5aa038c
1 parent 4ee1ea6
commit 5aa038c
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 3 deletions.
diff --git a/src/assets/images/illustrations/theme-dark.png b/src/assets/images/illustrations/theme-dark.png
diff --git a/src/assets/images/illustrations/theme-light.png b/src/assets/images/illustrations/theme-light.png
diff --git a/src/components/Settings/SettingsAppearance/SettingsAppearanceTheme.vue b/src/components/Settings/SettingsAppearance/SettingsAppearanceTheme.vue
@@ -28,7 +28,7 @@ const imageClassList = computed(() => {
       <phosphor-icon :name="icon" />
       <span class="text-nowrap">{{ label }}</span></span
     >
-    <image-mode :image-class="imageClassList">
+    <image-mode :image-class="imageClassList" width="200px">
       <image-mode-source :src="thumbnail" />
     </image-mode>
   </div>

diff --git a/src/views/Settings/SettingsViewAppearance.vue b/src/views/Settings/SettingsViewAppearance.vue
@@ -2,6 +2,8 @@
 import { useI18n } from 'vue-i18n'
 import { ref, onBeforeMount, computed, watch } from 'vue'
 
+import themeLight from '@/assets/images/illustrations/theme-light.png'
+import themeDark from '@/assets/images/illustrations/theme-dark.png'
 import SettingsAppearanceRadioGroup from '@/components/Settings/SettingsAppearance/SettingsAppearanceRadioGroup'
 import SettingsViewLayout from '@/views/Settings/SettingsViewLayout'
 
@@ -27,13 +29,13 @@ function retrieveThemes() {
       icon: 'sun',
       name: DEFAULT_THEME,
       label: 'Light mode',
-      thumbnail: 'https://placehold.co/169x95'
+      thumbnail: themeLight
     },
     {
       icon: 'moon',
       name: 'dark',
       label: 'Dark mode',
-      thumbnail: 'https://placehold.co/169x95'
+      thumbnail: themeDark
     }
   ]
 }