@things-factory/setting-ui 8.0.0-beta.9 → 8.0.2

package/client/setting-lets/theme-mode-setting-let.ts

@@ -0,0 +1,80 @@
+import '@operato/i18n/ox-i18n.js'
+import '@material/web/radio/radio.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { clientSettingStore } from '@operato/shell'
+import { MdRadio } from '@material/web/radio/radio.js'
+import { setThemeMode } from '../set-theme-mode.js'
+
+@customElement('theme-mode-setting-let')
+export class ThemeModeSettingLet extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      label {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+
+        font: var(--label-font);
+        color: var(--md-sys-color-on-surface);
+        text-transform: var(--label-text-transform);
+      }
+
+      div[slot='content'] {
+        display: flex;
+        gap: 10px;
+      }
+    `
+  ]
+
+  @property({ type: String, attribute: 'theme-mode' }) themeMode: 'dark' | 'light' | 'auto' = 'light'
+
+  render() {
+    const themeMode = this.themeMode
+
+    return html`
+      <setting-let>
+        <ox-i18n slot="title" msgid="title.theme setting"></ox-i18n>
+
+        <div slot="content" @change=${(e: Event) => this.onChangeThemeMode(e)}>
+          <md-radio id="dark-mode" name="theme-mode" value="dark" ?checked=${themeMode == 'dark'}></md-radio>
+          <label for="dark-mode">dark mode</label>
+
+          <md-radio id="light-mode" name="theme-mode" value="light" ?checked=${themeMode == 'light'}></md-radio>
+          <label for="light-mode">light mode</label>
+
+          <md-radio id="auto-mode" name="theme-mode" value="auto" ?checked=${themeMode == 'auto'}></md-radio>
+          <label for="auto-mode">auto mode</label>
+        </div>
+      </setting-let>
+    `
+  }
+
+  async firstUpdated() {
+    this.themeMode = ((await clientSettingStore.get('theme'))?.value || {}).mode || 'light'
+  }
+
+  async onChangeThemeMode(e: Event) {
+    const target = e.target as MdRadio
+    const value = target.value
+    const mode = (this.querySelector('md-radio[checked]') as MdRadio)?.value || value
+
+    if (mode) {
+      try {
+        await clientSettingStore.put({
+          key: 'theme',
+          value: {
+            mode
+          }
+        })
+
+        setThemeMode(mode)
+      } catch (e) {
+        console.error(e)
+      }
+    }
+  }
+}

package/client/themes/setting-theme.css

@@ -0,0 +1,32 @@
+body {
+  --setting-background: var(--md-sys-color-background);
+
+  --setting-let-background: var(--md-sys-color-on-primary);
+  --setting-let-margin: var(--margin-wide);
+  --setting-let-border-radius: var(--border-radius);
+  --setting-let-border: var(--border-dim-color);
+
+  --setting-title-font: var(--subtitle-font);
+  --setting-title-color: var(--subtitle-text-color);
+
+  --setting-content-padding: var(--padding-wide);
+  --setting-content-font: normal 0.9em var(--theme-font);
+  --setting-content-color: var(--md-sys-color-secondary);
+
+  --setting-info-content-padding: 10px 15px;
+  --setting-info-background-color: #f0f0f0;
+  --setting-info-font: normal 14px/14px var(--theme-font);
+  --setting-info-color: #666;
+  --setting-info-appname-color: var(--md-sys-color-primary);
+
+  --setting-icon-height: 170px;
+  --setting-icon-margin: 40px 0 5px 0;
+}
+@media screen and (max-width: 460px) {
+  body {
+    --setting-let-margin: var(--margin-default);
+    --setting-content-padding: var(--padding-default);
+    --setting-icon-height: 140px;
+    --setting-icon-margin: var(--margin-wide) 0;
+  }
+}