darkasher.css

/*
 * 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 {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 400;
    src: url('/custom/fonts/fira-sans.woff2') format('woff2');
}

:root {
    --bg: #2a363a;
    --bg-accent: #262e31;
    --main-text: #fcf2e9;
    --muted-text: #707a8c;
    --accent-1: #e84a5f;
    --accent-2: #ff847d;
    --accent-3: #fecea8;
    --btn-bg: #99b898;

    --main-font-family: 'Fira Sans' !important;
    --main-font-size: normal;
    --tree-font-family: inherit;
    --tree-font-size: normal;
    --detail-font-family: inherit;
    --detail-font-size: normal;
    --detail-text-font-family: 'Fira Sans' !important;

    --main-background-color: var(--bg);
    --main-text-color: var(--main-text);
    --main-border-color: var(--main-text);
    --accented-background-color: var(--bg-accent);
    --more-accented-background-color: var(--btn-bg);

    --header-background-color: var(--bg-accent);

    --launcher-pane-background-color: var(--bg);
    --launcher-pane-text-color: var(--main-text);


    --left-pane-background-color: var(--bg-accent);
    --left-pane-text-color: var(--main-text);

    --modal-background-color: var(--bg);
    --modal-backdrop-color: black;

    --menu-text-color: var(--main-text);
    --menu-background-color: var(--bg-accent);

    --button-background-color: var(--btn-bg);
    --button-disabled-background-color: var(--bg);
    --button-border-color: var(--accent-3);
    --button-text-color: var(--muted-text);


    --input-text-color: var(--main-text);
    --input-background-color: var(--bg);

    --hover-item-text-color: var(--bg-accent);
    --hover-item-background-color: var(--accent-1);
    --active-item-text-color: var(--bg-accent);
    --active-item-background-color: var(--accent-2);


    --tooltip-background-color: var(--bg-accent);
    --link-color: var(--accent-1);
    ;


    --scrollbar-border-color: rgba(175, 184, 198, 0.5);
}

a:hover {
    color: var(--accent-2);
}

#note-detail-text {
    font-size: 75%;
}

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