Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-29 19:12:27 +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) {
const themes = await server.get("options/codeblock-themes");
const themeGroups = await server.get("options/codeblock-themes");
this.$themeSelect.empty();
for (const theme of themes) {
this.$themeSelect.append($("<option>")
.attr("value", theme.val)
.text(theme.title));
for (const [ key, themes ] of Object.entries(themeGroups)) {
const $group = $("<optgroup>").attr("label", key);
for (const theme of themes) {
$group.append($("<option>")
.attr("value", theme.val)
.text(theme.title));
}
this.$themeSelect.append($group);
}
this.$themeSelect.val(options.codeBlockTheme);
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 { t } from "i18next";
interface ColorTheme {
val: string;
title: string;
}
export function listSyntaxHighlightingThemes() {
const path = "node_modules/@highlightjs/cdn-assets/styles";
const systemThemes = fs
.readdirSync(path)
const systemThemes = readThemesFromFileSystem(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"))
.map((name) => {
const nameWithoutExtension = name.replace(".min.css", "");
@ -20,11 +37,21 @@ export function listSyntaxHighlightingThemes() {
title: title
};
});
return [
{
val: "none",
title: t("code_block.theme_none")
},
...systemThemes
];
}
function groupThemesByLightOrDark(listOfThemes: ColorTheme[]) {
const result: Record<string, ColorTheme[]> = {
light: [],
dark: []
};
for (const theme of listOfThemes) {
if (theme.title.includes("Dark")) {
result.dark.push(theme);
} else {
result.light.push(theme);
}
}
return result;
}