Steel Blue theme does not work in 0.63.3 about trilium

[zadam]

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]

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]

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).