|
|
@@ -11,6 +11,7 @@
|
|
|
let savePreferenceDisabled = true;
|
|
|
let hasChanges = false;
|
|
|
let saveMessage = '';
|
|
|
+ let theme = 'light';
|
|
|
|
|
|
$: authentication.subscribe((value) => {
|
|
|
isAuthenticated = !!value;
|
|
|
@@ -39,6 +40,11 @@
|
|
|
localStorage.setItem('defaultOrder', 'total');
|
|
|
}
|
|
|
|
|
|
+ const storedTheme = localStorage.getItem('theme');
|
|
|
+ if (storedTheme) {
|
|
|
+ theme = storedTheme;
|
|
|
+ applyTheme(theme);
|
|
|
+ }
|
|
|
} catch (error) {
|
|
|
console.error('Error parsing stored auth:', error);
|
|
|
} finally {
|
|
|
@@ -46,6 +52,14 @@
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+ function applyTheme(selected) {
|
|
|
+ if (selected === 'dark') {
|
|
|
+ document.documentElement.classList.add('dark');
|
|
|
+ } else {
|
|
|
+ document.documentElement.classList.remove('dark');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
function logout() {
|
|
|
window.location.href = '/logout';
|
|
|
}
|
|
|
@@ -65,6 +79,9 @@
|
|
|
function savePreferences() {
|
|
|
localStorage.setItem('defaultCurrency', currency);
|
|
|
localStorage.setItem('defaultOrder', orderBy);
|
|
|
+ localStorage.setItem('theme', theme);
|
|
|
+ applyTheme(theme);
|
|
|
+
|
|
|
savePreferenceDisabled = true;
|
|
|
saveMessage = 'Preferences saved successfully.';
|
|
|
|
|
|
@@ -73,6 +90,12 @@
|
|
|
}, 2000);
|
|
|
}
|
|
|
|
|
|
+ function updateTheme(event) {
|
|
|
+ theme = event.target.value;
|
|
|
+ hasChanges = true;
|
|
|
+ savePreferenceDisabled = false;
|
|
|
+ }
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<svelte:head>
|
|
|
@@ -127,9 +150,11 @@
|
|
|
<select
|
|
|
id="theme"
|
|
|
class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
+ bind:value={theme}
|
|
|
+ on:change={updateTheme}
|
|
|
>
|
|
|
<option value="light">Light</option>
|
|
|
- <!-- <option value="dark">Dark</option> -->
|
|
|
+ <option value="dark">Dark</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -157,94 +182,4 @@
|
|
|
</div>
|
|
|
{/if}
|
|
|
{/if}
|
|
|
-</div>
|
|
|
-
|
|
|
-
|
|
|
-<style>
|
|
|
- .profile-container {
|
|
|
- max-width: 600px;
|
|
|
- margin: 2rem auto;
|
|
|
- padding: 1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .profile-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 1.5rem;
|
|
|
- }
|
|
|
-
|
|
|
- button {
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 0.5rem 1rem;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .save-preferences {
|
|
|
- background-color: #4caf50;
|
|
|
- }
|
|
|
-
|
|
|
- .logout-button {
|
|
|
- background-color: #f44336;
|
|
|
- }
|
|
|
-
|
|
|
- .logout-button:hover {
|
|
|
- background-color: #d32f2f;
|
|
|
- }
|
|
|
-
|
|
|
- .settings-card {
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius: 10px;
|
|
|
- padding: 1.5rem;
|
|
|
- background-color: #fefefe;
|
|
|
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
|
|
- }
|
|
|
-
|
|
|
- .settings-card h2 {
|
|
|
- margin-top: 0;
|
|
|
- margin-bottom: 1rem;
|
|
|
- font-size: 1.25rem;
|
|
|
- }
|
|
|
-
|
|
|
- .settings-group {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- margin-bottom: 1rem;
|
|
|
- }
|
|
|
-
|
|
|
- .settings-group label {
|
|
|
- margin-bottom: 0.5rem;
|
|
|
- font-weight: 500;
|
|
|
- width: 260px;
|
|
|
- }
|
|
|
-
|
|
|
- .form-control {
|
|
|
- width: 100%;
|
|
|
- padding: 0.5rem;
|
|
|
- border-radius: 8px;
|
|
|
- border: 1px solid #ccc;
|
|
|
- background-color: #fff;
|
|
|
- font-size: 1rem;
|
|
|
- }
|
|
|
-
|
|
|
- button:disabled {
|
|
|
- pointer-events: none;
|
|
|
- opacity: 0.6;
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
-
|
|
|
- .save-message {
|
|
|
- color: green;
|
|
|
- height: 2rem;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- margin-top: 1rem;
|
|
|
- text-align: center;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
-</style>
|
|
|
+</div>
|
