How can i download Accessible Contrast themes?

Product Support

AI-generated summary

catinthehat asked how to download the “Accessible Contrast” themes on the site. Moin responded with a step-by-step guide, explaining that the themes cannot be downloaded directly but can be created manually. First, users must create a color scheme using the WCAG Light base palette at /admin/customize/colors, then name and save it. Next, they should create a new theme at /admin/customize/themes by selecting “create new” and naming it. To enable users to choose the theme, it must be set as default and linked to the custom color scheme. Moin also noted that the process should be repeated to create a dark version. catinthehat confirmed that the instructions worked.

1

There is a theme on the left side of this site called “Accessible Contrast” dark and light, how can i download them?

2

Hey @catinthehat! Welcome to Meta!

You can create those themes yourself:

First, you create the color scheme at /admin/customize/colors.
Then, click New and choose WCAG Light as the base palette, and click New again.

The image shows a user interface for selecting a base color palette in a software application, with options for WCAG Light among others, and a button to create a new palette. (Captioned by AI)
The image shows a user interface for selecting a base color palette in a software application, with options for WCAG Light among others, and a button to create a new palette. (Captioned by AI)1930×903 102 KB

You can edit the name to something more precise like “WCAG Light”. You can also allow users to choose that color scheme in their preferences, but this is not necessary.

The image shows a user interface of a color selection tool labeled "WCAG Light," with options to save, duplicate, copy to clipboard, or delete a color scheme, as well as checkboxes for enabling user selection of color schemes and showing only overridden colors, with a section beneath to define a primary color represented by a hexadecimal value (black: #000000). (Captioned by AI)
The image shows a user interface of a color selection tool labeled "WCAG Light," with options to save, duplicate, copy to clipboard, or delete a color scheme, as well as checkboxes for enabling user selection of color schemes and showing only overridden colors, with a section beneath to define a primary color represented by a hexadecimal value (black: #000000). (Captioned by AI)1185×492 74.3 KB

Then create a new theme at /admin/customize/themes
Click Install, select ‘create new’, name it and click Create.

This image depicts a user interface for installing themes on a Discourse platform, showing options to install from popular choices, the user's device, or from a git repository with a field to name the theme as "High contrast." (Captioned by AI)
This image depicts a user interface for installing themes on a Discourse platform, showing options to install from popular choices, the user's device, or from a git repository with a field to name the theme as "High contrast." (Captioned by AI)1831×852 127 KB

In order to allow your users to choose the theme, enable the setting and change the color palette to the color scheme you created. Don’t forget to click the :white_check_mark: to save the adjustments.

The image shows a user interface for configuring a "High contrast" theme with options like enabling it by default, allowing users to select it, and a color palette selection drop-down titled "WCAG Light." (Captioned by AI)
The image shows a user interface for configuring a "High contrast" theme with options like enabling it by default, allowing users to select it, and a color palette selection drop-down titled "WCAG Light." (Captioned by AI)1162×624 87 KB

To create the dark color scheme and dark theme, repeat those steps.

3

thank you, this worked