Skip to content

Add support for color mode selection by user

Phu Nguyen requested to merge work/dark into hugo

Add a switch for user to select a color mode, in addition to the current automatic selection based on browser's color scheme

Light Dark
Screenshot_20221229_174134 Screenshot_20221229_174031

By default, the color mode selection is still automatic, i.e. using media query. Each website can be configured to use data attribute for the color mode selection by setting colorModeType: data config param, then the switch is shown and users can use the switch to select color modes

Automatic / Media query Manual / Data attribute
Screenshot_20230303_210506 Screenshot_20230303_210553

This makes use of color mode support added in Bootstrap 5.3 and Hugo's vars option added in version 0.109.0 to pass values from Hugo to SCSS (Hugo on our server has been updated to 0.110.0).

Edited by Phu Nguyen

Merge request reports