How to edit default theme(or use custom line height globally)

[SamKook]

The default double line spacing makes formatting text properly extremely difficult so after a bit of research, it seems the best way to fix that is to use a custom theme and reduce the line height since there is sadly no option in the interface to fix that problem(which is bad enough to make me change software entirely, I'm bald from pulling all of my hair using forums that force double line spacing on users, it baffles my mind since it makes things so much harder to read unless people write with zero formatting).

I like the default theme and I'm not looking to design my own so I just want to edit it(realistically, make a copy and edit that so it doesn't get overwritten with updates) but I can't seem to find where they are stored and I've already spent too much time trying to find it so I would really appreciate if someone could tell me either relative to the installation path or in the github repo(which has terrible search, show more file starts searching the code instead of files...)

If only #712 would have been taken more seriously as an issue since that is what I would call this, I don't understand people who think this is fine. Pressing shift+enter for every single line is not a solution.

[dosubot[bot]]

Hi @SamKook! I'm Dosu and I’m helping the Trilium team.

There’s no built-in option in Trilium’s interface to change line height globally—you’ll need to use custom CSS. The default theme CSS files are in the GitHub repo: theme-dark.css and theme-light.css (release notes).

To safely customize line height without losing changes during updates, copy the CSS from your preferred theme file and create a new note in Trilium:

1. Make a new note and set its type to CSS.
2. Paste the theme CSS you copied.
3. Add an attribute: #appTheme=YourThemeName (the note name must match the value).
4. Select your new theme in Options → Theme.

For quick global tweaks (like line height), you can also create a CSS note and add the label #appCss. For example, to reduce line spacing in note content and the tree view, add something like:

.note-detail-editable-text, .note-detail-readonly-text {
    line-height: 1.3 !important;
}
.fancytree-node {
    line-height: 1.2 !important;
}

Then refresh Trilium to apply the changes (example and instructions).

Editing the default theme directly isn’t recommended, as updates will overwrite your changes—always copy and customize as described above (theme creation guide).

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[SamKook]

That bot isn't great, the link to the files are wrong, but at least it did help me find them locally.

Doesn't work though, if I create a new theme, apply it and refresh, it turns to a light theme and the line spacing seems to remain unchanged, even set to 0.1.

All I did was add "#appTheme=Modified default theme" in a line of its own near the top and "body .note-detail-editable-text, .note-detail-readonly-text { line-height: 0.1 !important; }" at the very bottom(Tried without "body " at first and neither work).

Guess I'll make a feature request and continue my search for another hosted note software in the mean time since I don't have high hopes, unless someone has a solution to this that isn't client side.

[SamKook]

Asked gemini for advice on how to bypass this and apparently we can run javascript from notes so creating a "JS frontend" type note with the label(Owned Attributes) "#run=frontendStartup" and this code in the document will intercept the enter key and substitute its behavior with shift+enter, taking care of that problem:

window.addEventListener('keydown', (event) => {
    // Check for the Enter key without Shift/Ctrl/Alt
    if (event.key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.altKey) {
        
        // Find the editor container relative to where the cursor is
        const editorElement = event.target.closest('.ck-editor__editable');
        
        if (editorElement) {
            const editor = editorElement.ckeditorInstance;

            if (editor) {
                // Perform the soft break (Shift+Enter behavior)
                editor.execute('shiftEnter');
                
                // Block the default paragraph creation
                event.preventDefault();
                event.stopImmediatePropagation();
            }
        }
    }
}, true); // Use capture phase to ensure we beat internal listeners

[SamKook]

Annoyingly, lists don't work with the shift+enter behavior, even though that's how they are displayed so here's the updated code that inverts the behavior instead:

window.addEventListener('keydown', (event) => {
    if (event.key !== 'Enter') return;

    const editorElement = event.target.closest('.ck-editor__editable');
    if (!editorElement) return;

    const editor = editorElement.ckeditorInstance;
    if (!editor) return;

    // Enter -> Soft Break
    if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
        editor.execute('shiftEnter');
        event.preventDefault();
        event.stopImmediatePropagation();
    } 
    // Shift+Enter -> New Paragraph
    else if (event.shiftKey && !event.ctrlKey && !event.altKey) {
        editor.execute('enter');
        event.preventDefault();
        event.stopImmediatePropagation();
    }
}, true);

[adoriandoran]

Do you want to reduce the line height for the note content or the whole UI?

[adoriandoran]

It's actually easy to customize the style for your content. You don't have to create your own theme.

Create a code note and select CSS as language. Paste the following snippet:

.note-detail-readonly-text-content, 
.note-detail-editable-text-editor {
    /* Line height */
    line-height: 120% !important;

    p {
        /* Space after paragraph */
        margin-bottom: 8pt;
    }
}

Then open the attributes panel (in status bar) and add #appCss. This will mark the note as being a custom style for Trilium. Restart Trilium and now the line height and paragraph spacing will be personalized. Restart Trilium each time you modify this CSS for the changes to apply.

[SamKook]

Thanks, that works. I tried that with what the bot said before modifying a copy of the default theme but I'm not a css pro so I'm guessing something was wrong with it.
The problem was the note content. The rest of the UI does have more spacing than I would have used but that's not an issue.

It's not a great solution though since not everything is using the paragraph spacing(which I found out testing with my JS script above), lists for example so those get much too close.

It's a bit annoying to have to use shift+enter for lists, but it is a much better solution to that problem than messing with the line spacing so I'm happy now.
Finding that trick, I even disabled ctrl+s, which was another problem I had since I do it by reflex to save a lot and it was stealing focus from the note editor so I rebound it to saving a revision since there seems to be no way to see if a note has been actually saved or not.
I've lost quite a few lines in notes with nextcloud autosave so having a way to manually save is required I would say(or at the very least a way to see if it's saved or not, but that's not ideal since it's easy to not think about checking that) and from my understanding, this does it.

[adoriandoran]

It's not a great solution though since not everything is using the paragraph spacing(which I found out testing with my JS script above), lists for example so those get much too close.

You can limit the line height just for paragraphs and reduce the spacing after lists as well with:

.note-detail-readonly-text-content, 
.note-detail-editable-text-editor {
    p {
        /* Line height */
        line-height: 120% !important;
    }

    p, ul, ol {
        /* Space after paragraph */
        margin-bottom: 8pt;
    }
}

[SamKook]

I don't think you understand what the problem is, but setting the margin bottom to 0 seems to be pretty close to what I want, which is consistent spacing between lines(aka no extra dead space when you press enter to change a line vs shift+enter, aka no double line spacing by default). There is only a slight difference now, which is at least acceptable.
line-height seems to affect line spacing inside a p tag, which is the opposite of what I want.

That way I can actually control how my text is formatted(without pressing an extra key for every single line I type, which is insane multiplied by many thousands), which makes for much easier reading since I don't write walls of text, which is what double line spacing is useful for.

In html terms, I don't want to use the p tag ever, only br when changing lines, but that isn't an option apparently.

[adoriandoran]

Then this should be what you actually need:

.note-detail-readonly-text-content, 
.note-detail-editable-text-editor {
    p {
        /* Space after paragraph */
        margin-bottom: 0;
    }
}

No more spacing after paragraphs. Am I missing something else?

In html terms, I don't want to use the p tag ever, only br when changing lines, but that isn't an option apparently.

Yes, the editor is designed to create a new paragraph each time you press Enter. This behavior can't be changed.

[SamKook]

I feel like all you've read is the title of the thread and nothing before your first reply. Skimming through stuff can save time, but it doesn't when you fail to understand what's going on.

The post above your first one is me giving the solution to change that behavior you just said can't be changed.

The code you just pasted, which I appreciate as well as all the help, don't get me wrong, is what I already said I tried and is pretty close to what I want, but the spacing is not quite consistent so something else is making a small difference and it is slightly annoying to look at so I still prefer my solution of inverting the behavior of enter and shift+enter(which isn't ideal because of how lists work).

[eliandoran]

@SamKook , it's up to you if you prefer another solution. @adoriandoran was trying to help.

[SamKook]

I know, that's why I specifically mentioned that I do appreciate it since I'm aware I'm probably not sounding like it.

It did help since all the other solutions I found searching here before were much inferior or completely wrong for this version at least, but I also wanted them to be aware that they likely didn't handle replying here as best as they could have. I'm only meaning it as constructive criticism, I'm not mad or ungrateful for their time.

[SamKook]

To be clear, I undid the answer mark since the solution is still incomplete even if it's possibly the best it can be.