Adapted saturation and hue filters

This commit is contained in:
Kevin Veen-Birkenbach 2025-02-17 15:29:38 +01:00
parent 0161f855ae
commit 77ad71436e
2 changed files with 6 additions and 4 deletions

View File

@ -5,8 +5,6 @@ global_theming:
# General Colors # General Colors
base: "#001f3f" base: "#001f3f"
lightness_change:
# Sucess Color # Sucess Color
success: "#B2D3B2" success: "#B2D3B2"
# As the warning color a light brown (earth) # As the warning color a light brown (earth)
@ -15,4 +13,8 @@ global_theming:
error: "#DC3545" error: "#DC3545"
# As the info color a very light blue (symbolizing the sky) # As the info color a very light blue (symbolizing the sky)
info: "#F0F8FF" info: "#F0F8FF"
filters:
saturation_change: 100
hue_shift: 0
global_theming_enabled: true global_theming_enabled: true

View File

@ -9,7 +9,7 @@ HINT: Better overwritte CSS variables instead of individual elements.
:root { :root {
/** Derived Colors from the Base Color **/ /** Derived Colors from the Base Color **/
{% for i in range(1, 100) %} {% for i in range(1, 100) %}
--color-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color(target_lightness=(i / 100)) }}; --color-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color(target_lightness=(i / 100),saturation_change=global_theming.css.filters.saturation_change,hue_shift=global_theming.css.filters.hue_shift) }};
{% endfor %} {% endfor %}
/** Special Action Colors **/ /** Special Action Colors **/
@ -24,7 +24,7 @@ HINT: Better overwritte CSS variables instead of individual elements.
:root { :root {
/** Dark Mode Derived Colors from the Base Color **/ /** Dark Mode Derived Colors from the Base Color **/
{% for i in range(1, 100) %} {% for i in range(1, 100) %}
--color-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color(target_lightness=(1 - (i / 100))) }}; --color-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color(target_lightness=(1 - (i / 100)),saturation_change=global_theming.css.filters.saturation_change,hue_shift=global_theming.css.filters.hue_shift) }};
{% endfor %} {% endfor %}
/** Special Action Colors **/ /** Special Action Colors **/