fix CSS class of user theme

src/public/stylesheets/style.css

@@ -597,7 +597,7 @@ button.icon-button {
     max-width: 100%;
 }
 
-pre {
+pre:not(.CodeMirror-line) {
     color: var(--main-text-color) !important;
 }
 

src/routes/api/options.js

@@ -43,14 +43,27 @@ async function update(name, value) {
 }
 
 async function getUserThemes() {
-    return (await attributes.getNotesWithLabel('appTheme'))
-        .map(note => {
-            return {
-                val: note.title,
+    const notes = await attributes.getNotesWithLabel('appTheme');
+
+    const ret = [];
+
+    for (const note of notes) {
+        let value;
+
+        if (await note.hasLabel('appThemeClass')) {
+            value = await note.getLabelValue('appThemeClass');
+        } else {
+            value = note.title.toLowerCase().replace(/[^a-z0-9]/gi, '-');
+        }
+
+        ret.push({
+            val: value,
             title: note.title,
             noteId: note.noteId
-            };
         });
+    }
+
+    return ret;
 }
 
 module.exports = {

src/services/attributes.js

@@ -16,6 +16,7 @@ const BUILTIN_ATTRIBUTES = [
     { type: 'label', name: 'disableInclusion' },
     { type: 'label', name: 'appCss' },
     { type: 'label', name: 'appTheme' },
+    { type: 'label', name: 'appThemeClass' },
     { type: 'label', name: 'hideChildrenOverview' },
     { type: 'label', name: 'hidePromotedAttributes' },
     { type: 'label', name: 'readOnly' },