diff options
| author | Santo Cariotti <santo@dcariotti.me> | 2022-09-27 19:17:51 +0200 |
|---|---|---|
| committer | Santo Cariotti <santo@dcariotti.me> | 2022-09-27 19:17:51 +0200 |
| commit | 6395d1ec4362fedd7854fc9a103bad8bf7ae5d3d (patch) | |
| tree | 93a2d01ec76ef5b78e36d3f5f2ad284d1286d928 /pages/settings.vue | |
| parent | 74f689fefb77328f22772bbdf9ebc6aefb01cdab (diff) | |
Dark mode
Diffstat (limited to 'pages/settings.vue')
| -rw-r--r-- | pages/settings.vue | 26 |
1 files changed, 19 insertions, 7 deletions
diff --git a/pages/settings.vue b/pages/settings.vue index fc08199..bc028d4 100644 --- a/pages/settings.vue +++ b/pages/settings.vue @@ -1,13 +1,13 @@ <template lang="pug"> .mx-auto.w-90p.py-6(class="sm:px-6 lg:px-8 md:max-w-7xl") - h1.text-3xl.font-bold Settings - p Change your informations + h1.text-3xl.font-bold(class="dark:text-white") Settings + p(class="dark:text-white") Change your informations form.mt-3(v-if="me") .overflow-hidden.shadow(class="sm:rounded-md") - .space-y-6.bg-white.px-4.py-5(class="sm:p-6") + .space-y-6.bg-white.px-4.py-5(class="sm:p-6 dark:bg-gray-600") div - label.block.text-sm.font-medium.text-gray-700 Avatar + label.block.text-sm.font-medium.text-gray-700(class="dark:text-white") Avatar span.text-green-500.text-xs(v-if="avatarChanged") Avatar changed. Reload this page and/or clear your browser cache. .mt-1.flex.items-center user-avatar(:data="me") @@ -28,7 +28,7 @@ | Delete div - label.block.text-sm.font-medium.text-gray-700(for="name") Name + label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="name") Name .mt-1 input#name.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1( name="name" @@ -37,7 +37,7 @@ v-model="form.name" ) div - label.block.text-sm.font-medium.text-gray-700(for="username") Username + label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="username") Username .mt-1 input#email.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1( name="username" @@ -46,7 +46,7 @@ v-model="form.username" ) div - label.block.text-sm.font-medium.text-gray-700(for="email") Email + label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="email") Email .mt-1 input#email.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1( type="email" @@ -55,6 +55,18 @@ placeholder="john@example.com" v-model="form.email" ) + + div + label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="theme") Theme + .mt-1 + select( + class="cursor-pointer rounded-md border border-gray-300 bg-white py-2 px-3 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" + ) + option(@click="$colorMode.preference = 'system'") System + option(@click="$colorMode.preference = 'light'") Light + option(@click="$colorMode.preference = 'dark'") Dark + + .py-3.px-4.text-right(class="sm:px-6") button.inline-flex.justify-center.rounded-md.border.border-transparent.bg-green-600.py-2.px-4.text-sm.font-medium.text-white.shadow-sm( type="submit" |