mirror of
https://github.com/LizardByte/Sunshine.git
synced 2026-08-07 10:20:46 +00:00
Noklef
158 lines
7.2 KiB
Vue
158 lines
7.2 KiB
Vue
<script setup>
|
|
import { loadAutoTheme, setupThemeToggleListener } from './theme'
|
|
import { onMounted } from 'vue'
|
|
import {
|
|
CloudMoon,
|
|
CloudRain,
|
|
Coffee,
|
|
Contrast,
|
|
Droplet,
|
|
Flame,
|
|
Flower,
|
|
Flower2,
|
|
Ghost,
|
|
Layers,
|
|
Milk,
|
|
MonitorSmartphone,
|
|
Moon,
|
|
Mountain,
|
|
Shuffle,
|
|
Sparkles,
|
|
Sprout,
|
|
Sun,
|
|
Sunrise,
|
|
Sunset,
|
|
TreePine,
|
|
Trees,
|
|
Waves,
|
|
} from '@lucide/vue'
|
|
|
|
onMounted(() => {
|
|
loadAutoTheme()
|
|
setupThemeToggleListener()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="dropdown bd-mode-toggle">
|
|
<a class="nav-link dropdown-toggle d-flex align-items-center"
|
|
id="bd-theme"
|
|
type="button"
|
|
aria-expanded="false"
|
|
data-bs-toggle="dropdown"
|
|
aria-label="{{ $t('navbar.toggle_theme') }} ({{ $t('navbar.theme_auto') }})">
|
|
<span class="theme-icon-active">
|
|
<MonitorSmartphone :size="18" class="icon"></MonitorSmartphone>
|
|
</span>
|
|
<span id="bd-theme-text">{{ $t('navbar.toggle_theme') }}</span>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-end theme-menu" aria-labelledby="bd-theme-text">
|
|
<li class="theme-menu-full">
|
|
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
|
|
<MonitorSmartphone :size="18" class="theme-icon icon"></MonitorSmartphone>
|
|
{{ $t('navbar.theme_auto') }}
|
|
</button>
|
|
<button type="button" id="bd-theme-random" class="dropdown-item d-flex align-items-center">
|
|
<Shuffle :size="18" class="theme-icon icon"></Shuffle>
|
|
{{ $t('navbar.theme_random') }}
|
|
</button>
|
|
</li>
|
|
<!-- Dark Themes -->
|
|
<li class="theme-menu-group">
|
|
<h6 class="dropdown-header">{{ $t('navbar.theme_group_dark') }}</h6>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
|
|
<Moon :size="18" class="theme-icon icon"></Moon>
|
|
{{ $t('navbar.theme_dark') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dracula" aria-pressed="false">
|
|
<Ghost :size="18" class="theme-icon icon"></Ghost>
|
|
{{ $t('navbar.theme_dracula') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="mocha" aria-pressed="false">
|
|
<Coffee :size="18" class="theme-icon icon"></Coffee>
|
|
{{ $t('navbar.theme_mocha') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ember" aria-pressed="false">
|
|
<Flame :size="18" class="theme-icon icon"></Flame>
|
|
{{ $t('navbar.theme_ember') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose-pine" aria-pressed="false">
|
|
<TreePine :size="18" class="theme-icon icon"></TreePine>
|
|
{{ $t('navbar.theme_rose_pine') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="moonlight" aria-pressed="false">
|
|
<CloudMoon :size="18" class="theme-icon icon"></CloudMoon>
|
|
{{ $t('navbar.theme_moonlight') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="slate" aria-pressed="false">
|
|
<Layers :size="18" class="theme-icon icon"></Layers>
|
|
{{ $t('navbar.theme_slate') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="midnight" aria-pressed="false">
|
|
<CloudRain :size="18" class="theme-icon icon"></CloudRain>
|
|
{{ $t('navbar.theme_midnight') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="nord" aria-pressed="false">
|
|
<Mountain :size="18" class="theme-icon icon"></Mountain>
|
|
{{ $t('navbar.theme_nord') }}
|
|
</button>
|
|
</li>
|
|
<!-- Light Themes -->
|
|
<li class="theme-menu-group">
|
|
<h6 class="dropdown-header">{{ $t('navbar.theme_group_light') }}</h6>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
|
|
<Sun :size="18" class="theme-icon icon"></Sun>
|
|
{{ $t('navbar.theme_light') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="alucard" aria-pressed="false">
|
|
<Droplet :size="18" class="theme-icon icon"></Droplet>
|
|
{{ $t('navbar.theme_alucard') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="latte" aria-pressed="false">
|
|
<Milk :size="18" class="theme-icon icon"></Milk>
|
|
{{ $t('navbar.theme_latte') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ember-light" aria-pressed="false">
|
|
<Sunset :size="18" class="theme-icon icon"></Sunset>
|
|
{{ $t('navbar.theme_ember_light') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose-pine-dawn" aria-pressed="false">
|
|
<Sprout :size="18" class="theme-icon icon"></Sprout>
|
|
{{ $t('navbar.theme_rose_pine_dawn') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="sunshine" aria-pressed="false">
|
|
<Sunrise :size="18" class="theme-icon icon"></Sunrise>
|
|
{{ $t('navbar.theme_sunshine') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="indigo" aria-pressed="false">
|
|
<Sparkles :size="18" class="theme-icon icon"></Sparkles>
|
|
{{ $t('navbar.theme_indigo') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ocean" aria-pressed="false">
|
|
<Waves :size="18" class="theme-icon icon"></Waves>
|
|
{{ $t('navbar.theme_ocean') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="forest" aria-pressed="false">
|
|
<Trees :size="18" class="theme-icon icon"></Trees>
|
|
{{ $t('navbar.theme_forest') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose" aria-pressed="false">
|
|
<Flower :size="18" class="theme-icon icon"></Flower>
|
|
{{ $t('navbar.theme_rose') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="lavender" aria-pressed="false">
|
|
<Flower2 :size="18" class="theme-icon icon"></Flower2>
|
|
{{ $t('navbar.theme_lavender') }}
|
|
</button>
|
|
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="monochrome" aria-pressed="false">
|
|
<Contrast :size="18" class="theme-icon icon"></Contrast>
|
|
{{ $t('navbar.theme_monochrome') }}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|