Suggestion: Enhancing theme system & sidebar customization flexibility

[hygenprc-exyone]

Hello @rothsandro,
I hope this message finds you well.
My name is Exyone (Codeberg / exyone.dev@icloud.com), and I'm the developer who previously created the Wintergreen theme for Eleventy Notes.
First of all, I want to sincerely apologize for not having contributed directly through GitHub pull requests in the past. I was mainly working on my fork and personal site at the time.
I’ve been following the project with great interest and noticed that the develop branch has introduced native multi-theme support — this is fantastic progress! 🎉 From the commit history, it looks like this is still in an experimental/testing phase, which is completely understandable for such a significant refactor.
I plan to keep following the develop branch closely and will work on porting my Wintergreen theme to the new theme module once it becomes more stable. In the meantime, I’d like to kindly ask if it would be possible to reserve / expose a few more extension points or hooks in the theme API. This would greatly help community theme developers like me to integrate custom styles, layouts, or behaviors without heavy overrides.
Separately, I’d like to share a couple of thoughts and suggestions regarding sidebar customization, based on my own usage experience:

Sidebar HTML customization
In my earlier work, I added avatar + bio features by directly modifying the .mjs files. While this worked, I personally find it more flexible and maintainable to allow injecting custom HTML directly into the left sidebar (via shortcodes, partials, or a dedicated slot/hook).
The reason is that HTML-based customization makes it much easier to add dynamic or interactive widgets — for example, I’ve been thinking about including a simple digital clock or mini-calendar in the sidebar, which would be cumbersome to implement purely through the current configuration object.
Moving note grouping / dynamic lists to the right sidebar
Currently the left sidebar is quite valuable real estate for “always-visible important information” (profile, quick links, widgets, etc.).
Since the right sidebar is already used for article summary / table-of-contents-like features in many cases, I feel it might be a better fit for note grouping, tag clouds, dynamic query-based lists, or recent/popular notes.
This would help avoid overcrowding the left sidebar and give users more freedom to personalize the left side with custom components.

A small styling note from my Wintergreen theme work:
I adjusted the base font size to 16px because I found that 14px caused noticeable edge blurring with several Chinese fonts I tested (especially on macOS/Windows).
For better code readability and visual harmony, I also set the code font size to 1em (matching the 16px body text). Perhaps this could be considered as an optional configuration or default tweak in future releases?
I’m very excited about the direction of the project and would love to contribute more meaningfully once the theme system and overall architecture stabilize a bit further.
Before starting any larger PRs or deeper collaboration, I’d greatly appreciate hearing your thoughts on the current development roadmap — especially around theming extensibility and sidebar architecture. Knowing the planned direction would help me align my contributions better and avoid duplicated effort.
Thank you so much for creating and maintaining such a wonderful template — it has been a joy to build upon. Looking forward to your feedback whenever you have time.
Best regards,
Exyone
(exyone.dev@icloud.com | Codeberg: exyone)

[rothsandro]

Hey, thanks for your message.

1) Develop Branch: I'm currently doing some refactoring and bugfixes on the develop branch but I don't know what you mean with "has introduced native multi-theme support". There are no changes related to theming. It already supports light + dark mode and a list of different accent colours you can choose from (at build time).

2) Sidebar HTML customization: I'm very hesitant to add generic APIs that allow to inject any kind of content into parts of the Eleventy Notes UI. It adds additional complexity and makes future changes difficult. The content may not be suitable for the HTML structure (e.g. your profile section is under a visually hidden "Navigation" heading). And the CSS custom props are not part of the public API, but you would likely need them for styling.

What would your use case for interactive widgets like a clock or calendar? At first glance this doesn't seem to be something that Eleventy Notes is designed for.

3) Sidebar / Panel: There's a clear separation between the left sidebar and the right panel, that is also very common across many popular documentation frameworks. The sidebar is for the site wide navigation (and always there), the panel is for page specific content and hidden for some pages. I don't have any plans to change this.

4) Font Size: What do you mean with "adjusted the base font size to 16px"? Many elements like sidebar and main content already use 16px. Less important elements like the panel have a smaller font size to improve the visual hierarchy.

[hygenprc-exyone]

Hey, thanks for your message.

1) Develop Branch: I'm currently doing some refactoring and bugfixes on the develop branch but I don't know what you mean with "has introduced native multi-theme support". There are no changes related to theming. It already supports light + dark mode and a list of different accent colours you can choose from (at build time).

2) Sidebar HTML customization: I'm very hesitant to add generic APIs that allow to inject any kind of content into parts of the Eleventy Notes UI. It adds additional complexity and makes future changes difficult. The content may not be suitable for the HTML structure (e.g. your profile section is under a visually hidden "Navigation" heading). And the CSS custom props are not part of the public API, but you would likely need them for styling.

What would your use case for interactive widgets like a clock or calendar? At first glance this doesn't seem to be something that Eleventy Notes is designed for.

3) Sidebar / Panel: There's a clear separation between the left sidebar and the right panel, that is also very common across many popular documentation frameworks. The sidebar is for the site wide navigation (and always there), the panel is for page specific content and hidden for some pages. I don't have any plans to change this.

4) Font Size: What do you mean with "adjusted the base font size to 16px"? Many elements like sidebar and main content already use 16px. Less important elements like the panel have a smaller font size to improve the visual hierarchy.

Sorry, might have misread the dev-branch changes.
Quick question on font-size: is there a cleaner way to override default theme styles (font-size especially) without touching the original theme’s SCSS?
(Thought I remembered something about controlling it via .mjs before, but could be wrong.)

My English sucks, sorry (x_x) I think I explained it poorly and caused some confusion.
Apologies for that.
I’ll push my thoughts to a new branch with code — code might be easier to understand than my words, lol.

[rothsandro]

It's not officially supported, but you can overwrite the CSS custom props in your /app.scss (in the root of the project, outside the .app folder).