You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
uptime-kuma/src/components/settings/Appearance.vue

150 lines
4.7 KiB

<template>
<div>
<div class="my-4">
<label for="language" class="form-label">
{{ $t("Language") }}
</label>
<select id="language" v-model="$i18n.locale" class="form-select">
<option
v-for="(lang, i) in $i18n.availableLocales"
:key="`Lang${i}`"
:value="lang"
>
{{ $i18n.messages[lang].languageName }}
</option>
</select>
</div>
<div class="my-4">
<label for="timezone" class="form-label">{{ $t("Theme") }}</label>
<div>
<div
class="btn-group"
role="group"
aria-label="Basic checkbox toggle button group"
>
<input
id="btncheck1"
v-model="$root.userTheme"
type="radio"
class="btn-check"
name="theme"
autocomplete="off"
value="light"
/>
<label class="btn btn-outline-primary" for="btncheck1">
{{ $t("Light") }}
</label>
<input
id="btncheck2"
v-model="$root.userTheme"
type="radio"
class="btn-check"
name="theme"
autocomplete="off"
value="dark"
/>
<label class="btn btn-outline-primary" for="btncheck2">
{{ $t("Dark") }}
</label>
<input
id="btncheck3"
v-model="$root.userTheme"
type="radio"
class="btn-check"
name="theme"
autocomplete="off"
value="auto"
/>
<label class="btn btn-outline-primary" for="btncheck3">
{{ $t("Auto") }}
</label>
</div>
</div>
</div>
<div class="my-4">
<label class="form-label">{{ $t("Theme - Heartbeat Bar") }}</label>
<div>
<div
class="btn-group"
role="group"
aria-label="Basic checkbox toggle button group"
>
<input
id="btncheck4"
v-model="$root.userHeartbeatBar"
type="radio"
class="btn-check"
name="heartbeatBarTheme"
autocomplete="off"
value="normal"
/>
<label class="btn btn-outline-primary" for="btncheck4">
{{ $t("Normal") }}
</label>
<input
id="btncheck5"
v-model="$root.userHeartbeatBar"
type="radio"
class="btn-check"
name="heartbeatBarTheme"
autocomplete="off"
value="bottom"
/>
<label class="btn btn-outline-primary" for="btncheck5">
{{ $t("Bottom") }}
</label>
<input
id="btncheck6"
v-model="$root.userHeartbeatBar"
type="radio"
class="btn-check"
name="heartbeatBarTheme"
autocomplete="off"
value="none"
/>
<label class="btn btn-outline-primary" for="btncheck6">
{{ $t("None") }}
</label>
</div>
</div>
</div>
</div>
</template>
<script>
import { setPageLocale } from "../../util-frontend";
export default {
watch: {
"$i18n.locale"() {
localStorage.locale = this.$i18n.locale;
setPageLocale();
},
},
};
</script>
<style lang="scss" scoped>
@import "../../assets/vars.scss";
.btn-check:active + .btn-outline-primary,
.btn-check:checked + .btn-outline-primary,
.btn-check:hover + .btn-outline-primary {
color: #fff;
.dark & {
color: #000;
}
}
.dark {
.list-group-item {
background-color: $dark-bg2;
color: $dark-font-color;
}
}
</style>