Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-31 04:51:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

client: Group color themes by dark/light

Browse Source
This commit is contained in:
Elian Doran 2024-10-31 20:54:33 +02:00
parent 90dffdc6ed
commit ae60f8c842
No known key found for this signature in database
2 changed files with 45 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/public/app/widgets/type_widgets/options/appearance/code_block.js
View File

@ -84,13 +84,17 @@ export default class CodeBlockOptions extends OptionsWidget {
} }
async optionsLoaded(options) { async optionsLoaded(options) {
const themes = await server.get("options/codeblock-themes"); const themeGroups = await server.get("options/codeblock-themes");
this.$themeSelect.empty(); this.$themeSelect.empty();
for (const theme of themes) { for (const [ key, themes ] of Object.entries(themeGroups)) {
this.$themeSelect.append($("<option>") const $group = $("<optgroup>").attr("label", key);
.attr("value", theme.val) for (const theme of themes) {
.text(theme.title)); $group.append($("<option>")
.attr("value", theme.val)
.text(theme.title));
}
this.$themeSelect.append($group);
} }
this.$themeSelect.val(options.codeBlockTheme); this.$themeSelect.val(options.codeBlockTheme);
this.setCheckboxState(this.$wordWrap, options.codeBlockWordWrap); this.setCheckboxState(this.$wordWrap, options.codeBlockWordWrap);

45
src/services/code_block_theme.ts
View File

@ -2,10 +2,27 @@ import fs from "fs";
import themeNames from "./code_block_theme_names.json" assert { type: "json" } import themeNames from "./code_block_theme_names.json" assert { type: "json" }
import { t } from "i18next"; import { t } from "i18next";
interface ColorTheme {
val: string;
title: string;
}
export function listSyntaxHighlightingThemes() { export function listSyntaxHighlightingThemes() {
const path = "node_modules/@highlightjs/cdn-assets/styles"; const path = "node_modules/@highlightjs/cdn-assets/styles";
const systemThemes = fs const systemThemes = readThemesFromFileSystem(path);
.readdirSync(path) const allThemes = [
{
val: "none",
title: t("code_block.theme_none")
},
...systemThemes
];
return groupThemesByLightOrDark(allThemes);
}
function readThemesFromFileSystem(path: string): ColorTheme[] {
return fs.readdirSync(path)
.filter((el) => el.endsWith(".min.css")) .filter((el) => el.endsWith(".min.css"))
.map((name) => { .map((name) => {
const nameWithoutExtension = name.replace(".min.css", ""); const nameWithoutExtension = name.replace(".min.css", "");
@ -20,11 +37,21 @@ export function listSyntaxHighlightingThemes() {
title: title title: title
}; };
}); });
return [ }
{
val: "none", function groupThemesByLightOrDark(listOfThemes: ColorTheme[]) {
title: t("code_block.theme_none") const result: Record<string, ColorTheme[]> = {
}, light: [],
...systemThemes dark: []
]; };
for (const theme of listOfThemes) {
if (theme.title.includes("Dark")) {
result.dark.push(theme);
} else {
result.light.push(theme);
}
}
return result;
} }