diff --git a/src/UI/UIWindowThemeDialog.js b/src/UI/UIWindowThemeDialog.js index f2469000a..6f39c142a 100644 --- a/src/UI/UIWindowThemeDialog.js +++ b/src/UI/UIWindowThemeDialog.js @@ -46,6 +46,22 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog () { }); const w_body = w.querySelector('.window-body'); + const Button = ({ label }) => { + const el = document.createElement('button'); + el.textContent = label ?? i18n('reset'); + el.classList.add('button', 'button-block'); + return { + appendTo (parent) { + parent.appendChild(el); + return this; + }, + onPress (cb) { + el.addEventListener('click', cb); + return this; + }, + }; + } + const Slider = ({ name, label, min, max, initial, step }) => { label = label ?? name; const wrap = document.createElement('div'); @@ -83,6 +99,13 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog () { svc_theme.apply(state); }; + Button({ label: i18n('reset_colors') }) + .appendTo(w_body) + .onPress(() => { + svc_theme.reset(); + }) + ; + Slider({ label: i18n('hue'), name: 'hue', min: 0, max: 360, diff --git a/src/i18n/translations/en.js b/src/i18n/translations/en.js index d290e1681..3fed31897 100644 --- a/src/i18n/translations/en.js +++ b/src/i18n/translations/en.js @@ -167,6 +167,7 @@ const en = { replace: 'Replace', replace_all: 'Replace All', resend_confirmation_code: "Re-send Confirmation Code", + reset_colors: "Reset Colors", restore: "Restore", saturation: 'Saturation', save_account: 'Save account', diff --git a/src/services/ThemeService.js b/src/services/ThemeService.js index 4540fc6f8..57e2a20c3 100644 --- a/src/services/ThemeService.js +++ b/src/services/ThemeService.js @@ -5,6 +5,13 @@ const PUTER_THEME_DATA_FILENAME = '~/.__puter_gui.json'; const SAVE_COOLDOWN_TIME = 1000; +const default_values = { + sat: 41.18, + hue: 210, + lig: 93.33, + alpha: 0.8, +}; + export class ThemeService extends Service { async _init () { this.state = { @@ -58,6 +65,12 @@ export class ThemeService extends Service { } } + reset () { + this.state = default_values; + this.reload_(); + puter.fs.delete(PUTER_THEME_DATA_FILENAME); + } + apply (values) { this.state = { ...this.state,