add light mode

resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue

@@ -70,7 +70,7 @@ const closeModal = () => {
                     <div>
                         <svg
                             v-if="session.agent.is_desktop"
-                            class="w-8 h-8 text-white"
+                            class="w-8 h-8 text-text-primary"
                             xmlns="http://www.w3.org/2000/svg"
                             fill="none"
                             viewBox="0 0 24 24"
@@ -98,7 +98,7 @@ const closeModal = () => {
                     </div>
 
                     <div class="ms-3">
-                        <div class="text-sm text-white font-medium">
+                        <div class="text-sm text-text-primary font-medium">
                             {{
                                 session.agent.platform
                                     ? session.agent.platform

resources/js/Pages/Profile/Partials/ThemeForm.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+
+import InputLabel from "../../../packages/ui/src/Input/InputLabel.vue";
+import FormSection from "@/Components/FormSection.vue";
+import { usePreferredColorScheme } from '@vueuse/core';
+import { themeSetting } from "@/utils/theme";
+
+const preferredColor = usePreferredColorScheme()
+
+</script>
+
+<template>
+    <FormSection>
+        <template #title> Theme</template>
+
+        <template #description>
+            Choose how you want solidtime to look on your device
+        </template>
+
+        <template #form>
+
+            <div class="col-span-6 sm:col-span-4">
+                <InputLabel for="theme" value="Theme" />
+                <select
+                    id="theme"
+                    v-model="themeSetting"
+                    name="theme"
+                    required
+                    class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
+                    <option value="system">System</option>
+                    <option value="light">Light</option>
+                    <option value="dark">Dark</option>
+                </select>
+                <p v-if="themeSetting === 'system'" class="w-full text-sm text-text-tertiary font-medium mt-2">
+                    System default: {{ preferredColor }}
+                </p>
+            </div>
+        </template>
+    </FormSection>
+
+</template>
+
+<style scoped>
+
+</style>

resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue

@@ -208,7 +208,7 @@ const page = usePage<{
                     v-model="form.timezone"
                     name="timezone"
                     required
-                    class="mt-1 block w-full border-input-border bg-input-background text-white focus:border-input-border-active rounded-md shadow-sm">
+                    class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
                     <option value="" disabled>Select a Timezone</option>
                     <option
                         v-for="(timezoneTranslated, timezoneKey) in $page.props
@@ -229,7 +229,26 @@ const page = usePage<{
                     v-model="form.week_start"
                     name="week_start"
                     required
-                    class="mt-1 block w-full border-input-border bg-input-background text-white focus:border-input-border-active rounded-md shadow-sm">
+                    class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
+                    <option value="" disabled>Select a week day</option>
+                    <option
+                        v-for="(weekdayTranslated, weekdayKey) in $page.props
+                            .weekdays"
+                        :key="weekdayKey"
+                        :value="weekdayKey">
+                        {{ weekdayTranslated }}
+                    </option>
+                </select>
+                <InputError :message="form.errors.week_start" class="mt-2" />
+            </div>
+            <div class="col-span-6 sm:col-span-4">
+                <InputLabel for="week_start" value="Start of the week" />
+                <select
+                    id="week_start"
+                    v-model="form.week_start"
+                    name="week_start"
+                    required
+                    class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
                     <option value="" disabled>Select a week day</option>
                     <option
                         v-for="(weekdayTranslated, weekdayKey) in $page.props

resources/js/Pages/Profile/Show.vue

@@ -10,6 +10,7 @@ import { usePage } from '@inertiajs/vue3';
 import type { User } from '@/types/models';
 import type { Session } from '@/types/jetstream';
 import ApiTokensForm from "@/Pages/Profile/Partials/ApiTokensForm.vue";
+import ThemeForm from "@/Pages/Profile/Partials/ThemeForm.vue";
 
 defineProps<{
     confirmsTwoFactorAuthentication: boolean;
@@ -32,7 +33,7 @@ const page = usePage<{
 <template>
     <AppLayout title="Profile">
         <template #header>
-            <h2 class="font-semibold text-xl text-white leading-tight">
+            <h2 class="font-semibold text-xl text-text-primary leading-tight">
                 Profile
             </h2>
         </template>
@@ -46,6 +47,12 @@ const page = usePage<{
                     <SectionBorder />
                 </div>
 
+                <div>
+                    <ThemeForm />
+
+                    <SectionBorder />
+                </div>
+
                 <div v-if="page.props.jetstream.canUpdatePassword">
                     <UpdatePasswordForm class="mt-10 sm:mt-0" />