Allow themes to change theme-color

This commit is contained in:
Pavel Djundik 2019-07-22 19:50:04 +03:00
parent 526a689e14
commit efa0aeb2c6
5 changed files with 55 additions and 22 deletions

View file

@ -30,6 +30,8 @@ const noSync = ["syncSettings"];
// to the server regardless of the clients sync setting. // to the server regardless of the clients sync setting.
const alwaysSync = ["highlights"]; const alwaysSync = ["highlights"];
const defaultThemeColor = document.querySelector('meta[name="theme-color"]').content;
// Process usersettings from localstorage. // Process usersettings from localstorage.
let userSettings = JSON.parse(storage.get("settings")) || false; let userSettings = JSON.parse(storage.get("settings")) || false;
@ -95,10 +97,19 @@ function applySetting(name, value) {
$syncWarningOverride.hide(); $syncWarningOverride.hide();
$forceSyncButton.hide(); $forceSyncButton.hide();
} else if (name === "theme") { } else if (name === "theme") {
value = `themes/${value}.css`; const themeUrl = `themes/${value}.css`;
if ($theme.attr("href") !== value) { if ($theme.attr("href") !== themeUrl) {
$theme.attr("href", value); $theme.attr("href", themeUrl);
const newTheme = $settings.find("#theme-select option[value='" + value + "']");
let themeColor = defaultThemeColor;
if (newTheme.length > 0 && newTheme[0].dataset.themeColor) {
themeColor = newTheme[0].dataset.themeColor;
}
document.querySelector('meta[name="theme-color"]').content = themeColor;
} }
} else if (name === "userStyles" && !noCSSparamReg.test(window.location.search)) { } else if (name === "userStyles" && !noCSSparamReg.test(window.location.search)) {
$userStyles.html(value); $userStyles.html(value);

View file

@ -59,8 +59,12 @@ socket.on("configuration", function(data) {
// If localStorage contains a theme that does not exist on this server, switch // If localStorage contains a theme that does not exist on this server, switch
// back to its default theme. // back to its default theme.
if (!data.themes.map((t) => t.name).includes(options.settings.theme)) { const currentTheme = data.themes.find((t) => t.name === options.settings.theme);
if (currentTheme === undefined) {
options.processSetting("theme", data.defaultTheme, true); options.processSetting("theme", data.defaultTheme, true);
} else if (currentTheme.themeColor) {
document.querySelector('meta[name="theme-color"]').content = currentTheme.themeColor;
} }
function handleFormSubmit() { function handleFormSubmit() {

View file

@ -104,7 +104,7 @@
<label for="theme-select" class="sr-only">Theme</label> <label for="theme-select" class="sr-only">Theme</label>
<select id="theme-select" name="theme" class="input"> <select id="theme-select" name="theme" class="input">
{{#each themes}} {{#each themes}}
<option value="{{name}}"> <option value="{{name}}" data-theme-color="{{themeColor}}">
{{displayName}} {{displayName}}
</option> </option>
{{/each}} {{/each}}

View file

@ -9,21 +9,19 @@ const themes = new Map();
module.exports = { module.exports = {
addTheme, addTheme,
getAll, getAll,
getFilename, getByName,
loadLocalThemes, loadLocalThemes,
}; };
function loadLocalThemes() { function loadLocalThemes() {
fs.readdir(path.join(__dirname, "..", "..", "..", "public", "themes"), (err, builtInThemes) => { const builtInThemes = fs.readdirSync(
if (err) { path.join(__dirname, "..", "..", "..", "public", "themes")
return; );
}
builtInThemes builtInThemes
.filter((theme) => theme.endsWith(".css")) .filter((theme) => theme.endsWith(".css"))
.map(makeLocalThemeObject) .map(makeLocalThemeObject)
.forEach((theme) => themes.set(theme.name, theme)); .forEach((theme) => themes.set(theme.name, theme));
});
} }
function addTheme(packageName, packageObject) { function addTheme(packageName, packageObject) {
@ -35,13 +33,17 @@ function addTheme(packageName, packageObject) {
} }
function getAll() { function getAll() {
return _.sortBy(Array.from(themes.values()), "displayName"); const filteredThemes = [];
for (const theme of themes.values()) {
filteredThemes.push(_.pick(theme, ["displayName", "name", "themeColor"]));
}
return _.sortBy(filteredThemes, "displayName");
} }
function getFilename(module) { function getByName(name) {
if (themes.has(module)) { return themes.get(name);
return themes.get(module).filename;
}
} }
function makeLocalThemeObject(css) { function makeLocalThemeObject(css) {
@ -49,6 +51,7 @@ function makeLocalThemeObject(css) {
return { return {
displayName: themeName.charAt(0).toUpperCase() + themeName.slice(1), displayName: themeName.charAt(0).toUpperCase() + themeName.slice(1),
name: themeName, name: themeName,
themeColor: null,
}; };
} }
@ -57,10 +60,12 @@ function makePackageThemeObject(moduleName, module) {
return; return;
} }
const themeColor = /^#[0-9A-F]{6}$/i.test(module.themeColor) ? module.themeColor : null;
const modulePath = Helper.getPackageModulePath(moduleName); const modulePath = Helper.getPackageModulePath(moduleName);
return { return {
displayName: module.name || moduleName, displayName: module.name || moduleName,
filename: path.join(modulePath, module.css), filename: path.join(modulePath, module.css),
name: moduleName, name: moduleName,
themeColor: themeColor,
}; };
} }

View file

@ -65,13 +65,13 @@ module.exports = function() {
// local themes will not get those changes. // local themes will not get those changes.
app.get("/themes/:theme.css", (req, res) => { app.get("/themes/:theme.css", (req, res) => {
const themeName = req.params.theme; const themeName = req.params.theme;
const theme = themes.getFilename(themeName); const theme = themes.getByName(themeName);
if (theme === undefined) { if (theme === undefined) {
return res.status(404).send("Not found"); return res.status(404).send("Not found");
} }
return res.sendFile(theme); return res.sendFile(theme.filename);
}); });
app.get("/packages/:package/:filename", (req, res) => { app.get("/packages/:package/:filename", (req, res) => {
@ -179,6 +179,19 @@ module.exports = function() {
manager = new ClientManager(); manager = new ClientManager();
packages.loadPackages(); packages.loadPackages();
const defaultTheme = themes.getByName(Helper.config.theme);
if (defaultTheme === undefined) {
log.warn(
`The specified default theme "${colors.red(
Helper.config.theme
)}" does not exist, verify your config.`
);
Helper.config.theme = "default";
} else if (defaultTheme.themeColor) {
Helper.config.themeColor = defaultTheme.themeColor;
}
new Identification((identHandler) => { new Identification((identHandler) => {
manager.init(identHandler, sockets); manager.init(identHandler, sockets);
}); });