Select current theme in dropdown

This commit is contained in:
RMidhunSuresh 2022-04-25 15:56:45 +05:30
parent ecb83bb277
commit c611d3f85c
4 changed files with 34 additions and 6 deletions

View file

@ -31,12 +31,13 @@ function appendVariablesToCSS(variables, cssSource) {
return cssSource + getRootSectionWithVariables(variables); return cssSource + getRootSectionWithVariables(variables);
} }
function addThemesToConfig(bundle, themeSummary) { function addThemesToConfig(bundle, themeSummary, defaultThemes) {
for (const [fileName, info] of Object.entries(bundle)) { for (const [fileName, info] of Object.entries(bundle)) {
if (fileName === "assets/config.json") { if (fileName === "assets/config.json") {
const source = new TextDecoder().decode(info.source); const source = new TextDecoder().decode(info.source);
const config = JSON.parse(source); const config = JSON.parse(source);
config["themes"] = themeSummary; config["themes"] = themeSummary;
config["defaultTheme"] = defaultThemes;
info.source = new TextEncoder().encode(JSON.stringify(config)); info.source = new TextEncoder().encode(JSON.stringify(config));
} }
} }
@ -83,7 +84,7 @@ function parseBundle(bundle) {
} }
module.exports = function buildThemes(options) { module.exports = function buildThemes(options) {
let manifest, variants, defaultDark, defaultLight; let manifest, variants, defaultDark, defaultLight,defaultThemes = {};
let isDevelopment = false; let isDevelopment = false;
const virtualModuleId = '@theme/' const virtualModuleId = '@theme/'
const resolvedVirtualModuleId = '\0' + virtualModuleId; const resolvedVirtualModuleId = '\0' + virtualModuleId;
@ -110,9 +111,11 @@ module.exports = function buildThemes(options) {
// This is the default theme, stash the file name for later // This is the default theme, stash the file name for later
if (details.dark) { if (details.dark) {
defaultDark = fileName; defaultDark = fileName;
defaultThemes["dark"] = `${name}-${variant}`;
} }
else { else {
defaultLight = fileName; defaultLight = fileName;
defaultThemes["light"] = `${name}-${variant}`;
} }
} }
// emit the css as built theme bundle // emit the css as built theme bundle
@ -274,7 +277,7 @@ module.exports = function buildThemes(options) {
themeSummary[`${name}-${variant}`] = assetHashedFileName; themeSummary[`${name}-${variant}`] = assetHashedFileName;
}); });
} }
addThemesToConfig(bundle, themeSummary); addThemesToConfig(bundle, themeSummary, defaultThemes);
this.emitFile({ this.emitFile({
type: "asset", type: "asset",
name: "theme-summary.json", name: "theme-summary.json",

View file

@ -50,6 +50,7 @@ export class SettingsViewModel extends ViewModel {
this.minSentImageSizeLimit = 400; this.minSentImageSizeLimit = 400;
this.maxSentImageSizeLimit = 4000; this.maxSentImageSizeLimit = 4000;
this.pushNotifications = new PushNotificationStatus(); this.pushNotifications = new PushNotificationStatus();
this._activeTheme = undefined;
} }
get _session() { get _session() {
@ -76,6 +77,7 @@ export class SettingsViewModel extends ViewModel {
this.sentImageSizeLimit = await this.platform.settingsStorage.getInt("sentImageSizeLimit"); this.sentImageSizeLimit = await this.platform.settingsStorage.getInt("sentImageSizeLimit");
this.pushNotifications.supported = await this.platform.notificationService.supportsPush(); this.pushNotifications.supported = await this.platform.notificationService.supportsPush();
this.pushNotifications.enabled = await this._session.arePushNotificationsEnabled(); this.pushNotifications.enabled = await this._session.arePushNotificationsEnabled();
this._activeTheme = await this.platform.getActiveTheme();
this.emitChange(""); this.emitChange("");
} }
@ -131,6 +133,10 @@ export class SettingsViewModel extends ViewModel {
return this.platform.themes; return this.platform.themes;
} }
get activeTheme() {
return this._activeTheme;
}
setTheme(name) { setTheme(name) {
this.platform.setTheme(name); this.platform.setTheme(name);
this.platform.settingsStorage.setString("theme", name); this.platform.settingsStorage.setString("theme", name);

View file

@ -319,6 +319,23 @@ export class Platform {
return Object.keys(this.config["themes"]); return Object.keys(this.config["themes"]);
} }
async getActiveTheme() {
// check if theme is set via settings
let theme = await this.settingsStorage.getString("theme");
if (theme) {
return theme;
}
// return default theme
if (window.matchMedia) {
if (window.matchMedia("(prefers-color-scheme: dark)")) {
return this.config["defaultTheme"].dark;
} else if (window.matchMedia("(prefers-color-scheme: light)")) {
return this.config["defaultTheme"].light;
}
}
return undefined;
}
setTheme(themeName) { setTheme(themeName) {
const themeLocation = this.config["themes"][themeName]; const themeLocation = this.config["themes"][themeName];
if (!themeLocation) { if (!themeLocation) {

View file

@ -97,7 +97,9 @@ export class SettingsView extends TemplateView {
settingNodes.push( settingNodes.push(
t.h3("Preferences"), t.h3("Preferences"),
row(t, vm.i18n`Scale down images when sending`, this._imageCompressionRange(t, vm)), row(t, vm.i18n`Scale down images when sending`, this._imageCompressionRange(t, vm)),
row(t, vm.i18n`Use the following theme`, this._themeOptions(t, vm)), t.map(vm => vm.activeTheme, (theme, t) => {
return row(t, vm.i18n`Use the following theme`, this._themeOptions(t, vm, theme));
}),
); );
settingNodes.push( settingNodes.push(
t.h3("Application"), t.h3("Application"),
@ -137,10 +139,10 @@ export class SettingsView extends TemplateView {
})]; })];
} }
_themeOptions(t, vm) { _themeOptions(t, vm, activeTheme) {
const optionTags = []; const optionTags = [];
for (const name of vm.themes) { for (const name of vm.themes) {
optionTags.push(t.option({value: name}, name)); optionTags.push(t.option({value: name, selected: name === activeTheme}, name));
} }
return t.select({onChange: (e) => vm.setTheme(e.target.value)}, optionTags); return t.select({onChange: (e) => vm.setTheme(e.target.value)}, optionTags);
} }