User Styling and UI Customization

[jsmorabito]

Related to Plugin System #63

For users to customize their notetaking experience in Athens there are several ways forward that we can think about. This issue was inspired by this question on discord. Not high priority at the moment.

Use Case(s)

• special tag styling
• themes for readability

Current Theming in Athens

• native light/dark mode
• using stylefy which creates anonymous names for CSS classes/ids

Option 1 roam/css

• requires: more semantic CSS classes/ids
• pro: could be implemented sooner that native styling solutions?
• requires/con: requires maintaining and supporting a consistent API

Option 2 native styling

• pro: accessible to non-coding individuals

Inspiration for native theming

• ?

References

• https://maggieappleton.com/paintingroam

[agentydragon]

One reason why I'd like this is because the current design has too much white space and uses my screen space inefficiently.

For example:

Here I can see only ~2x less text than I could, because of the white space.

[cba85]

Same here! I'd like to remove this annoying padding 😔

[AoCz]

I would like to upvote this feature request. I echo the statements from @agentydragon in allowing some level of customizations for white space. I personally use a 32" monitor, and there can sometimes be an absurd level of unused white space. I believe some level of user control would be very beneficial. Ideally, there would be some presets, like in Gmail or Discord, where users can decide between "Comfort", "Moderate", or "Compact" levels—this could also be "Tablet", "Phone", "Touch", "Desktop", "Desktop HiDi", or whatever makes sense for the community. In addition, opening up a .css or .XML document where advanced users can zero in on exact values would be nice.

Morever, I believe that being able to adjust fonts is very important. Typography can make a big difference in the ease of reading and people with dyslexia and other reading disabilities. Monospace sans-serif fonts are the trendier and more common font choices for apps (and better for coding), but they are not ideal in all scenarios. Serif fonts will often work better for more people doing longer reading and writing sessions by working more easily with people's reading heuristics.

[tangjeff0]

Roam recently added multi-width support.

Agree that there should be an easy way to change fonts.

cc @shanberg

Regarding User Styling and UI Customization, I would prefer for us to create settings interfaces before custom CSS. This seems very doable for having ~3 widths, or for changing typography globally. I think custom CSS is the most powerful but would be medium-difficulty to implement and potentially hard to maintain.

[bachmeil]

Morever, I believe that being able to adjust fonts is very important. Typography can make a big difference in the ease of reading and people with dyslexia and other reading disabilities.

The font Athens comes with makes it unusable for anyone with reduced vision, including almost the entire population over the age of 40.

[avidrucker]

Accessibility is so important! This is definitely a UX item.

[bachmeil]

I hope font size is separated from generic "custom CSS" requests and prioritized. Font size is not a styling preferences.

[shanberg]

@bachmeil You're right, font size is extremely important and definitely not merely a styling preference.

So I'm clear, are you thinking of something beyond the browser's native font zooming capabilities, accessed via ctrl+/cmd+?

[bachmeil]

I downloaded the app around the time Athens was on Hacker News. It didn't have support for changing the font size by Ctrl+ or any other method (as far as I could tell). Edit: Upon trying it again with the latest version, Ctrl+ does work, the problem is that in order for all text to be large enough to read, you have to magnify so much that the headings get ridiculously large and the design is kind of unusable. I've attached a screenshot to show what it looks like when all text is comfortable to read. There needs to control of specific font sizes.

[bachmeil]

Here's a screenshot showing what is presumably the intended design of the app (which would work well) but highlighting the fonts that need changing, rather than changing all fonts.

[jsmorabito]

Echoing the vote for sepia mode (#783) here. archived that discussion and moved this (#835) from issues to discussions so we have one place to talk about this

[0rphee]

Allow multiple options of colors for the white and dark themes, or personalized ones, and similar options for fonts and font sizes maybe something like this:

[yifanyin]

I would also like to remove the shaded frame surrounding the daily pages. It does eat up too much screen space once I make the sidebar wider. I basically just hack this by opening daily pages via the search bar 😌

[lobre]

Maybe not the exact same opinions as others, but I really like the simplicity of styling in Athens. I am totally fine with dark and light themes. I personally want as few options as possible. If you give me css theming, I will spend my time tweaking the style instead of writing and my interface will end up bloated for sure!

Amongst all similar other apps, Athens is the one that looks the most appealing out of the box. Style is a matter of personal opinion, but if something is implemented in that direction, please do it sparingly and don't give us too many options 🙏😊.

[shanberg]

Some work done to prototype a popover control with some example customization options. The settings in the popover are for demonstration purposes only.

Prototype: https://48lr3.csb.app/

[shanberg]

CSS variables are a contract in themselves, but Athens is currently built to use them internally for the color palette.

We currently permute a couple of color palettes which each have ~a dozen human-readable (mostly hex) colors into 70+ internal-use CSS variables. We can probably continue to use and expand that tool to eventually allow users to make just a few human-readable changes to the theme and see comprehensive, hopefully-rational outcomes. Don't like border radii? set to 0. Prefer green as your accent color? All accent color permutations now stem from green.

[lobre]

I would much prefer to continue this way and have controlled, well designed human-operable changes with simple UI components.

And if you find out that something on the UI isn't fine, you can open a discussion/issue over on github/discord to see if it also bothers other people, so a general change can be implemented.

CSS is an implementation detail. To me, leaking this layer is on par with letting people query your SQL database for example (except that it is styling instead of behavioural). Allowing that brings fragility and prevents developers from changing that layer in the future.

My feeling also with custom CSS implemented in other applications is that only a few motivated people are willing to develop and maintain complete themes. When the structure evolves, you always see visual glitches until someone takes the time to fix it. It requires a lot of efforts from the community, especially during this pre 1.0 period when the structure moves a lot.

[tangjeff0]

Very fair arguments @lobre. I also like having simple UI configuration, my days of tweaking Vim/Emacs config for hours are over.

At the same time, we are open-source, which makes us naturally developer-friendly. And we are building a digital garden. Some people like to tweak their knowledge tools like they tweak their homes - rearranging a room, painting a wall. Yes, it's not productive writing or thinking work, but Athens is home!

I wonder if there is a "Developer Mode" that would enable more customization for the devs. Doesn't get around the issue of maintaining themes, especially if Athens core breaks the styling API. Maintenance is the larger issue in the OSS world. The best solution I know of today is to compensate OSS makers (theme devs in this case) so that they are willing to do the not-fun maintenance work.

[lobre]

I am totally aligned, I am so done tweaking my dotfiles, (even if I accidentally sink back into it from time to time). At least, it is what I swore to myself 😄.

I can understand the will to let people decorate their place as wanted. And I am sure many people are eager for that. I personally prefer to let developers make those choices for me when possible, but well, that’s me.

However, my concern is more in the "how". And I really think custom CSS is the wrong way. Custom CSS has emerged in some apps because of this new era of web applications, but especially because developers were "lazy". They took shortcuts and did not find the courage and time to work on a better design. But this is a dangerous risk to take IMO.

As you are into metaphors (and also like them), I feel that allowing custom CSS is the same as letting people come into the back kitchen of your fast food restaurant, to compose their own sandwiches instead of having a waiter dealing with customer orders. And this is harmful in my opinion. Once you let people in, you cannot change how it is working behind the scenes. No more optimization, reorganization, or changes are possible.

I am sure there is room for a good take on how to allow customization while keeping it under control. Some applications propose this with success. I know there are plenty of others, but one that comes into my mind is Adobe Photoshop for instance (sorry if you feel it is a bad one ^^). It allows the user to completely customize the content, position, and colors of toolbars.

[tangjeff0]

I feel that allowing custom CSS is the same as letting people come into the back kitchen of your fast food restaurant, to compose their own sandwiches instead of having a waiter dealing with customer orders.

This is such a good metaphor! Just to reiterate, I HATE ordering at restaurants because I can never decide on what I like. Would much rather the waiter order for me.

There's a difference between: "substitute white bread with sourdough" to the waiter and going into the kitchen to do it yourself!

Slack has decent customization. There was another notes app that had pretty cool theming as well. @shanberg Do you remember what it was called?

[shanberg]

A very slick implementation of end-user customization is Clover.

In settings, there are two options for customization: Easy and Advanced.

Easy
Big controls, styled a little like macOS apperance preferences.

• Choose a light or dark "base". This sets the overall app background and foreground colors.
• Chroma: Slightly adjust the app's overall color, to give a hint of any color on the spectrum. Subtle, but nice.
• Sidebar: Shade or Tint the background color of the sidebar. Make the sidebar slightly lighter, slightly darker, or the same color as the app's background.
• Highlight: Choose from a set of accent colors: red, orange, yellow, green, teal, blue-purple, violet, pink.

Advanced
Hex color inputs, with big preview swatches

• Page
  • Background
  • Text and Icons
  • Highlight
• Sidebar
  • Background
  • Text and Icons
  • Hgihlight
  • Highlighted Text and Icons

Demo:

CleanShot.2021-05-27.at.15.52.28.mp4

[lobre]

Thanks for sharing. Love the way they designed it. Super simple and user-friendly, and at the same time allowing already a lot of tweaking.

[MikeBee]

I like the ease of that Cleanshot video. But it looks like it's only a color adjuster. I think it's just as important to be able to adjust font size. Almost every major app allows this (from Roam, Obsidian, Logseq, to Sublime, VSCode, etc). As this app is a personal app, each person wants to make it their own. I wouldn't think of using a code editor that I can't adjust it to something that I'd be using all day. And so it should be for this type of tool where I'm spending more and more of my time.

[MikeBee]

I would also like to add that the wrong reason to not allow these types of customization is because it's too much of a burden on developers or keeping consistency. Its important to remember that the user experience is paramount otherwise you end up with a minor or irrelevant app.

[ithakaa]

Being able to control fonts, spacing and overall page design is a must

I find the current layout is to thin and narrow

[bachmeil]

Any update on this? I'm tempted to maintain my own fork just for the sake of having appropriate fonts. As I emphasized above, customization is not only a matter of preference (which is definitely important) but also accessibility.

Edit: Rather than describing changes I was making here, I wrote up the changes I made and posted them on my website in case it helps anyone else.