Steel Blue theme does not work in 0.63.3

cbop-dev commented 3 months ago

Trilium Version

0.63.3

What operating system are you using?

Other Linux

What is your setup?

Local + server sync

Operating System Version

Linux Mint 21.1 Cinnamon, kernel 6.5.0-18

Description

In the latest (0.63.3) version of the app, both Linux Desktop and the Linux Server versions (viewed via latest versions of Firefox and Chrome), the "Steel Blue" theme is identical to the "Light Theme". There is no trace of "steel blue", or any sort of blue, anywhere.

I'm guessing the Light Theme CSS was mistakenly duplicated into the Blue Steel theme.

Error logs

No response

zadam commented 3 months ago

Hello, works for me on a fresh document:

Is it possible you installed Trilium a long time ago? The issue might be coming from the fact that this theme (and the rest of demo document) is created when Trilium is initially set up and then the theme is not updated. It's possible that the version you have is no longer compatible.

You can update it with this up to date:

/*
 * This is a demo of how you can create custom theme for Trilium. You can activate it by going
 * into options (top-right corner) in first tab "Appearance".
 * 
 * You can read some details on theming here: http://github.com/zadam/trilium/wiki/Themes
 */

@font-face { /* This will be used as main UI font (see below) */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../../../custom/fonts/raleway.woff2') format('woff2');
}

@font-face { /* This will be used as text content font (see below) */
  font-family: 'Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('../../../custom/fonts/garamond.woff2') format('woff2');
}

:root {
    --theme-style: light;

    --main-font-family: 'Raleway';
    --main-font-size: normal;

    --tree-font-family: 'Raleway';
    --tree-font-size: normal;

    --detail-font-family: 'Raleway';
    --detail-font-size: normal;

    --monospace-font-family: 'Monospace';
    --monospace-font-size: normal;

    --main-background-color: #404552;
    --main-text-color: #AFB8C6;
    --main-border-color: #AFB8C6;

    --accented-background-color: #383C4A;
    --more-accented-background-color: #2F343F;

    --button-text-color: #AFB8C6;
    --button-background-color: #2F343F;
    --button-disabled-text-color: #86919F;
    --button-disabled-background-color: #404552;
    --button-border-color: #333;
    --button-border-radius: 2px;

    --primary-button-background-color: #6c757d;
    --primary-button-text-color: white;
    --primary-button-border-color: #6c757d;

    --muted-text-color: #86919F;

    --input-text-color: #AFB8C6;
    --input-background-color: #404552;

    --hover-item-text-color: white;
    --hover-item-background-color: #4877B1;

    --active-item-text-color: white;
    --active-item-background-color: #4877B1;

    --menu-text-color: #AFB8C6;
    --menu-background-color: #383C4A;

    --modal-background-color: #404552;
    --modal-backdrop-color: black;

    --left-pane-background-color: #2F343F;
    --left-pane-text-color: #AFB8C6;

    --launcher-pane-background-color: #2F343F;
    --launcher-pane-text-color: #AFB8C6;

    --active-tab-background-color: #2F343F;
    --active-tab-text-color: #AFB8C6;

    --inactive-tab-background-color: #404552;
    --inactive-tab-text-color: #AFB8C6;

    --scrollbar-border-color: rgba(175, 184, 198, 0.5);
    --tooltip-background-color: #383C4A;
    --link-color: lightskyblue;

    --mermaid-theme: forest;
}

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

body .note-detail-editable-text, body .note-detail-readonly-text {
    font-size: 120%; /* Garamond is subjectively smaller */
}

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

cbop-dev commented 3 months ago

Yes, when I replaced the CSS in Steel Blue with your new code it works. This does seem like an app updating bug; at least the new theme versions should be added alongside any old legacy ones (if the worry is that the user may have customized the old ones and you don't want to overwrite them).

zadam commented 3 months ago

Conceptually the "Demo document" is just an example how to do things yourself. As such "Steel Blue" is not a standard theme, it's an example of how user could create their own theme. (Trilium has two built-in themes which do update with new app releases).

zadam / trilium