Browse Source

chore(gui-v2): add dark styles for language switcher

pull/2722/head
braks 2 years ago
parent
commit
31b65555bf
  1. 12
      packages/nc-gui-v2/components/general/Language.vue
  2. 3
      packages/nc-gui-v2/windi.config.ts

12
packages/nc-gui-v2/components/general/Language.vue

@ -38,18 +38,18 @@ onMounted(() => {
<template #activator="{ props }">
<MaterialSymbolsTranslate class="md:text-xl cursor-pointer" @click="props.onClick" />
</template>
<v-list class="min-w-50 max-h-90vh overflow-auto !py-0 scrollbar-thin-primary">
<v-list class="scrollbar min-w-50 max-h-90vh overflow-auto !py-0 dark:(!bg-gray-800 !text-white)">
<v-list-item
v-for="lang of languages"
:key="lang.value"
:class="lang === locale ? '!bg-primary/10 text-primary' : ''"
:class="lang === locale ? '!bg-primary/10 text-primary dark:(!bg-gray-700 !text-secondary)' : ''"
class="!min-h-8 group"
:value="lang"
@click="changeLanguage(lang)"
>
<v-list-item-subtitle
:class="lang === locale ? '!font-semibold' : ''"
class="capitalize md:(!leading-8) group-hover:(text-primary font-semibold)"
class="capitalize md:(!leading-8) group-hover:(text-primary font-semibold) dark:(group-hover:text-secondary)"
>
{{ Language[lang] || lang }}
</v-list-item-subtitle>
@ -69,3 +69,9 @@ onMounted(() => {
</v-list>
</v-menu>
</template>
<style scoped>
.scrollbar {
@apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-primary scrollbar-track-white dark:(!scrollbar-track-gray-900);
}
</style>

3
packages/nc-gui-v2/windi.config.ts

@ -42,7 +42,8 @@ export default defineConfig({
shortcuts: {
'color-transition': 'transition-color duration-100 ease-in',
'scrollbar-thin-primary': 'scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-primary scrollbar-track-white',
'scrollbar-thin-primary':
'scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-primary scrollbar-track-white dark:(!scrollbar-track-black)',
},
theme: {

Loading…
Cancel
Save