The mobile layout is different than the one on the desktop. Use body.mobile and body.desktop to
+ differentiate between them.
body.mobile #root-widget {
+ /* Do something on mobile */
+}
+
+body.desktop #root-widget {
+ /* Do something on desktop */
+}Do note that there is also a “tablet mode” in the mobile layout. For that + particular case media queries are required:
@media (max-width: 991px) {
+
+ #launcher-pane {
+
+ /* Do something on mobile layout */
+
+ }
+
+}
+
+
+
+@media (min-width: 992px) {
+
+ #launcher-pane {
+
+ /* Do something on mobile tablet + desktop layout */
+
+ }
+
+}The user can select between vertical layout (the classical one, where the launcher bar is on the left) and a horizontal layout (where the launcher @@ -85,14 +116,14 @@ body.electron:not(.native-titlebar) {
On macOS the semaphore window buttons are enabled by default when the native title bar is disabled. The offset of the buttons can be adjusted - using:
body {
+ using:body {
--native-titlebar-darwin-x-offset: 12;
--native-titlebar-darwin-y-offset: 14 !important;
}
Background/transparency effects on Windows (Mica)
Windows 11 offers a special background/transparency effect called Mica,
which can be enabled by themes by setting the --background-material variable
- at body level:
body.electron.platform-win32 {
+ at body level:body.electron.platform-win32 {
--background-material: tabbed;
}
The value can be either tabbed (especially useful for the horizontal
@@ -104,12 +135,12 @@ body.electron:not(.native-titlebar) {
Theme capabilities are small adjustments done through CSS variables that
can affect the layout or the visual aspect of the application.
In the tab bar, to display the icons of notes instead of the icon of the
- workspace:
:root {
+ workspace::root {
--tab-note-icons: true;
}
When a workspace is hoisted for a given tab, it is possible to get the
background color of that workspace, for example to apply a small strip
- on the tab instead of the whole background color:
.note-tab .note-tab-wrapper {
+ on the tab instead of the whole background color:.note-tab .note-tab-wrapper {
--tab-background-color: initial !important;
}
@@ -127,6 +158,21 @@ body.electron:not(.native-titlebar) {
href="../Custom%20resource%20providers.html">Custom resource providers.
Basically import a font into Trilium and assign it #customResourceProvider=fonts/myfont.ttf and
then import the font in CSS via /custom/fonts/myfont.ttf.
+ Dark and light themes
+ A light theme needs to have the following CSS:
:root {
+ --theme-style: light;
+}
+ if the theme is dark, then --theme-style needs to be dark.
+ If the theme is auto (e.g. supports both light or dark based on prefers-color-scheme)
+ it must also declare (in addition to setting --theme-style to
+ either light or dark):
:root {
+
+ --theme-style-auto: true;
+
+}
+ This will affect the behavior of the Electron application by informing
+ the operating system of the color preference (e.g. background effects will
+ appear correct on Windows).
-