dynamic navbar colors

main
alexanderroese 2024-06-21 08:19:05 +02:00
parent 9cb9f8f878
commit 204aac602e
1 changed files with 26 additions and 14 deletions

View File

@ -53,7 +53,7 @@
%}
<script>
console.log("schemes15", "{{ settings.color_schemes["scheme-shx-texte-navbar"]["settings"]["background"] }}")
console.log("schemes16", "{{ settings.color_schemes["scheme-shx-texte-navbar"]["settings"]["background"] }}")
</script>
@ -70,20 +70,32 @@
:root,
{%- endif %}
.color-{{ scheme.id }} {
--color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
{% liquid
{% liquid
if scheme.id == "scheme-main-navbar" and (page.url == "/pages/texte" or product.tags contains "shx-texte")
assign new_background = settings.color_schemes["scheme-shx-texte-navbar"]["settings"]["background"]
assign new_background_gradient = settings.color_schemes["scheme-shx-texte-navbar"]["settings"]["background_gradient"]
assign new_text = settings.color_schemes["scheme-shx-texte-navbar"]["settings"]["text"]
else
assign new_shadow = settings.color_schemes["scheme-shx-texte-navbar"]["settings"]["shadow"]
assign new_button = settings.color_schemes["scheme-shx-texte-navbar"]["settings"]["button"]
assign new_button_label = settings.color_schemes["scheme-shx-texte-navbar"]["settings"]["button_label"]
assign new_secondary_button_label = settings.color_schemes["scheme-shx-texte-navbar"]["settings"]["secondary_button_label"]
else
assign new_background = scheme.settings.background
assign new_background_gradient = scheme.settings.background_gradient
assign new_text = scheme.settings.text
assign new_shadow = scheme.settings.shadow
assign new_button = scheme.settings.button
assign new_button_label = scheme.settings.button_label
assign new_secondary_button_label = scheme.settings.secondary_button_label
endif
%}
--color-background: {{ new_background.red }},{{ new_background.green }},{{ new_background.blue }};
{% if scheme.settings.background_gradient != empty %}
--gradient-background: {{ scheme.settings.background_gradient }};
{% if new_background_gradient != empty %}
--gradient-background: {{ new_background_gradient }};
{% else %}
--gradient-background: {{ new_background }};
{% endif %}
@ -102,16 +114,16 @@
--color-foreground: {{ new_text.red }},{{ new_text.green }},{{ new_text.blue }};
--color-background-contrast: {{ background_color_contrast.red }},{{ background_color_contrast.green }},{{ background_color_contrast.blue }};
--color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }};
--color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }};
--color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};
--color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
--color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
--color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
--color-shadow: {{ new_shadow.red }},{{ new_shadow.green }},{{ new_shadow.blue }};
--color-button: {{ new_button.red }},{{ new_button.green }},{{ new_button.blue }};
--color-button-text: {{ new_button_label.red }},{{ new_button_label.green }},{{ new_button_label.blue }};
--color-secondary-button: {{ new_button_label.red }},{{ new_button_label.green }},{{ new_button_label.blue }};
--color-secondary-button-text: {{ new_secondary_button_label.red }},{{ new_secondary_button_label.green }},{{ new_secondary_button_label.blue }};
--color-link: {{ new_secondary_button_label.red }},{{ new_secondary_button_label.green }},{{ new_secondary_button_label.blue }};
--color-badge-foreground: {{ new_text.red }},{{ new_text.green }},{{ new_text.blue }};
--color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
--color-badge-background: {{ new_button_label.red }},{{ new_button_label.green }},{{ new_button_label.blue }};
--color-badge-border: {{ new_text.red }},{{ new_text.green }},{{ new_text.blue }};
--payment-terms-background-color: rgb({{ scheme.settings.background.rgb }});
--payment-terms-background-color: rgb({{ new_button_label.rgb }});
{% comment %}