DEV: Experimenting with using built in core color palettes for the color picking component (#71)

This PR is the beginning of converting the color picker to use built in
core color palettes.
The `color_schemes` defined in `about.json` are created in core when the
theme is imported,
and we then show all user-selectable color palettes in this sidebar
footer menu.

An important caveat here is that all of the Horizon themes must be
changed to `user_selectable`
otherwise they will not show up in the color palette selector in the
sidebar.

When choosing a color palette that also has a corresponding dark color
palette,
*both* light mode and dark mode are correctly saved with the color
palette(s) chosen,
using the color palette cookie we already have in core.

Anon users can also set a palette, which will be saved in a cookie.

---------

Co-authored-by: Sérgio Saquetim <saquetim@discourse.org>
Co-authored-by: Martin Brennan <martin@discourse.org>
Co-authored-by: Osama Sayegh <asooomaasoooma90@gmail.com>
This commit is contained in:
Jordan Vidrine
2025-03-30 22:28:28 -05:00
committed by GitHub
parent 0473f90cd9
commit b4e451e64b
14 changed files with 506 additions and 251 deletions
+1 -25
View File
@@ -1,4 +1,4 @@
.color-palette-menu {
.user-color-palette-menu {
&__item .btn-icon-text.btn-flat {
background-color: var(--d-content-background);
width: 100%;
@@ -23,27 +23,3 @@
.user-color-palette-content .fk-d-menu__inner-content {
border: none;
}
html.custom-color-horizon {
--accent-base-color: #595bca;
}
html.custom-color-marigold {
--accent-base-color: #d3881f;
}
html.custom-color-violet {
--accent-base-color: #9b15de;
}
html.custom-color-lily {
--accent-base-color: #cc338c;
}
html.custom-color-clover {
--accent-base-color: #45a06e;
}
html.custom-color-royal {
--accent-base-color: #4169e1;
}