Дизайн Артёма

shine-UI/js/pages/settings-view.js

@@ -1,6 +1,7 @@
 import { createTopBar } from '../components/topbar.js';
 import { addAppLogEntry, authService, closeSavedProfile, state } from '../state.js';
 import { isDeveloperToolsEnabled } from '../services/feature-settings.js';
+import { getThemeMode, setThemeMode } from '../services/theme-service.js';
 
 export const pageMeta = { id: 'settings-view', title: 'Настройки' };
 
@@ -57,6 +58,15 @@ export function render({navigate, chrome}) {
   const card = document.createElement('div');
   card.className = 'card stack';
   card.innerHTML = `
+    <div class="stack">
+      <label for="settings-theme"><strong>Оформление</strong></label>
+      <span class="meta-muted">Тема меняет только цвета и не перезагружает экран.</span>
+      <select class="select" id="settings-theme">
+        <option value="system">Как на устройстве</option>
+        <option value="light">Дневное</option>
+        <option value="dark">Ночное</option>
+      </select>
+    </div>
     <button class="shine-btn shine-btn--settings" type="button" id="settings-device">Устройства</button>
     <button class="shine-btn shine-btn--settings" type="button" id="settings-remote-addblock">Remote AddBlock через homeserver</button>
     <button class="shine-btn shine-btn--settings" type="button" id="settings-access-servers">
@@ -81,6 +91,10 @@ export function render({navigate, chrome}) {
     <button class="shine-btn shine-btn--settings" type="button" id="settings-signout">Завершить текущий сеанс</button>
   `;
 
+  const themeSelect = card.querySelector('#settings-theme');
+  themeSelect.value = getThemeMode();
+  themeSelect.addEventListener('change', () => setThemeMode(themeSelect.value));
+
   card.querySelector('#settings-device').addEventListener('click', () => navigate('device-view'));
   card.querySelector('#settings-remote-addblock').addEventListener('click', () => navigate('remote-addblock-session-view'));
   card.querySelector('#settings-access-servers').addEventListener('click', () => navigate('access-servers-view'));