Leo Theme Adjustments For UI Elements

[tbp1...@gmail.com]

Most if not all Leo themes I have seen use the same fonts (and usually font sizes) for most of the visual elements, such as the tree and menu bars.  And that font will invariably be a monospaced programming font, as is used for the body text.

Yet most of these visual elements are not used for programming but instead are UI elements.  Yes, even the tree is better thought of as a UI element, since one wants to rapidly scan nodes and select one.  And fonts for UI elements have different design requirements than fonts for programming.  All operating systems use some kind of UI font.  Examples are Segoe UI in Windows and the Ubuntu system font in the Linux world.

No one wants to use a monospaced font for anything except programming, and with good reason.  A good UI font also needs to read easily, be fairly unambiguous, and be legible with small display sizes - and be sans-serif but not monospaced.

In Leo, we can style most if not all the visual elements.  So I have been experimenting with themes that use a programming font only for the body text, and a UI font everywhere else.  This isn't only my idea.  Many other editors and IDEs do the same.  Just look at Visual Studio Code, Pyzo, Editplus, and Notepad++, for instance.  They all offer some kind of tree view - if only for directory display - and usually a side panel as well, and or course the menus.  None of these programs use a programming font for these other views.

I'm attaching an example screen shot and the theme file for it.  Please don't be put off if you don't like the colors of this dark solarized theme.  You can just copy the Fonts & text sizes and @data qt-gui-plugin-style-sheet nodes and stick them in to your own stylesheet.  Most likely, all your colors will be picked up and you won't need to change any of them.

Please do some experiments and let us know what you end up liking.  Visual changes like these should make Leo easier to use, and more attractive to new users.  This is a work in progress!

[tbp1...@gmail.com]

Here's an updated theme outline that handles more of the widgets, including those in the Log frame.

[Edward K. Ream]

On Thu, Mar 17, 2022 at 12:17 PM tbp1...@gmail.com <tbp1...@gmail.com> wrote:

Most if not all Leo themes I have seen use the same fonts (and usually font sizes) for most of the visual elements, such as the tree and menu bars.  And that font will invariably be a monospaced programming font, as is used for the body text.

Heh. You have found a big blind spot. I agree that UI fonts would be good to use.

Edward

[tbp1...@gmail.com]

It's only been a few days, but so far I'm liking them much better.  The easiest way to try it out by adding a new section to the start of the qt stylesheet:

* {
  font-family: @font-family-ui;
  font-size: @font-size-ui;
}

This section will apply to any Qt object that doesn't have its own font properties specified.  Of course, you need to define the new logical properties:

@string font-family-ui = "Segoe UI", Verdana, sans-serif

@string font-size-ui = 9.5pt

Sans-serif looks fine to me on all the Linux VMs I've tried so far.  The others are Windows fonts that everyone will have by now.  I think Verdana looks good, but Segoe UI is more compact and works better in small font sizes.

Then go through the stylesheet and remove all font family and size properties except of course on the body itself (QTextEdit {...}).  I keep getting surprised by how many hard font settings had gotten scattered throughout the stylesheet.  Just get rid of them.

This will get you most of the way there.  You may have to tinker with the size to get it to suit you, and you may need to adjust some paddings, margins, and the gutter font size and y-adjust, but these are all fine tunings.