Computer code in a text editor, highlighted in multiple colors

Photo Credit: Luca Bravo


Accessibility Considerations for Custom CSS and HTML Editor in OWL's Dark Theme

Added on September 6, 2023 by Allyson Steward
Updated on September 7, 2023

With the OWL update in July 2023, OWL now has a light and dark theme. If you are a site maintainer who uses custom CSS in your OWL sites or who uses the HTML Editor (such as in the Overview tool or Lessons) to customize the fonts and colours of your text content, you will want to make sure your OWL sites are accessible in both themes.

In both cases, the most important change to make is to text and background colours. Your text and its background colour should have sufficient contrast to meet accessibility guidelines in both OWL's Light and Dark theme. There are a number of resources available online regarding web accessibility, including WebAIM’s contrast checker, which you can use to confirm whether your colours are accessible.

To check how your content displays in both Light and Dark Theme, you can toggle between them by navigating to the account menu in the top right of OWL and selecting the Dark Theme On or Off button.

If you are using CSS for your content, you can use the following CSS custom properties (variables) in your designs to automatically change content colours when toggling between Dark and Light theme. The code provided below can be copied directly into your own CSS file to apply to your OWL site.

To create a custom colour scheme in your CSS, define your colours for both Light Theme and Dark Theme for text colours and optionally background colours. For example, below I've created a new custom property called accent-colour-1.

/* Accent colours for Light mode */
:root {
--accent-color-1: #4f2683;
}

/* Accent colours for Dark mode */
.sakaiUserTheme-dark:root {
--accent-color-1: #C09EF0;
}

 

By default, OWL's Dark Theme background Hex code colour is #202225 (a cool, dark gray) and the Light Theme background Hex code colour is #FFFFFF (white). Take this into consideration when selecting your accent colours for both themes and use the colour contrast checker to confirm the colour combinations are accessible.

When specifying the colour of text or buttons, use the variables (accent-color-1) you defined in the code above. Doing so ensures that when you or other users switch between Dark and Light Theme that these text colours change accordingly. For example:

.itemclass h1,h2,h3,h4,h5,h6{
color: var(--accent-color-1);
}


Other places you may want to specify the variable accent colours are in the Checklist, author names in the Comments tool, and hyperlinks.

.column .checklistDiv {
background-color: transparent;
border:2px solid var(--accent-color-1);
}

.commentDiv h3.author {
color: var(--accent-color-1);
}

.Mrphs-sakai-lessonbuildertool .column a[href]:not(.usebutton) {
color: var(--accent-color-1);
}

 

Resources