Ayu-Mirage.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: 'Merriweather-Regular';
  font-style: normal;
  font-weight: 400;
  src: url('/custom/fonts/Merriweather.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto-Regular';
  font-style: normal;
  font-weight: 400;
  src: url('/custom/fonts/Roboto.woff2') format('woff2');
}

:root {
  --main-font-family: 'Merriweather-Regular' !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: 'Merriweather-Regular' !important;

  --bg: #1f2430;
  --bg-accent: #191e2a;
  --main-text: #cbccc6;
  --muted-text: #D8EBA1;
  --accent-1: #a6cc70;
  --accent-2: #77a8d9;
  --accent-3: #ffcc664d;
  --btn-bg: #34455a;

  --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);
  --button-border-radius: 5px;
  --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);
}