How do I add a custom font to default dark theme?

[verveq]

Hi
Trilium version 0.59.3
I'm using the default dark theme + In the Appearance subsection of the Options the option "override theme fonts" is on. and thus it is possible to choose fonts from the dropdown menu. Is there any way to add additional fonts to choose from to that menu?
If not then, alternatively, is there any way to add required fonts to the dark theme itself somehow? I don't have the theme's CSS note (it seems) in the Trilium Demo's theme examples note/folder, so I'm not sure how to access it.

[XXXJetfireXXX]

One way to do so (I think) is by dropping the font file inside the database and using it for your theme. Though I'm not sure how exactly you can 'select' it. My theme, for example, uses this custom font family:

But Montserrat-Light already exists in Trillium's assets, which makes it easier for me to accomplish.

Here is how I replace a certain image with the one inside a database (with the new image's note id inside its url):


I hope this helps.

[verveq]

Thanks for the help!
Upon further search It seems it is possible to import fonts into the theme as per this example:
https://github.com/raphwriter/trilium-theme-melon

To get the full experience you need to install some additional fonts.
The web font files (.woff) have to be imported into the theme note (right click on theme note, select Import into note)
the customResourceProvider attribute needs to be added to every font file you want to use
the respective attribute value should be fonts/Font-File-Name.woff

Example Attributes
#originalFileName=FiraCode-Regular.woff
#customResourceProvider="fonts/FiraCode-Regular.woff"

Question remains though: in case I'm otherwise fully content with the default dark theme how do I modify it only in the fonts department? Does it have a CSS somewhere? because I can't for the life of me find it.

[XXXJetfireXXX]

You can just copy the Dark theme from the source code and modify it into your own custom theme :)

:root {
    --theme-style: dark;

    --main-font-family: Montserrat;
    --main-font-size: normal;

    --tree-font-family: Montserrat;
    --tree-font-size: normal;

    --detail-font-family: Montserrat;
    --detail-font-size: normal;

    --monospace-font-family: JetBrainsLight;
    --monospace-font-size: normal;

    --main-background-color: #333;
    --main-text-color: #ccc;
    --main-border-color: #aaa;
    --dropdown-border-color: #555;

    --accented-background-color: #555;
    --more-accented-background-color: #777;

    --button-background-color: transparent;
    --button-border-color: #ccc;
    --button-text-color: currentColor;
    --button-border-radius: 5px;
    --button-disabled-background-color: transparent;
    --button-disabled-text-color: #999;

    --primary-button-background-color: #888;
    --primary-button-text-color: white;
    --primary-button-border-color: #999;

    --muted-text-color: #bbb;

    --input-text-color: #ccc;
    --input-background-color: #333;

    --hover-item-text-color: #ccc;
    --hover-item-background-color: transparent;
    --hover-item-border-color: #aaa;

    --active-item-text-color: black;
    --active-item-background-color: #777;
    --active-item-border-color: transparent;

    --menu-text-color: white;
    --menu-background-color: #222;

    --modal-background-color: #333;
    --modal-backdrop-color: #444;

    --left-pane-background-color: #1f1f1f;
    --left-pane-text-color: #AAAAAA;

    --launcher-pane-background-color: #1f1f1f;
    --launcher-pane-text-color: #AAAAAA;

    --active-tab-background-color: #666;
    --active-tab-hover-background-color: #737373;
    --active-tab-text-color: #ccc;

    --inactive-tab-background-color: #444;
    --inactive-tab-hover-background-color: #525252;
    --inactive-tab-text-color: #bbb;

    --scrollbar-border-color: #888;
    --tooltip-background-color: #333;
    --link-color: lightskyblue;

    --mermaid-theme: dark;
}

body .global-menu-button {
    background-image: url("../images/icon-grey.svg");
}

body ::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

body .CodeMirror {
    filter: invert(90%) hue-rotate(180deg);
}

.excalidraw.theme--dark {
    --theme-filter: invert(80%) hue-rotate(180deg) !important;
}

[verveq]

It should have occurred to me lol:) Thanks for the help! Worked like a charm:)

[XXXJetfireXXX]

No prob, glad I helped!