fix: retirer bouton dark/light mode du sidebar, ajouter dans Settings
FlowDeck CI / test (push) Failing after 4s
FlowDeck CI / docker (push) Has been skipped

- Sidebar: retrait du bouton 🌓 (dark/light) + bouton 🚪 logout
- Settings → Account → Preferences: nouveau sélecteur de thème (Dark/Light)
- Persistance localStorage 'fd_theme' — appliqué au chargement de chaque page
- initTheme() dans base.html + applyTheme() dans settings.html
- toggleTheme() conservé dans le JS mais plus utilisé dans l'UI
This commit is contained in:
2026-07-13 17:08:30 -04:00
parent c1f854a54a
commit e22efc1d9c
2 changed files with 107 additions and 9 deletions
+59
View File
@@ -193,6 +193,38 @@
</button>
</div>
</div>
<!-- Preferences -->
<div class="setting-group">
<h3>Preferences</h3>
<div class="setting-row">
<div>
<div class="setting-label">Theme</div>
<div class="setting-desc">Choose between light and dark appearance</div>
</div>
<div class="setting-control">
<select x-model="theme" @change="applyTheme()" style="background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;padding:6px 10px;outline:none;">
<option value="dark">🌙 Dark</option>
<option value="light">☀️ Light</option>
</select>
</div>
</div>
<div class="setting-row">
<div>
<div class="setting-label">Default view</div>
<div class="setting-desc">Workspace view mode when opening a workspace</div>
</div>
<div class="setting-control">
<select x-model="defaultView" @change="saveDefaultView()" style="background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;padding:6px 10px;outline:none;">
<option value="tree">🌳 Tree</option>
<option value="list">📋 List</option>
<option value="details">📊 Details</option>
<option value="title">🏷️ Title</option>
<option value="content">📝 Content</option>
</select>
</div>
</div>
</div>
</div>
<!-- Notifications -->
@@ -511,6 +543,8 @@ document.addEventListener('alpine:init', function() {
userIsAdmin: {{ 'true' if user.get('is_admin') else 'false' }},
// Gitea
giteaLinked: false,
// Theme
theme: localStorage.getItem('fd_theme') || 'dark',
// Account form
accountForm: {login:'{{ user.login or "" }}', full_name:'{{ user.full_name or "" }}', email:'{{ user.email or "" }}', password:''},
accountSaving: false,
@@ -723,6 +757,31 @@ document.addEventListener('alpine:init', function() {
if (r.ok) { this.avatarUrl = ''; }
},
applyTheme() {
localStorage.setItem('fd_theme', this.theme);
document.documentElement.setAttribute('data-theme', this.theme);
if (this.theme === 'light') {
document.documentElement.style.setProperty('--bg-primary', '#FFFFFF');
document.documentElement.style.setProperty('--bg-secondary', '#F7F6F3');
document.documentElement.style.setProperty('--bg-tertiary', '#EDECE9');
document.documentElement.style.setProperty('--text', '#37352F');
document.documentElement.style.setProperty('--text-secondary', '#6B6966');
document.documentElement.style.setProperty('--text-dim', '#9B9A97');
document.documentElement.style.setProperty('--border', '#E0DFDC');
document.documentElement.style.setProperty('--border-strong', '#CCCBC8');
} else {
document.documentElement.style.removeProperty('--bg-primary');
document.documentElement.style.removeProperty('--bg-secondary');
document.documentElement.style.removeProperty('--bg-tertiary');
document.documentElement.style.removeProperty('--text');
document.documentElement.style.removeProperty('--text-secondary');
document.documentElement.style.removeProperty('--text-dim');
document.documentElement.style.removeProperty('--border');
document.documentElement.style.removeProperty('--border-strong');
document.documentElement.setAttribute('data-theme', 'dark');
}
},
saveDefaultView() {
localStorage.setItem('fd_default_view', this.defaultView);
}