Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-11-04 15:11:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

switch excalidraw theme (light/dark) based on trilium setting

Browse Source
This commit is contained in:
zadam 2022-05-21 21:08:24 +02:00
parent 819cf0907d
commit 678e883044
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/public/app/widgets/type_widgets/canvas.js
View File

@ -23,6 +23,11 @@ const TPL = `
.zen-mode-transition.App-menu_bottom--transition-left { .zen-mode-transition.App-menu_bottom--transition-left {
transform: none; transform: none;
} }
/* collaboration not possible so hide the button */
.CollabButton {
display: none !important;
}
</style> </style>
<!-- height here necessary. otherwise excalidraw not shown --> <!-- height here necessary. otherwise excalidraw not shown -->
@ -112,6 +117,8 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
this.$widget.toggleClass("full-height", true); // only add this.$widget.toggleClass("full-height", true); // only add
this.$render = this.$widget.find('.canvas-render'); this.$render = this.$widget.find('.canvas-render');
const documentStyle = window.getComputedStyle(document.documentElement);
this.themeStyle = documentStyle.getPropertyValue('--theme-style')?.trim();
libraryLoader libraryLoader
.requireLibrary(libraryLoader.EXCALIDRAW) .requireLibrary(libraryLoader.EXCALIDRAW)
@ -185,6 +192,8 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
const {elements, appState, files} = content; const {elements, appState, files} = content;
appState.theme = this.themeStyle;
/** /**
* use widths and offsets of current view, since stored appState has the state from * use widths and offsets of current view, since stored appState has the state from
* previous edit. using the stored state would lead to pointer mismatch. * previous edit. using the stored state would lead to pointer mismatch.
@ -365,18 +374,14 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
ref: excalidrawWrapperRef ref: excalidrawWrapperRef
}, },
React.createElement(Excalidraw.default, { React.createElement(Excalidraw.default, {
theme: "light", // not in effect, but causes the theme toggle button to disappear
ref: excalidrawRef, ref: excalidrawRef,
width: dimensions.width, width: dimensions.width,
height: dimensions.height, height: dimensions.height,
// initialData: InitialData,
onPaste: (data, event) => { onPaste: (data, event) => {
this.log("Verbose: excalidraw internal paste. No trilium action implemented.", data, event); this.log("Verbose: excalidraw internal paste. No trilium action implemented.", data, event);
}, },
onChange: debounce(this.onChangeHandler, this.DEBOUNCE_TIME_ONCHANGEHANDLER), onChange: debounce(this.onChangeHandler, this.DEBOUNCE_TIME_ONCHANGEHANDLER),
// onPointerUpdate: (payload) => console.log(payload),
onCollabButtonClick: () => {
window.alert("You clicked on collab button. No collaboration is implemented.");
},
viewModeEnabled: false, viewModeEnabled: false,
zenModeEnabled: false, zenModeEnabled: false,
gridModeEnabled: false, gridModeEnabled: false,

4
src/public/stylesheets/theme-dark.css
View File

@ -79,3 +79,7 @@ body ::-webkit-calendar-picker-indicator {
body .CodeMirror { body .CodeMirror {
filter: invert(90%) hue-rotate(180deg); filter: invert(90%) hue-rotate(180deg);
} }
.excalidraw.theme--dark {
--theme-filter: invert(80%) hue-rotate(180deg) !important;
}