fix: color mode settings button (#648)

This commit is contained in:
Joaquín Sánchez 2022-12-29 20:27:11 +01:00 committed by GitHub
parent 87eebd520e
commit 524f7005aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 62 additions and 12 deletions

View File

@ -12,19 +12,21 @@ function setColorMode(mode: ColorMode) {
<div flex="~ gap4" w-full>
<button
btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
:tabindex="colorMode.value === 'dark' ? 0 : -1"
:class="colorMode.value === 'dark' ? 'pointer-events-none' : 'filter-saturate-0'"
@click="setColorMode('dark')"
>
<div i-ri:moon-line />
Dark Mode
{{ $t('settings.interface.dark_mode') }}
</button>
<button
btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
:tabindex="colorMode.value === 'light' ? 0 : -1"
:class="colorMode.value === 'light' ? 'pointer-events-none' : 'filter-saturate-0'"
@click="setColorMode('light')"
>
<div i-ri:sun-line />
Light Mode
{{ $t('settings.interface.light_mode') }}
</button>
</div>
</template>

View File

@ -225,8 +225,10 @@
},
"interface": {
"color_mode": "Color Mode",
"dark_mode": "Dark Mode",
"font_size": "Font Size",
"label": "Interface"
"label": "Interface",
"light_mode": "Light Mode"
},
"language": {
"display_language": "Display Language",
@ -251,6 +253,8 @@
},
"select_a_settings": "Select a settings",
"users": {
"export": "Export User Tokens",
"import": "Import User Tokens",
"label": "Logged in users"
}
},

View File

@ -225,8 +225,10 @@
},
"interface": {
"color_mode": "Color Mode",
"dark_mode": "Dark Mode",
"font_size": "Font Size",
"label": "Interface"
"label": "Interface",
"light_mode": "Light Mode"
},
"language": {
"display_language": "Display Language",
@ -251,6 +253,8 @@
},
"select_a_settings": "Select a settings",
"users": {
"export": "Export User Tokens",
"import": "Import User Tokens",
"label": "Logged in users"
}
},

View File

@ -205,11 +205,49 @@
"search_desc": "Buscar personas y etiquetas"
},
"settings": {
"about": {
"label": "Acerca de"
},
"feature_flags": {
"avatar_on_avatar": "Avatar en Avatar",
"github_cards": "GitHub Cards",
"user_picker": "User Picker",
"virtual_scroll": "Virtual Scrolling"
"github_cards": "Tarjetas GitHub",
"title": "Características experimentales",
"user_picker": "Selector de usuarios",
"virtual_scroll": "Desplazamiento virtual"
},
"interface": {
"color_mode": "Modos de color",
"dark_mode": "Modo Oscuro",
"font_size": "Tamaño de Letra",
"label": "Interfaz",
"light_mode": "Modo Claro"
},
"language": {
"display_language": "Idioma de la pantalla",
"label": "Idioma"
},
"preferences": {
"label": "Preferencias"
},
"profile": {
"appearance": {
"bio": "Bio",
"description": "Editar avatar, nombre de usuario, perfil, etc.",
"display_name": "Nombre a mostrar",
"label": "Apariencia",
"title": "Editar perfil"
},
"featured_tags": {
"description": "Las personas pueden navegar por sus publicaciones públicas con estos hashtags.",
"label": "Hashtags destacados"
},
"label": "Perfil"
},
"select_a_settings": "Seleccionar una configuración",
"users": {
"export": "Exportar tokens de usuario",
"import": "Importar tokens de usuario",
"label": "Usuarios conectados"
}
},
"state": {

View File

@ -10,10 +10,12 @@
<p font-medium>{{ $t('settings.interface.font_size') }}</p>
<SettingsFontSize select-settings />
</label>
<label space-y-2>
<p font-medium>{{ $t('settings.interface.color_mode') }}</p>
<div space-y-2>
<p font-medium>
{{ $t('settings.interface.color_mode') }}
</p>
<SettingsColorMode />
</label>
</div>
</div>
</MainContent>
</template>

View File

@ -79,12 +79,12 @@ async function importTokens() {
<div my4 border="t base" />
<button btn-text flex="~ gap-2" items-center @click="exportTokens">
<div i-ri-download-2-line />
Export User Tokens
{{ $t('settings.users.export') }}
</button>
</template>
<button btn-text flex="~ gap-2" items-center @click="importTokens">
<div i-ri-upload-2-line />
Import User Tokens
{{ $t('settings.users.import') }}
</button>
</div>
</MainContent>