I just can't change theme only for specific workspace

[mowityx]

I'm struggling i spent hours and don't understand words don't make sense to me. I added atrribiute #cssclass(inheritable)="name od theme" and only thing i achived so far was setting it to whole application. Code in wiki "Custom app-wide css" doesn't do anything and i couldn't figure it out adding #appcss changes it to whole app not single workspace. I'm lost and would be grateful for step by step guide as bluntly and specific as possible maybe with pictures and arrows ;(

[march-7th-mini]

The real trick is a scoped widget script, not CSS attributes.

#appCss only applies globally — it can't be isolated per workspace.

You should consider using a widget script to achieve the effect you want. This is a reference script — add #widget to activate it.

Then, on the workspace root note, add the attribute labels #workspace and #lhaWorkspace(inheritable) .

#lhaWorkspace is a custom label defined in the reference script.

---

/** @jsx h */
import { defineWidget, useActiveNoteContext, useEffect, useState } from "trilium:preact";
import { searchForNotes, getNote } from "trilium:api";

const STYLE_ID = "lha-scoped-workspace-style";

// 材质：深色底 + 浅色前景。
// 通过官方 --launcher-pane-* 变量注入, 让 Trilium 自动为文字、图标、logo 选择合适对比色,
// 并保留官方 logo 悬停时的彩色行为（不再用 filter 反白破坏它）。
const BLACK_CSS = `
#launcher-pane:is(.vertical,.horizontal) {
    --lha-base: #15161d;
    --lha-fg: #f7f3ff;
    --lha-hover: rgba(235,226,255,.15);
    --lha-active: rgba(235,226,255,.24);
    --lha-seam: rgba(232,226,245,.28);
    --lha-pattern:
        linear-gradient(104deg, transparent 0 16%, rgba(238,232,250,.22) 25%, transparent 36% 68%, rgba(224,216,244,.10) 78%, transparent 87%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.20) 0 1px, transparent 1px 5px);
}

/* 绑定 Trilium 官方启动栏变量, 交由主题系统自动适配 logo / 图标 / 文字对比度 */
body #launcher-pane.vertical,
body #launcher-pane.horizontal {
    --launcher-pane-vert-background-color: var(--lha-base) !important;
    --launcher-pane-horiz-background-color: var(--lha-base) !important;
    --launcher-pane-background-color: var(--lha-base) !important;
    --launcher-pane-vert-text-color: var(--lha-fg) !important;
    --launcher-pane-horiz-text-color: var(--lha-fg) !important;
    --launcher-pane-text-color: var(--lha-fg) !important;
    --launcher-pane-vert-button-hover-color: var(--lha-fg) !important;
    --launcher-pane-horiz-button-hover-color: var(--lha-fg) !important;
    --launcher-pane-button-hover-color: var(--lha-fg) !important;
    --launcher-pane-vert-button-hover-background: var(--lha-hover) !important;
    --launcher-pane-horiz-button-hover-background: var(--lha-hover) !important;
    --launcher-pane-button-hover-background: var(--lha-hover) !important;
}

body #launcher-pane:is(.vertical,.horizontal) {
    position: relative;
    isolation: isolate;
    color: var(--lha-fg) !important;
    background-color: var(--lha-base) !important;
    box-shadow: inset 1px 0 rgba(255,255,255,.10), inset -1px 0 rgba(0,0,0,.28);
    transition: background-color .25s ease, color .25s ease;
}

/* 织纹纹理: 不影响官方颜色逻辑, 只叠加装饰图案 */
body #launcher-pane:is(.vertical,.horizontal)::before,
body #launcher-pane:is(.vertical,.horizontal)::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}
body #launcher-pane:is(.vertical,.horizontal)::before {
    inset: 0;
    background: var(--lha-pattern);
    opacity: .72;
}
body #launcher-pane.vertical::after {
    top: 4%; bottom: 4%; left: 50%; width: 1px;
    background: linear-gradient(transparent, var(--lha-seam) 12% 88%, transparent);
    box-shadow: 1px 0 rgba(0,0,0,.15);
}
body #launcher-pane.horizontal::after {
    left: 4%; right: 4%; top: 50%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--lha-seam) 12% 88%, transparent);
    box-shadow: 0 1px rgba(0,0,0,.15);
}

/* 数字徽章 / 计数器可读性 */
body #launcher-pane :is(.badge,.counter,.launcher-button-counter) {
    color: var(--lha-base) !important;
    background: var(--lha-fg) !important;
}
`;

export default defineWidget({
    parent: "center-pane",
    position: 9000,
    render() {
        const { noteId } = useActiveNoteContext();
        const [workspaceIds, setWorkspaceIds] = useState(null);

        // 解析所有带 #lhaWorkspace 标签的工作区, 展开其全部子树笔记 id。
        useEffect(() => {
            let alive = true;
            async function resolve() {
                const ids = new Set();
                try {
                    const notes = await searchForNotes("#lhaWorkspace");
                    for (const n of notes || []) {
                        ids.add(n.noteId);
                        try {
                            const note = await getNote(n.noteId);
                            const subtree = note?.getSubtreeNoteIds?.() || [];
                            subtree.forEach(id => ids.add(id));
                        } catch (_) {}
                    }
                } catch (_) {}
                if (alive) setWorkspaceIds(ids);
            }
            resolve();
            // 每隔一段时间重扫, 方便直接在前端改标签; 改完仍建议 Ctrl+R。
            const t = setInterval(resolve, 8000);
            return () => { alive = false; clearInterval(t); };
        }, []);

        // 命中目标工作区 → 注入黑丝; 否则立刻移除, 交还默认皮肤。
        useEffect(() => {
            const inScope = !!workspaceIds && !!noteId && workspaceIds.has(noteId);
            const existing = document.getElementById(STYLE_ID);
            if (inScope) {
                if (!existing) {
                    const s = document.createElement("style");
                    s.id = STYLE_ID;
                    s.textContent = BLACK_CSS;
                    document.head.appendChild(s);
                }
                document.body.dataset.lhaScoped = "on";
            } else {
                existing?.remove();
                delete document.body.dataset.lhaScoped;
            }
        }, [noteId, workspaceIds]);

        // 组件不渲染任何可见内容, 只负责作用域化的主题注入。
        return null;
    }
});

[mowityx]

Thank you so much! It works perfectly!