feat(collection/presentation): add listing for themes

apps/client/src/widgets/collections/presentation/themes.ts

@@ -0,0 +1,61 @@
+interface ThemeDefinition {
+    name: string;
+    loadTheme: () => Promise<typeof import("*.css?raw")>;
+}
+
+const themes: Record<string, ThemeDefinition> = {
+    black: {
+        name: "Black",
+        loadTheme: () => import("reveal.js/dist/theme/black.css?raw")
+    },
+    white: {
+        name: "White",
+        loadTheme: () => import("reveal.js/dist/theme/black.css?raw")
+    },
+    beige: {
+        name: "Beige",
+        loadTheme: () => import("reveal.js/dist/theme/black.css?raw")
+    },
+    serif: {
+        name: "Serif",
+        loadTheme: () => import("reveal.js/dist/theme/black.css?raw")
+    },
+    simple: {
+        name: "Simple",
+        loadTheme: () => import("reveal.js/dist/theme/black.css?raw")
+    },
+    solarized: {
+        name: "Solarized",
+        loadTheme: () => import("reveal.js/dist/theme/black.css?raw")
+    },
+    moon: {
+        name: "Moon",
+        loadTheme: () => import("reveal.js/dist/theme/black.css?raw")
+    },
+    dracula: {
+        name: "Dracula",
+        loadTheme: () => import("reveal.js/dist/theme/black.css?raw")
+    },
+    sky: {
+        name: "Sky",
+        loadTheme: () => import("reveal.js/dist/theme/black.css?raw")
+    },
+    blood: {
+        name: "Blood",
+        loadTheme: () => import("reveal.js/dist/theme/black.css?raw")
+    }
+} as const;
+
+export function getPresentationThemes() {
+    return Object.entries(themes).map(([ id, theme ]) => ({
+        id: id,
+        name: theme.name
+    }));
+}
+
+export async function loadPresentationTheme(name: keyof typeof themes) {
+    const theme = themes[name];
+    if (!theme) return;
+
+    return (await theme.loadTheme()).default;
+}

apps/client/src/widgets/ribbon/collection-properties-config.ts

@@ -5,6 +5,7 @@ import NoteContextAwareWidget from "../note_context_aware_widget";
 import { DEFAULT_MAP_LAYER_NAME, MAP_LAYERS, type MapLayer } from "../collections/geomap/map_layer";
 import { ViewTypeOptions } from "../collections/interface";
 import { FilterLabelsByType } from "@triliumnext/commons";
+import { getPresentationThemes } from "../collections/presentation/themes";
 
 interface BookConfig {
     properties: BookProperty[];
@@ -161,7 +162,17 @@ export const bookPropertiesConfig: Record<ViewTypeOptions, BookConfig> = {
         properties: []
     },
     presentation: {
-        properties: []
+        properties: [
+            {
+                label: "Theme",
+                type: "combobox",
+                bindToLabel: "presentation:theme",
+                options: getPresentationThemes().map(theme => ({
+                    value: theme.id,
+                    label: theme.name
+                }))
+            }
+        ]
     }
 };
 

packages/commons/src/lib/attribute_names.ts

@@ -39,6 +39,7 @@ type Labels = {
     "board:groupBy": string;
     maxNestingDepth: number;
     includeArchived: boolean;
+    "presentation:theme": string;
 }
 
 /**