[UI/UX] Theming / Appearance and Accessibility management

[joshtrichards]

Also known as: Global Theming, Appearance and accessibility, and User Theming

The Theming versus the User Appearance/Accessibility + User Theming stuff is a bit confusing. I mean in terms of:

• nomenclature usage
• organization and presentation in the user interface (in both Administration and Personal contexts)
• naming in the global config <-- this last one is likely due to legacy and mostly a documentation issue IMO

In the UI we have...

...the Administration->"Theming": (/settings/admin/theming) page:

• Name (Organization?)
• Web link
• Slogan
• Color (Background color?)
• Logo
• Background and login image
• Legal notice link
• Privacy notice link
• Header logo
• Favicon
• Toggle: Disable user theming?
  • "Although you can select and customize your instance, users can change their background and colors. If you want to enforce your customization, you can toggle this on."

I'd say the Admin page is actually pretty solid, with only minor potential tweaks (more on that in my proposal list).

Then we have also in the UI...

...the Personal->"Appearance and accessibility" (/settings/user/theming) page:

• While unstated, this is effectively "Appearance, accessibility, and user theming" (all combined)
• Color/Contrast Modes: System default, Light, Dark, High contrast, Dark with high contrast
• Toggle: Dyslexia font
• Toggle: Keyboard shortcuts
• Global theming overrides (aka: "User theming"): Background image and/or background color (if user theming is permitted by the admin)

I have some ideas to make the Personal page clearer (more on that in my proposal list).

Then in the system config.php we have:

• theme <-- I believe this is legacy (i.e. only applicable if not using the theming app)
• enforce_theme <-- Essentially legacy as it's no longer necessary with theming app having its own equivalent parameter

I propose we:

• Add a divider between the "Dyslexia font" toggle and the "Color/contrast modes"
• Place a sub-heading like "Additional Accessibility Settings" above the "Dyslexia front" and "Keyboard shortcuts" toggles
• Rename "Administration->Theming" to "Administration->Theming and appearance"
• Add the heading "User Theming" just above the "Background" section on the "Appearance and accessibility" (/settings/user/theming)"* page to clarify that's where the user adjustable (if permitted) theme overrides are
• Strike the word "theme" from the various "Color/Contrast Modes" included under "Appearance and accessibility" (/settings/user/theming)" page since "theme" is a misnomer there
• Add a heading above the list of "Color/Contrast Modes" that says... "Color/Contrast Modes" since that's what they really are and since they're entirely independent (from the user's perspective) from the actual admin configured theme
• Add some clarifying language to the enforce_theme parameter if it is indeed essentially depreciated or, at the very least, equivalent to the theming app's toggle for "Disable user theming"
• Add the ability for the admin to specify a default "Color/Contrast Mode" in the global Theming (with the same set of modes available to choose from that individual users already have)
• Possibly clarify what we mean by "system" when we say "System default theme" on the Personal "Appearance and accessibility" page (I think at the moment "system" here effectively means the user's system not the server since there's no truly globally configurable mode for this... at least until the prior bullet point is also implemented). And, as already noted, this might be better renamed entirely to something along the lines "System default Color/Contrast mode"

The above are some mid-morning thoughts that came together while looking into #39199 and attempting to clarify some of my longstanding confusion over theming/appearance/accessibility management/configuration. I reserve the right to revise this brain dump, but at least now it's recorded (for another time when I - or anyone else - has a better opportunity to dig deeper into actual implementation bits) . :-)

[xBelladonna]

While you are at it, the dyslexia font is helpful and very appreciated, but the font size... it's so much bigger than the regular font that some text get cut off and ellipsized, for example in the navigation sidebar on the left:

Just... not great:

The original font size is much more reasonable. OpenDyslexia (if that's what is in use) is Just Bigger than other fonts so toggling the dyslexia font on should also decrease the global font size such that it most closely matches the original size without sacrificing readability. I guess we want to aim for text not to be ellipsized.

Original font for reference:

[jancborchardt]

@joshtrichards thanks for looking into this! Feedback from my side:

• Strike the word "theme" from the various "Color/Contrast Modes" included under "Appearance and accessibility" (/settings/user/theming)" page since "theme" is a misnomer there
• Add a heading above the list of "Color/Contrast Modes" that says... "Color/Contrast Modes" since that's what they really are and since they're entirely independent (from the user's perspective) from the actual admin configured theme

Sounds good, but I would probably still use the individual settings with "mode". So that it says "Dark mode" instead of just "Dark" as that’s nicer when scanning through.

The section heading can be "Color and contrast".

• Add the heading "User Theming" just above the "Background" section on the "Appearance and accessibility" (/settings/user/theming)"* page to clarify that's where the user adjustable (if permitted) theme overrides are

I’d say these sections are actually fine. We could add some clarifying info that it will overwrite the admin theming just for you, but I don’t think there is any confusion.
But we should move "Primary color" below "Background", since the background sets the primary color automatically initially.

• Add some clarifying language to the enforce_theme parameter if it is indeed essentially depreciated or, at the very least, equivalent to the theming app's toggle for "Disable user theming"

@juliushaertl @skjnldsv regarding this?

• Add the ability for the admin to specify a default "Color/Contrast Mode" in the global Theming (with the same set of modes available to choose from that individual users already have)

I disagree on this, as this should be completely up to the individual person, with "Follow system" being the default. If someone prefers to use dark mode everywhere, they should not need to look at Nextcloud in light mode, even if it’s just for the short time to change the setting.

• Possibly clarify what we mean by "system" when we say "System default theme" on the Personal "Appearance and accessibility" page (I think at the moment "system" here effectively means the user's system not the server since there's no truly globally configurable mode for this... at least until the prior bullet point is also implemented). And, as already noted, this might be better renamed entirely to something along the lines "System default Color/Contrast mode"

Maybe "Follow device setting" instead of "System default theme"? This is more specific and clarifies "device" rather than "system". Technically the last deciding instance is your browser, but I would rather call it "Device" for simplicity.

• Add a divider between the "Dyslexia font" toggle and the "Color/contrast modes"

Sure!

• Place a sub-heading like "Additional Accessibility Settings" above the "Dyslexia front" and "Keyboard shortcuts" toggles

Yes, sounds good to group those. They should also be below the modes and above the background picker so it’s very quick to see them.

• Rename "Administration->Theming" to "Administration->Theming and appearance"

Since I disagree with the proposal of Add the ability for the admin to specify a default "Color/Contrast Mode", I would also keep the simpler language of "Theming" here. Also it is less risk of ellipsizing of the nav in various languages.

@joshtrichards would you like to contribute these things via pull request? :)

[jancborchardt]

While you are at it, the dyslexia font is helpful and very appreciated, but the font size... it's so much bigger than the regular font that some text get cut off and ellipsized, for example in the navigation sidebar on the left:

@xBelladonna sounds very good! Since you already analyzed the issue and probably have a better font size in mind which works well, would you like to open a pull request to fix it? I know @nickvergessen sometimes (or often?) uses the dyslexia font as well, so he might have input too.

[nickvergessen]

I know nickvergessen sometimes (or often?) uses the dyslexia font as well, so he might have input too.

I miss it since I use the Talk desktop client mostly nowadays and we don't have it there yet.
But I can confirm, that especially since the last dyslexia font upgrade which brought bigger in-between words spacing, it's a pain.
It's also noticable on their homepage: https://opendyslexic.org/
A space is longer than the word "is" which just makes text ellipse sooo much more often. Less a problem for "longer texts" like Talk messages, files comments, text files, etc. But especially in sidebars, tab headers and drop down menus.

I wondered if we should "narrow the spacing" in same areas manually with CSS when Dyslexia is used.

[jancborchardt]

@nickvergessen regarding the spacing I can imagine this is intentional to make it easier to read? So except adjusting the font size to fit that of our general font, I wouldn’t necessarily do anything to change it.

[nickvergessen]

• Updated OpenDyslexic from 0.920 to 2.001 in fix(a11y): Update OpenDyslexic from 0.920 to 2.001 #47928
• The empty space before first words is drastically improved with it!
• Font-size looks much more similar to default font

[JonathanDHolden]

1. It would be nice to have a Hex color picker for the Primary color. While this color is going to be adjusted for accessibility, where a company has picked a color that works against black and white at 4.5:1 it would be nice to just use it. (I accept that where the Primary color is used in some places it will still be adjusted.) #dd227c for the win!

2. While Roboto is a reasonable font to use, Noto Sans (as used here in GitHub) gives us nice capital I which essential for distinguishing between my partner and artificial intelligence, Al and AI. Take a look at the comparision here http://www.identifont.com/differences?first=roboto&second=Noto+Sans&q=Go