Skip to content

Add color customization option to Olivero

Closes #3257274

This MR expands upon the work done in #3086514 and utilizes the farbtastic replacement method suggested by @mherchel in #1651344.

  • The theme-settings file attaches a new Olivero library that inserts a input[type="color"] element and keeps the two inputs synchronized. Screen_Shot_2022-01-07_at_2.53.23_PM
  • The element has the pattern attribute defined to only accept full, 6-character hexadecimal values with a leading hash. This validation method works in the browser with or without javascript. Screen_Shot_2022-01-07_at_2.52.52_PM
  • The olivero theme file adds a new function that converts hex-code values to an array containing the hue, saturation, and lightness (HSL) values, and then inserts those values to override the theme's defaults defined in the CSS file.
  • The --color--blue--XX formulas are updated to multiply the lightness values to lighten or darken the selected color
Edited by Andy Blum

Merge request reports