Fixed
Details
Assignee
UnassignedUnassignedReporter
Ned ZimmermanNed ZimmermanComponents
Fix versions
Priority
Major
Details
Details
Assignee
Unassigned
UnassignedReporter
Ned Zimmerman
Ned ZimmermanComponents
Fix versions
Priority
Created March 24, 2021 at 2:22 PM
Updated July 22, 2024 at 2:35 PM
Resolved November 25, 2021 at 6:11 PM
Currently, contrast themes are applied by adding a class to the body which applies the appropriate theme from Enactors.css. For example, applying the black and white contrast theme assigns the
.fl-theme-bw
class to the body, which sets the following CSS custom properties:These two variables are used within UIO's contrast theme stylesheet, which is applied to the adjusted website.
This works but has a significant drawback. Because the contrast theme stylesheet uses
!important
quite liberally, some of the website's styles will be forcibly overridden and will require further use of!important
and lots of duplicated styling in order to properly integrate UIO into a given website's design language. Here's an example: https://codepen.io/greatislander/pen/ExZjpBWIn this case, a custom focus style has been applied to links which inverts the background and text color when the link receives focus. But UIO applies a background and text colour with
!important
to any element within the adjusted body:In terms of specificity, this overrules the theme's
a:focus
rule, even when thebackground-color
property is given the!important
flag. The following CSS must be added just to ensure that the customcolor
andbackground-color
of the link focus style will be honoured when a contrast theme is applied:In my experience, many such overrides of overrides are necessary when integrating UIO.
A different approach that would also have the impact of reducing the CSS needed to apply a contrast theme would be for UIO to provide only the relevant custom properties. In other words, applying the yellow on black theme would only add the
.fl-theme-yb
class to the body and apply the following styles:Then, the integrator could use these two CSS custom properties throughout their stylesheets with a fallback to their theme's default colour. For example:
In this way the contrast theme provides colour variables which are consumed by the integrator's stylesheet, rather than attempting to override large portions of the integrator's stylesheet which the integrator may have to struggle to restyle appropriately while respecting the contrast theme.
There would also be significant benefits in terms of file size. The most complex contrast theme is this one:
Minified, this is 204b compared to the current contrast theme stylesheet's 20.2kB.
An important caveat is that this approach would necessitate some more comprehensive documentation on how to integrate contrast themes, and would require more deep integration into a site's stylesheets. This would have the benefit of encouraging integrators to write more flexible, adaptable CSS.