2024-06-22
Everyone knows the most important part of software development is not the software itself, or the tools you use, or whatever else someone outside the field might believe. No, the most important thing is definitely the aesthetics. Which is why I set out to develop my own theme for LogSeq when I found out it had no options for Rosé Pine, one of my favorite color palettes.
The first thing I did to understand what I was doing was to look at other themes that were available.
For example, this Bujo theme by Sergey Kolesnik really helped me figure out how to structure the project.
The easiest way I found was to store the HSL values of the palette in variables so that I could easily switch between alpha and alpha-less colors.
Think --x = 249deg, 22%, 12% instead of --x = hsl(249deg, 22%, 12%), making the switch between hsl(var(--x)) and hsla(var(--x), 0.5) trivial.
The dark themes (Rosé Pine and Rosé Pine Moon) are defined under html[data-theme=dark], which is everything on the html element that has the attribute data-theme, set to dark.
Similarly, the light theme (Rosé Pine Dawn) is defined under html[data-theme='light'].
There seems to be legacy class selectors named dark-theme and light-theme, but I didn’t use it in all of my theme.
I haven’t had any issues filed that require me to change that yet,
but I’m still waiting to see if relying only on html[data-theme=dark] has caused any issues for anyone.
One part of my theme that is largely untested is the CodeMirror aspects. I haven’t quite had the opportunity to battle test it.
The part of the theme that proved the most difficult to get right was the selection element.
In regular blocks, the styles on lines 140–148 in common.css do not have access to the variables I set in html[data-theme=dark/light],
so it makes sense that the selection styles were never actually set…somewhat.
(Everything else seems to work all right, but that’s beside the point.)
To fix this, I just plopped the following code into my theme:
html:not(html[data-color]),
html[data-theme=light][data-color='logseq'],
html[data-theme=dark][data-color='logseq'],
html[data-color='none'] {
::selection, ::-moz-selection {
color: var(--ls-selection-text-color);
background-color: var(--ls-selection-background-color);
}
}I found the solution for the CodeMirror widget by searching through LogSeq’s source repo.
On lines 103–109 in codemirror.lsradix.css, I found the following code chunk:
.cm-s-lsradix.cm-s-dark div.CodeMirror-selected {
background: or(--lx-gray-06, #073642);
}
.cm-s-lsradix.cm-s-dark.CodeMirror ::selection {
background: or(--lx-gray-06, rgba(7, 54, 66, 0.99));
}
.cm-s-lsradix.cm-s-dark .CodeMirror-line::-moz-selection,
.cm-s-dark .CodeMirror-line > span::-moz-selection,
.cm-s-dark .CodeMirror-line > span > span::-moz-selection {
background: or(--lx-gray-06, rgba(7, 54, 66, 0.99));
}
.cm-s-lsradix.cm-s-light div.CodeMirror-selected {
background: or(--lx-gray-06, #eee8d5);
}
.cm-s-lsradix.cm-s-light .CodeMirror-line::selection,
.cm-s-light .CodeMirror-line > span::selection,
.cm-s-light .CodeMirror-line > span > span::selection {
background: or(--lx-gray-06, #eee8d5);
}
.cm-s-lsradix.cm-s-light .CodeMirror-line::-moz-selection,
.cm-s-light .CodeMirror-line > span::-moz-selection,
.cm-s-light .CodeMirror-line > span > span::-moz-selection {
background: or(--lx-gray-06, #eee8d5);
}After realizing that my theme was missing these lines, I simply dropped them into my theme and replaced the background value with var(--ls-selection-background-color).
Now my theme is, as far as I can tell, complete.
Minus the extensions I may consider providing support for.
|
Note
|
A Tangent
I did look into supporting the logseq-todo-plugin by ahonn, but I realized that it would be very difficult considering that the plugin is styled inline using Windi CSS. Figuring out how to override those styles seemed like a chore, so I chose to change the colors in the settings (which was thankfully provided). Now I have decided that I have beef with CSS Frameworks for plug-n-play tools because what do you mean I can’t override your defaults with my own theme??? |
I would say the biggest lesson I learned from all of this is that LogSeq’s documentation, at least regarding what goes into creating one’s own custom theme, is severely lacking and almost exclusively relies on finding a good example theme that has already been made. It is also not a trivial thing to dig through the source code to find where all of the styling is, as I learned a few months ago when I was originally creating my theme.
Maybe someday I will attempt to provide more detail in the documentation. Or just a template for a custom theme. But that day is not now, especially considering the LogSeq theme has been working on the new database branch that seems pretty much a rewrite of the codebase. It may be more beneficial to wait until things have settled.
|
Note
|
As of writing this post, I’ve released version 1.1.1. You can find it listed as a community app theme on Rosé Pine’s site or in the LogSeq marketplace. |