mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-08-11 02:42:27 +08:00
Merge pull request #800 from TriliumNext/feat/themes/color-scheme-preference
Color scheme selection
This commit is contained in:
Elian Doran
GitHub
commit
82676a4d97
@ -69,8 +69,11 @@ export default class ThemeOptions extends OptionsWidget {
|
||||
async optionsLoaded(options) {
|
||||
const themes = [
|
||||
{ val: 'next', title: t("theme.triliumnext") },
|
||||
{ val: 'next-light', title: t("theme.triliumnext-light") },
|
||||
{ val: 'next-dark', title: t("theme.triliumnext-dark") },
|
||||
{ val: 'auto', title: t('theme.auto_theme') },
|
||||
{ val: 'light', title: t('theme.light_theme') },
|
||||
{ val: 'dark', title: t('theme.dark_theme') }
|
||||
{ val: 'dark', title: t('theme.dark_theme') }
|
||||
].concat(await server.get('options/user-themes'));
|
||||
|
||||
this.$themeSelect.empty();
|
||||
|
||||
170
src/public/stylesheets/theme-next-dark.css
Normal file
170
src/public/stylesheets/theme-next-dark.css
Normal file
@ -0,0 +1,170 @@
|
||||
/* Import the Next theme base style */
|
||||
@import url(./theme-next/base.css);
|
||||
|
||||
/*
|
||||
* Color scheme
|
||||
*/
|
||||
:root {
|
||||
--theme-style: dark;
|
||||
--native-titlebar-background: #00000000;
|
||||
|
||||
--main-background-color: #333;
|
||||
--main-text-color: #ccc;
|
||||
--main-border-color: #454545;
|
||||
--subtle-border-color: #313131;
|
||||
--dropdown-border-color: #292929;
|
||||
--dropdown-shadow-opacity: .6;
|
||||
--dropdown-item-icon-destructive-color: #de6e5b;
|
||||
--disabled-tooltip-icon-color: #7fd2ef;
|
||||
|
||||
|
||||
--accented-background-color: #555;
|
||||
|
||||
--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: #efefef;
|
||||
--hover-item-background-color: #ffffff24;
|
||||
--hover-item-border-color: transparent;
|
||||
|
||||
--active-item-text-color: var(--left-pane-text-color);
|
||||
--active-item-background-color: #777;
|
||||
--active-item-border-color: transparent;
|
||||
|
||||
--new-tab-button-background: #fff0;
|
||||
--new-tab-button-color: #ffffff96;
|
||||
--new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
|
||||
--new-tab-button-hover-background: #fff3;
|
||||
--new-tab-button-hover-color: white;
|
||||
|
||||
--menu-text-color: #e3e3e3;
|
||||
--menu-background-color: #222222d9;
|
||||
--menu-item-icon-color: #8c8c8c;
|
||||
--menu-item-disabled-opacity: .5;
|
||||
--menu-item-keyboard-shortcut-color: #ffffff8f;
|
||||
--menu-item-arrow-color: #ffffffa3;
|
||||
--menu-item-delimiter-color: #ffffff1c;
|
||||
|
||||
|
||||
--modal-background-color: #333;
|
||||
--modal-backdrop-color: #444;
|
||||
|
||||
--quick-search-background: #ffffff12;
|
||||
--quick-search-color: #ffffff52;
|
||||
--quick-search-hover-background: #ffffff1f;
|
||||
--quick-search-focus-border: #80808095;
|
||||
--quick-search-focus-background: #ffffff1f;
|
||||
--quick-search-focus-color: white;
|
||||
|
||||
--left-pane-collapsed-border-color: #0009;
|
||||
--left-pane-background-color: #1f1f1f;
|
||||
--left-pane-text-color: #AAAAAA;
|
||||
--left-pane-item-hover-background: #ffffff0d;
|
||||
--left-pane-item-selected-background: #ffffff25;
|
||||
--left-pane-item-selected-color: #dfdfdf;
|
||||
--left-pane-item-selected-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
|
||||
--left-pane-item-action-button-background: #ffffff73;
|
||||
--left-pane-item-action-button-color: black;
|
||||
--left-pane-item-action-button-hover-background: #ffffffad;
|
||||
--left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, .15);
|
||||
--left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, .25);
|
||||
|
||||
--launcher-pane-background-color: #1a1a1a;
|
||||
--launcher-pane-horizontal-background-color: #282828;
|
||||
--launcher-pane-horizontal-border-color: rgb(22, 22, 22);
|
||||
--launcher-pane-text-color: #909090;
|
||||
--launcher-pane-button-hover-color: #ffffff;
|
||||
--launcher-pane-button-hover-background: #ffffff1c;
|
||||
--launcher-pane-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, .2);
|
||||
|
||||
--protected-session-active-icon-color: #8edd8e;
|
||||
--sync-status-error-pulse-color: #f47871;
|
||||
|
||||
--root-background: var(--left-pane-background-color);
|
||||
|
||||
--gutter-color: transparent;
|
||||
--gutter-hover-color: #626262;
|
||||
|
||||
--tab-close-button-hover-background: #a45353;
|
||||
--tab-close-button-hover-color: white;
|
||||
|
||||
--active-tab-background-color: #ffffff1c;
|
||||
--active-tab-hover-background-color: var(--active-tab-background-color);
|
||||
--active-tab-text-color: #ffffffcd;
|
||||
--active-tab-shadow: 3px 3px 6px rgba(0, 0, 0, .2), -1px -1px 3px rgba(0, 0, 0, .4);
|
||||
--active-tab-dragging-shadow: var(--active-tab-shadow), 0 0 20px rgba(0, 0, 0, .4);
|
||||
|
||||
--inactive-tab-background-color: transparent;
|
||||
--inactive-tab-hover-background-color: #ffffff0f;
|
||||
--inactive-tab-text-color: #7c7c7c;
|
||||
|
||||
--right-pane-item-hover-background: #ffffff26;
|
||||
--right-pane-item-hover-color: white;
|
||||
|
||||
--scrollbar-border-color: #666;
|
||||
--scrollbar-background-color: #333;
|
||||
--link-color: lightskyblue;
|
||||
|
||||
--mermaid-theme: dark;
|
||||
|
||||
--code-block-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
|
||||
|
||||
--card-background-color: #363636;
|
||||
--card-background-hover-color: #3c3c3c;
|
||||
--card-background-press-color: #464646;
|
||||
--card-border-color: #222222;
|
||||
--card-box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
|
||||
|
||||
--calendar-color: var(--menu-text-color);
|
||||
--calendar-weekday-labels-color: var(--muted-text-color);
|
||||
--calendar-day-hover-color: var(--hover-item-text-color);
|
||||
--calendar-day-hover-background: var(--active-item-background-color);
|
||||
--calendar-day-highlight-background: #8080805a;
|
||||
|
||||
--timeline-bullet-color: gray;
|
||||
--timeline-bullet-hover-color: white;
|
||||
--timeline-connector-color: #464646;
|
||||
--timeline-connector-active-color: #545454;
|
||||
--timeline-connector-hover-blend-mode: exclusion;
|
||||
|
||||
--tooltip-background-color: rgba(67, 67, 67, 0.86);
|
||||
--tooltip-foreground-color: #ffffffeb;
|
||||
--tooltip-shadow-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/*
|
||||
* Dark color scheme tweaks
|
||||
*/
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
body .todo-list input[type="checkbox"]:not(:checked):before {
|
||||
border-color: var(--muted-text-color) !important;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
filter: invert(1);
|
||||
}
|
||||
145
src/public/stylesheets/theme-next-light.css
Normal file
145
src/public/stylesheets/theme-next-light.css
Normal file
@ -0,0 +1,145 @@
|
||||
/* Import the Next theme base style */
|
||||
@import url(./theme-next/base.css);
|
||||
|
||||
/*
|
||||
* Color scheme
|
||||
*/
|
||||
:root {
|
||||
--theme-style: light;
|
||||
--native-titlebar-background: #ffffff00;
|
||||
|
||||
--main-background-color: white;
|
||||
--main-text-color: black;
|
||||
--main-border-color: #dbdbdb;
|
||||
--subtle-border-color: rgba(0, 0, 0, 0.1);
|
||||
--dropdown-border-color: #ccc;
|
||||
--dropdown-shadow-opacity: .2;
|
||||
--dropdown-item-icon-destructive-color: #ec5138;
|
||||
--disabled-tooltip-icon-color: #004382;
|
||||
|
||||
--accented-background-color: #f5f5f5;
|
||||
|
||||
--button-background-color: transparent;
|
||||
--button-border-color: #ddd;
|
||||
--button-text-color: black;
|
||||
--button-border-radius: 5px;
|
||||
--button-disabled-background-color: #ddd;
|
||||
--button-disabled-text-color: black;
|
||||
|
||||
--primary-button-background-color: #6c757d;
|
||||
--primary-button-text-color: white;
|
||||
--primary-button-border-color: #6c757d;
|
||||
|
||||
--muted-text-color: #666;
|
||||
|
||||
--input-text-color: black;
|
||||
--input-background-color: transparent;
|
||||
|
||||
--hover-item-text-color: black;
|
||||
--hover-item-background-color: #0000001a;
|
||||
--hover-item-border-color: transparent;
|
||||
|
||||
--active-item-text-color: var(--left-pane-text-color);
|
||||
--active-item-background-color: #ddd;
|
||||
--active-item-border-color: transparent;
|
||||
|
||||
--menu-text-color: #272727;
|
||||
--menu-background-color: #ffffffd9;
|
||||
--menu-item-icon-color: #727272;
|
||||
--menu-item-disabled-opacity: .5;
|
||||
--menu-item-keyboard-shortcut-color: #666666a8;
|
||||
--menu-item-arrow-color: #00000080;
|
||||
--menu-item-delimiter-color: #00000030;
|
||||
|
||||
--modal-background-color: white;
|
||||
--modal-backdrop-color: black;
|
||||
|
||||
--quick-search-background: #00000012;
|
||||
--quick-search-color: #06060682;
|
||||
--quick-search-hover-background: #00000020;
|
||||
--quick-search-focus-border: #00000029;
|
||||
--quick-search-focus-background: #ffffff80;
|
||||
--quick-search-focus-color: #000;
|
||||
|
||||
--left-pane-collapsed-border-color: #0000000d;
|
||||
--left-pane-background-color: #f2f2f2;
|
||||
--left-pane-text-color: #383838;
|
||||
--left-pane-item-hover-background: #eaeaea;
|
||||
--left-pane-item-selected-background: white;
|
||||
--left-pane-item-selected-color: black;
|
||||
--left-pane-item-selected-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
|
||||
--left-pane-item-action-button-background: #d7d7d7;
|
||||
--left-pane-item-action-button-color: inherit;
|
||||
--left-pane-item-action-button-hover-background: white;
|
||||
--left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, .15);
|
||||
--left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, .25);
|
||||
|
||||
--launcher-pane-background-color: #e8e8e8;
|
||||
--launcher-pane-horizontal-background-color: #fafafa;
|
||||
--launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.1);
|
||||
--launcher-pane-text-color: #000000bd;
|
||||
--launcher-pane-button-hover-color: black;
|
||||
--launcher-pane-button-hover-background: white;
|
||||
--launcher-pane-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, .075);
|
||||
|
||||
--protected-session-active-icon-color: #16b516;
|
||||
--sync-status-error-pulse-color: #ff5528;
|
||||
|
||||
--root-background: var(--left-pane-background-color);
|
||||
|
||||
--gutter-color: transparent;
|
||||
--gutter-hover-color: #bfbfbf;
|
||||
|
||||
--tab-close-button-hover-background: #c95a5a;
|
||||
--tab-close-button-hover-color: white;
|
||||
|
||||
--active-tab-background-color: white;
|
||||
--active-tab-hover-background-color: var(--active-tab-background-color);
|
||||
--active-tab-text-color: black;
|
||||
--active-tab-shadow: 3px 3px 6px rgba(0, 0, 0, .1), -1px -1px 3px rgba(0, 0, 0, .05);
|
||||
--active-tab-dragging-shadow: var(--active-tab-shadow), 0 0 20px rgba(0, 0, 0, .1);
|
||||
|
||||
--inactive-tab-background-color: transparent;
|
||||
--inactive-tab-hover-background-color: #00000016;
|
||||
--inactive-tab-text-color: #4e4e4e;
|
||||
|
||||
--new-tab-button-background: #d8d8d8;
|
||||
--new-tab-button-color: #3a3a3a;
|
||||
--new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
|
||||
--new-tab-button-hover-background: white;
|
||||
--new-tab-button-hover-color: black;
|
||||
|
||||
--right-pane-item-hover-background: #ececec;
|
||||
--right-pane-item-hover-color: inherit;
|
||||
|
||||
--scrollbar-border-color: #ddd;
|
||||
--scrollbar-background-color: #ddd;
|
||||
--link-color: blue;
|
||||
|
||||
--mermaid-theme: default;
|
||||
|
||||
--code-block-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.2);
|
||||
|
||||
--card-background-color: var(--accented-background-color);
|
||||
--card-background-hover-color: #f9f9f9;
|
||||
--card-background-press-color: #efefef;
|
||||
--card-border-color: #eaeaea;
|
||||
--card-shadow-color: rgba(0, 0, 0, 0.1);
|
||||
--card-box-shadow: 0 0 12px var(--card-shadow-color);
|
||||
|
||||
--calendar-color: var(--menu-text-color);
|
||||
--calendar-weekday-labels-color: var(--muted-text-color);
|
||||
--calendar-day-hover-color: var(--hover-item-text-color);
|
||||
--calendar-day-hover-background: var(--active-item-background-color);
|
||||
--calendar-day-highlight-background: #80808024;
|
||||
|
||||
--timeline-bullet-color: #a5a5a5;
|
||||
--timeline-bullet-hover-color: black;
|
||||
--timeline-connector-color: #f1f1f1;
|
||||
--timeline-connector-active-color: #ddd;
|
||||
--timeline-connector-hover-blend-mode: multiply;
|
||||
|
||||
--tooltip-background-color: rgba(255, 255, 255, 0.85);
|
||||
--tooltip-foreground-color: #000000ba;
|
||||
--tooltip-shadow-color: rgba(0, 0, 0, .15);
|
||||
}
|
||||
@ -1,393 +1,7 @@
|
||||
@import url(./theme-next/shell.css);
|
||||
@import url(./theme-next/settings.css);
|
||||
@import url(./theme-next/notes/text.css);
|
||||
/* Import the light color scheme.
|
||||
* This is the base color scheme, always active and overridden by the dark
|
||||
* color scheme stylesheet when necessary. */
|
||||
@import url(./theme-next-light.css);
|
||||
|
||||
@font-face {
|
||||
font-family: "Noto Sans";
|
||||
src: url(../fonts/Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Ubuntu Sans";
|
||||
src: url(../fonts/Ubuntu_Sans/UbuntuSans-VariableFont_wdth\,wght.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Nunito";
|
||||
src: url(../fonts/Nunito/Nunito-VariableFont_wght.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
src: url(../fonts/Inter/Inter-VariableFont_opsz\,wght.ttf);
|
||||
}
|
||||
|
||||
:root {
|
||||
/* --main-font-family: "Noto Sans", sans-serif; */
|
||||
--main-font-family: "Segoe UI", sans-serif;
|
||||
/* --main-font-family: "Ubuntu", sans-serif; */
|
||||
/* --main-font-family: "Nunito", sans-serif; */
|
||||
/* --main-font-family: "Inter", sans-serif; */
|
||||
|
||||
--main-font-size: normal;
|
||||
|
||||
--tree-font-family: var(--main-font-family);
|
||||
--tree-font-size: normal;
|
||||
|
||||
--detail-font-family: var(--main-font-family);
|
||||
--detail-font-size: normal;
|
||||
|
||||
--monospace-font-family: JetBrainsLight;
|
||||
--monospace-font-size: normal;
|
||||
|
||||
--left-pane-item-selected-shadow-size: 2px;
|
||||
|
||||
--launcher-pane-size: 58px;
|
||||
--launcher-pane-horizontal-size: 54px;
|
||||
--launcher-pane-horizontal-icon-size: 20px;
|
||||
--launcher-pane-button-margin: 6px;
|
||||
--launcher-pane-button-gap: 3px;
|
||||
|
||||
--tree-actions-toolbar-horizontal-margin: 8px;
|
||||
--tree-actions-toolbar-vertical-margin: 8px;
|
||||
--tree-actions-toolbar-padding-size: 4px;
|
||||
--tree-actions-toolbar-collapsed-width: 40px;
|
||||
--tree-actions-toolbar-expand-button-size: 25px;
|
||||
|
||||
--tab-bar-height: 50px;
|
||||
--tab-height: 36px;
|
||||
--tab-first-item-horiz-offset: 1px;
|
||||
--new-tab-button-size: 24px;
|
||||
|
||||
--center-pane-border-radius: 10px;
|
||||
|
||||
--menu-padding-size: 8px;
|
||||
--menu-item-icon-vert-offset: 0;
|
||||
|
||||
--more-accented-background-color: var(--card-background-hover-color);
|
||||
|
||||
--timeline-left-gap: 20px;
|
||||
--timeline-right-gap: 20px;
|
||||
--timeline-item-top-padding: 4px;
|
||||
--timeline-item-bottom-padding: 8px;
|
||||
--timeline-bullet-size: 10px;
|
||||
--timeline-bullet-vertical-pos: .75em;
|
||||
--timeline-connector-size: 4px;
|
||||
|
||||
/* Theme capabilities */
|
||||
--tab-note-icons: true;
|
||||
}
|
||||
|
||||
/*
|
||||
* THEME COLORS
|
||||
*/
|
||||
|
||||
/*
|
||||
* Light theme scheme
|
||||
*/
|
||||
:root {
|
||||
--theme-style: light;
|
||||
--native-titlebar-background: #ffffff00;
|
||||
|
||||
--main-background-color: white;
|
||||
--main-text-color: black;
|
||||
--main-border-color: #dbdbdb;
|
||||
--subtle-border-color: rgba(0, 0, 0, 0.1);
|
||||
--dropdown-border-color: #ccc;
|
||||
--dropdown-shadow-opacity: .2;
|
||||
--dropdown-item-icon-destructive-color: #ec5138;
|
||||
--disabled-tooltip-icon-color: #004382;
|
||||
|
||||
--accented-background-color: #f5f5f5;
|
||||
|
||||
--button-background-color: transparent;
|
||||
--button-border-color: #ddd;
|
||||
--button-text-color: black;
|
||||
--button-border-radius: 5px;
|
||||
--button-disabled-background-color: #ddd;
|
||||
--button-disabled-text-color: black;
|
||||
|
||||
--primary-button-background-color: #6c757d;
|
||||
--primary-button-text-color: white;
|
||||
--primary-button-border-color: #6c757d;
|
||||
|
||||
--muted-text-color: #666;
|
||||
|
||||
--input-text-color: black;
|
||||
--input-background-color: transparent;
|
||||
|
||||
--hover-item-text-color: black;
|
||||
--hover-item-background-color: #0000001a;
|
||||
--hover-item-border-color: transparent;
|
||||
|
||||
--active-item-text-color: var(--left-pane-text-color);
|
||||
--active-item-background-color: #ddd;
|
||||
--active-item-border-color: transparent;
|
||||
|
||||
--menu-text-color: #272727;
|
||||
--menu-background-color: #ffffffd9;
|
||||
--menu-item-icon-color: #727272;
|
||||
--menu-item-disabled-opacity: .5;
|
||||
--menu-item-keyboard-shortcut-color: #666666a8;
|
||||
--menu-item-arrow-color: #00000080;
|
||||
--menu-item-delimiter-color: #00000030;
|
||||
|
||||
--modal-background-color: white;
|
||||
--modal-backdrop-color: black;
|
||||
|
||||
--quick-search-background: #00000012;
|
||||
--quick-search-color: #06060682;
|
||||
--quick-search-hover-background: #00000020;
|
||||
--quick-search-focus-border: #00000029;
|
||||
--quick-search-focus-background: #ffffff80;
|
||||
--quick-search-focus-color: #000;
|
||||
|
||||
--left-pane-collapsed-border-color: #0000000d;
|
||||
--left-pane-background-color: #f2f2f2;
|
||||
--left-pane-text-color: #383838;
|
||||
--left-pane-item-hover-background: #eaeaea;
|
||||
--left-pane-item-selected-background: white;
|
||||
--left-pane-item-selected-color: black;
|
||||
--left-pane-item-selected-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
|
||||
--left-pane-item-action-button-background: #d7d7d7;
|
||||
--left-pane-item-action-button-color: inherit;
|
||||
--left-pane-item-action-button-hover-background: white;
|
||||
--left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, .15);
|
||||
--left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, .25);
|
||||
|
||||
--launcher-pane-background-color: #e8e8e8;
|
||||
--launcher-pane-horizontal-background-color: #fafafa;
|
||||
--launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.1);
|
||||
--launcher-pane-text-color: #000000bd;
|
||||
--launcher-pane-button-hover-color: black;
|
||||
--launcher-pane-button-hover-background: white;
|
||||
--launcher-pane-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, .075);
|
||||
|
||||
--protected-session-active-icon-color: #16b516;
|
||||
--sync-status-error-pulse-color: #ff5528;
|
||||
|
||||
--root-background: var(--left-pane-background-color);
|
||||
|
||||
--gutter-color: transparent;
|
||||
--gutter-hover-color: #bfbfbf;
|
||||
|
||||
--tab-close-button-hover-background: #c95a5a;
|
||||
--tab-close-button-hover-color: white;
|
||||
|
||||
--active-tab-background-color: white;
|
||||
--active-tab-hover-background-color: var(--active-tab-background-color);
|
||||
--active-tab-text-color: black;
|
||||
--active-tab-shadow: 3px 3px 6px rgba(0, 0, 0, .1), -1px -1px 3px rgba(0, 0, 0, .05);
|
||||
--active-tab-dragging-shadow: var(--active-tab-shadow), 0 0 20px rgba(0, 0, 0, .1);
|
||||
|
||||
--inactive-tab-background-color: transparent;
|
||||
--inactive-tab-hover-background-color: #00000016;
|
||||
--inactive-tab-text-color: #4e4e4e;
|
||||
|
||||
--new-tab-button-background: #d8d8d8;
|
||||
--new-tab-button-color: #3a3a3a;
|
||||
--new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
|
||||
--new-tab-button-hover-background: white;
|
||||
--new-tab-button-hover-color: black;
|
||||
|
||||
--right-pane-item-hover-background: #ececec;
|
||||
--right-pane-item-hover-color: inherit;
|
||||
|
||||
--scrollbar-border-color: #ddd;
|
||||
--scrollbar-background-color: #ddd;
|
||||
--link-color: blue;
|
||||
|
||||
--mermaid-theme: default;
|
||||
|
||||
--code-block-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.2);
|
||||
|
||||
--card-background-color: var(--accented-background-color);
|
||||
--card-background-hover-color: #f9f9f9;
|
||||
--card-background-press-color: #efefef;
|
||||
--card-border-color: #eaeaea;
|
||||
--card-shadow-color: rgba(0, 0, 0, 0.1);
|
||||
--card-box-shadow: 0 0 12px var(--card-shadow-color);
|
||||
|
||||
--calendar-color: var(--menu-text-color);
|
||||
--calendar-weekday-labels-color: var(--muted-text-color);
|
||||
--calendar-day-hover-color: var(--hover-item-text-color);
|
||||
--calendar-day-hover-background: var(--active-item-background-color);
|
||||
--calendar-day-highlight-background: #80808024;
|
||||
|
||||
--timeline-bullet-color: #a5a5a5;
|
||||
--timeline-bullet-hover-color: black;
|
||||
--timeline-connector-color: #f1f1f1;
|
||||
--timeline-connector-active-color: #ddd;
|
||||
--timeline-connector-hover-blend-mode: multiply;
|
||||
|
||||
--tooltip-background-color: rgba(255, 255, 255, 0.85);
|
||||
--tooltip-foreground-color: #000000ba;
|
||||
--tooltip-shadow-color: rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
/*
|
||||
* Dark color scheme
|
||||
*/
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--theme-style: dark;
|
||||
--native-titlebar-background: #00000000;
|
||||
|
||||
--main-background-color: #333;
|
||||
--main-text-color: #ccc;
|
||||
--main-border-color: #454545;
|
||||
--subtle-border-color: #313131;
|
||||
--dropdown-border-color: #292929;
|
||||
--dropdown-shadow-opacity: .6;
|
||||
--dropdown-item-icon-destructive-color: #de6e5b;
|
||||
--disabled-tooltip-icon-color: #7fd2ef;
|
||||
|
||||
|
||||
--accented-background-color: #555;
|
||||
|
||||
--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: #efefef;
|
||||
--hover-item-background-color: #ffffff24;
|
||||
--hover-item-border-color: transparent;
|
||||
|
||||
--active-item-text-color: var(--left-pane-text-color);
|
||||
--active-item-background-color: #777;
|
||||
--active-item-border-color: transparent;
|
||||
|
||||
--new-tab-button-background: #fff0;
|
||||
--new-tab-button-color: #ffffff96;
|
||||
--new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
|
||||
--new-tab-button-hover-background: #fff3;
|
||||
--new-tab-button-hover-color: white;
|
||||
|
||||
--menu-text-color: #e3e3e3;
|
||||
--menu-background-color: #222222d9;
|
||||
--menu-item-icon-color: #8c8c8c;
|
||||
--menu-item-disabled-opacity: .5;
|
||||
--menu-item-keyboard-shortcut-color: #ffffff8f;
|
||||
--menu-item-arrow-color: #ffffffa3;
|
||||
--menu-item-delimiter-color: #ffffff1c;
|
||||
|
||||
|
||||
--modal-background-color: #333;
|
||||
--modal-backdrop-color: #444;
|
||||
|
||||
--quick-search-background: #ffffff12;
|
||||
--quick-search-color: #ffffff52;
|
||||
--quick-search-hover-background: #ffffff1f;
|
||||
--quick-search-focus-border: #80808095;
|
||||
--quick-search-focus-background: #ffffff1f;
|
||||
--quick-search-focus-color: white;
|
||||
|
||||
--left-pane-collapsed-border-color: #0009;
|
||||
--left-pane-background-color: #1f1f1f;
|
||||
--left-pane-text-color: #AAAAAA;
|
||||
--left-pane-item-hover-background: #ffffff0d;
|
||||
--left-pane-item-selected-background: #ffffff25;
|
||||
--left-pane-item-selected-color: #dfdfdf;
|
||||
--left-pane-item-selected-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
|
||||
--left-pane-item-action-button-background: #ffffff73;
|
||||
--left-pane-item-action-button-color: black;
|
||||
--left-pane-item-action-button-hover-background: #ffffffad;
|
||||
--left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, .15);
|
||||
--left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, .25);
|
||||
|
||||
--launcher-pane-background-color: #1a1a1a;
|
||||
--launcher-pane-horizontal-background-color: #282828;
|
||||
--launcher-pane-horizontal-border-color: rgb(22, 22, 22);
|
||||
--launcher-pane-text-color: #909090;
|
||||
--launcher-pane-button-hover-color: #ffffff;
|
||||
--launcher-pane-button-hover-background: #ffffff1c;
|
||||
--launcher-pane-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, .2);
|
||||
|
||||
--protected-session-active-icon-color: #8edd8e;
|
||||
--sync-status-error-pulse-color: #f47871;
|
||||
|
||||
--root-background: var(--left-pane-background-color);
|
||||
|
||||
--gutter-color: transparent;
|
||||
--gutter-hover-color: #626262;
|
||||
|
||||
--tab-close-button-hover-background: #a45353;
|
||||
--tab-close-button-hover-color: white;
|
||||
|
||||
--active-tab-background-color: #ffffff1c;
|
||||
--active-tab-hover-background-color: var(--active-tab-background-color);
|
||||
--active-tab-text-color: #ffffffcd;
|
||||
--active-tab-shadow: 3px 3px 6px rgba(0, 0, 0, .2), -1px -1px 3px rgba(0, 0, 0, .4);
|
||||
--active-tab-dragging-shadow: var(--active-tab-shadow), 0 0 20px rgba(0, 0, 0, .4);
|
||||
|
||||
--inactive-tab-background-color: transparent;
|
||||
--inactive-tab-hover-background-color: #ffffff0f;
|
||||
--inactive-tab-text-color: #7c7c7c;
|
||||
|
||||
--right-pane-item-hover-background: #ffffff26;
|
||||
--right-pane-item-hover-color: white;
|
||||
|
||||
--scrollbar-border-color: #666;
|
||||
--scrollbar-background-color: #333;
|
||||
--link-color: lightskyblue;
|
||||
|
||||
--mermaid-theme: dark;
|
||||
|
||||
--code-block-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
|
||||
|
||||
--card-background-color: #363636;
|
||||
--card-background-hover-color: #3c3c3c;
|
||||
--card-background-press-color: #464646;
|
||||
--card-border-color: #222222;
|
||||
--card-box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
|
||||
|
||||
--calendar-color: var(--menu-text-color);
|
||||
--calendar-weekday-labels-color: var(--muted-text-color);
|
||||
--calendar-day-hover-color: var(--hover-item-text-color);
|
||||
--calendar-day-hover-background: var(--active-item-background-color);
|
||||
--calendar-day-highlight-background: #8080805a;
|
||||
|
||||
--timeline-bullet-color: gray;
|
||||
--timeline-bullet-hover-color: white;
|
||||
--timeline-connector-color: #464646;
|
||||
--timeline-connector-active-color: #545454;
|
||||
--timeline-connector-hover-blend-mode: exclusion;
|
||||
|
||||
--tooltip-background-color: rgba(67, 67, 67, 0.86);
|
||||
--tooltip-foreground-color: #ffffffeb;
|
||||
--tooltip-shadow-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
body .todo-list input[type="checkbox"]:not(:checked):before {
|
||||
border-color: var(--muted-text-color) !important;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
/* Import the dark color scheme when the system preference is set to dark mode */
|
||||
@import url(./theme-next-dark.css) (prefers-color-scheme: dark);
|
||||
79
src/public/stylesheets/theme-next/base.css
Normal file
79
src/public/stylesheets/theme-next/base.css
Normal file
@ -0,0 +1,79 @@
|
||||
@import url(./shell.css);
|
||||
@import url(./settings.css);
|
||||
@import url(./notes/text.css);
|
||||
|
||||
@font-face {
|
||||
font-family: "Noto Sans";
|
||||
src: url(../fonts/Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Ubuntu Sans";
|
||||
src: url(../fonts/Ubuntu_Sans/UbuntuSans-VariableFont_wdth\,wght.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Nunito";
|
||||
src: url(../fonts/Nunito/Nunito-VariableFont_wght.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
src: url(../fonts/Inter/Inter-VariableFont_opsz\,wght.ttf);
|
||||
}
|
||||
|
||||
:root {
|
||||
/* --main-font-family: "Noto Sans", sans-serif; */
|
||||
--main-font-family: "Segoe UI", sans-serif;
|
||||
/* --main-font-family: "Ubuntu", sans-serif; */
|
||||
/* --main-font-family: "Nunito", sans-serif; */
|
||||
/* --main-font-family: "Inter", sans-serif; */
|
||||
|
||||
--main-font-size: normal;
|
||||
|
||||
--tree-font-family: var(--main-font-family);
|
||||
--tree-font-size: normal;
|
||||
|
||||
--detail-font-family: var(--main-font-family);
|
||||
--detail-font-size: normal;
|
||||
|
||||
--monospace-font-family: JetBrainsLight;
|
||||
--monospace-font-size: normal;
|
||||
|
||||
--left-pane-item-selected-shadow-size: 2px;
|
||||
|
||||
--launcher-pane-size: 58px;
|
||||
--launcher-pane-horizontal-size: 54px;
|
||||
--launcher-pane-horizontal-icon-size: 20px;
|
||||
--launcher-pane-button-margin: 6px;
|
||||
--launcher-pane-button-gap: 3px;
|
||||
|
||||
--tree-actions-toolbar-horizontal-margin: 8px;
|
||||
--tree-actions-toolbar-vertical-margin: 8px;
|
||||
--tree-actions-toolbar-padding-size: 4px;
|
||||
--tree-actions-toolbar-collapsed-width: 40px;
|
||||
--tree-actions-toolbar-expand-button-size: 25px;
|
||||
|
||||
--tab-bar-height: 50px;
|
||||
--tab-height: 36px;
|
||||
--tab-first-item-horiz-offset: 1px;
|
||||
--new-tab-button-size: 24px;
|
||||
|
||||
--center-pane-border-radius: 10px;
|
||||
|
||||
--menu-padding-size: 8px;
|
||||
--menu-item-icon-vert-offset: 0;
|
||||
|
||||
--more-accented-background-color: var(--card-background-hover-color);
|
||||
|
||||
--timeline-left-gap: 20px;
|
||||
--timeline-right-gap: 20px;
|
||||
--timeline-item-top-padding: 4px;
|
||||
--timeline-item-bottom-padding: 8px;
|
||||
--timeline-bullet-size: 10px;
|
||||
--timeline-bullet-vertical-pos: .75em;
|
||||
--timeline-connector-size: 4px;
|
||||
|
||||
/* Theme capabilities */
|
||||
--tab-note-icons: true;
|
||||
}
|
||||
7
src/public/stylesheets/theme.css
Normal file
7
src/public/stylesheets/theme.css
Normal file
@ -0,0 +1,7 @@
|
||||
/* Import the light color scheme.
|
||||
* This is the base color scheme, always active and overridden by the dark
|
||||
* color scheme stylesheet when necessary. */
|
||||
@import url(./theme-light.css);
|
||||
|
||||
/* Import the dark color scheme when the system preference is set to dark mode */
|
||||
@import url(./theme-dark.css) (prefers-color-scheme: dark);
|
||||
@ -1072,9 +1072,12 @@
|
||||
"title": "Application Theme",
|
||||
"theme_label": "Theme",
|
||||
"override_theme_fonts_label": "Override theme fonts",
|
||||
"auto_theme": "Auto",
|
||||
"light_theme": "Light",
|
||||
"dark_theme": "Dark",
|
||||
"triliumnext": "TriliumNext (beta)",
|
||||
"triliumnext": "TriliumNext Beta (Follow system color scheme)",
|
||||
"triliumnext-light": "TriliumNext Beta (Light)",
|
||||
"triliumnext-dark": "TriliumNext Beta (Dark)",
|
||||
"layout": "Layout",
|
||||
"layout-vertical-title": "Vertical",
|
||||
"layout-horizontal-title": "Horizontal",
|
||||
|
||||
@ -1195,8 +1195,12 @@
|
||||
"title": "Pragul de mod de citire automat"
|
||||
},
|
||||
"theme": {
|
||||
"auto_theme": "Temă auto (se adaptează la schema de culori a sistemului)",
|
||||
"dark_theme": "Temă întunecată",
|
||||
"light_theme": "Temă luminoasă",
|
||||
"triliumnext": "TriliumNext Beta (se adaptează la schema de culori a sistemului)",
|
||||
"triliumnext-light": "TriliumNext Beta (luminoasă)",
|
||||
"triliumnext-dark": "TriliumNext Beta (întunecată)",
|
||||
"override_theme_fonts_label": "Suprascrie fonturile temei",
|
||||
"theme_label": "Temă",
|
||||
"title": "Tema aplicației",
|
||||
@ -1204,8 +1208,7 @@
|
||||
"layout-horizontal-description": "bara de lansare se află sub bara de taburi, bara de taburi este pe toată lungimea.",
|
||||
"layout-horizontal-title": "Orizontal",
|
||||
"layout-vertical-title": "Vertical",
|
||||
"layout-vertical-description": "bara de lansare se află pe stânga (implicit)",
|
||||
"triliumnext": "TriliumNext (experimentală)"
|
||||
"layout-vertical-description": "bara de lansare se află pe stânga (implicit)"
|
||||
},
|
||||
"toast": {
|
||||
"critical-error": {
|
||||
|
||||
@ -61,13 +61,19 @@ function index(req: Request, res: Response) {
|
||||
}
|
||||
|
||||
function getThemeCssUrl(theme: string, themeNote: BNote | null) {
|
||||
if (theme === 'light') {
|
||||
if (theme === 'auto') {
|
||||
return `${assetPath}/stylesheets/theme.css`;
|
||||
} else if (theme === 'light') {
|
||||
// light theme is always loaded as baseline
|
||||
return false;
|
||||
} else if (theme === 'dark') {
|
||||
return `${assetPath}/stylesheets/theme-dark.css`;
|
||||
} else if (theme === "next") {
|
||||
return `${assetPath}/stylesheets/theme-next.css`;
|
||||
} else if (theme === "next-light") {
|
||||
return `${assetPath}/stylesheets/theme-next-light.css`;
|
||||
} else if (theme === "next-dark") {
|
||||
return `${assetPath}/stylesheets/theme-next-dark.css`;
|
||||
} else if (!process.env.TRILIUM_SAFE_MODE && themeNote) {
|
||||
return `api/notes/download/${themeNote.noteId}`;
|
||||
} else {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user