Need to change color scheme for different pages due to different backgrounds. So I’m using the default main menu for my home page but I need a separate menu for all my other pages. I’m only wanting to change the color scheme though.
Hey @Gone_Postal Welcome to Shopify Community can you please share the Website URL and also share the screen that you want to change
So Horizon family (including Ritual) uses class color-scheme-XXX to define what colors are used for the element.
Say, in my test store, the element in header looks like:
<div class="header__row header__navigation-bar-row color-scheme-1">
To override the colors we just need to add a rule like below.
No need to use all of these properties, I’ve just included everything the theme defines for the class in question.
.header .color-cheme-1 {
--color-background: rgb(225 237 245 / 1.0);
--color-background-rgb: 225 237 245;
--opacity-5-15: 0.05;
--opacity-10-25: 0.1;
--opacity-35-55: 0.35;
--opacity-40-60: 0.4;
--opacity-30-60: 0.3;
--color-foreground: rgb(0 0 0 / 0.81);
--color-foreground-rgb: 0 0 0;
--color-foreground-heading: rgb(0 0 0 / 1.0);
--color-foreground-heading-rgb: 0 0 0;
--color-primary: rgb(0 0 0 / 0.81);
--color-primary-rgb: 0 0 0;
--color-primary-hover: rgb(0 0 0 / 1.0);
--color-primary-hover-rgb: 0 0 0;
--color-border: rgb(29 54 134 / 0.5);
--color-border-rgb: 29 54 134;
--color-shadow: rgb(0 0 0 / 1.0);
--color-shadow-rgb: 0 0 0;
--color-primary-button-text: rgb(255 255 255 / 1.0);
--color-primary-button-background: rgb(0 0 0 / 1.0);
--color-primary-button-border: rgb(29 54 134 / 1.0);
--color-primary-button-hover-text: rgb(255 255 255 / 1.0);
--color-primary-button-hover-background: rgb(51 51 51 / 1.0);
--color-primary-button-hover-border: rgb(0 0 0 / 1.0);
--color-secondary-button-text: rgb(0 0 0 / 1.0);
--color-secondary-button-background: rgb(0 0 0 / 0.0);
--color-secondary-button-border: rgb(0 0 0 / 1.0);
--color-secondary-button-hover-text: rgb(0 0 0 / 0.81);
--color-secondary-button-hover-background: rgb(255 255 255 / 0.36);
--color-secondary-button-hover-border: rgb(0 0 0 / 0.81);
--color-input-background: rgb(0 0 0 / 0.0);
--color-input-text: rgb(0 0 0 / 0.81);
--color-input-text-rgb: 0 0 0;
--color-input-border: rgb(0 0 0 / 0.81);
--color-input-hover-background: rgb(255 255 255 / 0.36);
--color-variant-background: rgb(255 255 255 / 1.0);
--color-variant-border: rgb(230 230 230 / 1.0);
--color-variant-text: rgb(0 0 0 / 1.0);
--color-variant-text-rgb: 0 0 0;
--color-variant-hover-background: rgb(245 245 245 / 1.0);
--color-variant-hover-text: rgb(0 0 0 / 1.0);
--color-variant-hover-border: rgb(230 230 230 / 1.0);
--color-selected-variant-background: rgb(0 0 0 / 1.0);
--color-selected-variant-border: rgb(0 0 0 / 1.0);
--color-selected-variant-text: rgb(255 255 255 / 1.0);
--color-selected-variant-hover-background: rgb(26 26 26 / 1.0);
--color-selected-variant-hover-text: rgb(255 255 255 / 1.0);
--color-selected-variant-hover-border: rgb(26 26 26 / 1.0);
--input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
--input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));
--input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
--color-foreground-muted: rgb(var(--color-foreground-rgb) / var(--opacity-60));
--font-h1--color: var(--color-foreground-heading);
--font-h2--color: var(--color-foreground-heading);
--font-h3--color: var(--color-foreground-heading);
--font-h4--color: var(--color-foreground-heading);
--font-h5--color: var(--color-foreground-heading);
--font-h6--color: var(--color-foreground-heading);
--shadow-drawer: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15));
--shadow-blur: 20px;
--shadow-popover: 0px 4px 20px rgb(var(--color-shadow-rgb) / var(--opacity-15));
}
However, some elements may have their own color scheme settings, say header and top menu level may use scheme 5, but menu drop-downs may use scheme 1, so you may need to override these too.
Now, how can we override these values for some pages only?
By using custom template for those pages.
In this template you can add a “Custom liquid” section and put our CSS there, like this:
(Say, we only want to change the background color, and we use scheme 1 for entire header, but scheme 5 for the mega-menu)
<style>
.header .color-cheme-1 {
--color-background: rgb(200 237 245 / 1.0);
--color-background-rgb: 200 237 245;
}
.header .color-cheme-5 {
--color-background: rgb(200 237 245 / 1.0);
--color-background-rgb: 200 237 245;
}
</style>
Other properties will be inherited from the default settings.
Generally, settings for Header and Footer are the same for all pages.
But because we’re putting these override CSS rules in a “custom liquid” section in Template area, they will only apply on the pages which use this template and override the Header colors only for those.
So, in your case, if you only want to change color on homepage, then use default color scheme for all other pages, but add an override code to the home page template.
You'd need to find out what color schemes you're using.
Things may be a bit more complicated (or may actually be much easier) if you have “Transparent background” checked for Homepage – in this case theme allows you to select the “Inverse” color scheme for homepage header colors and select that scheme instead of the defaul Header colors:
Hi @Gone_Postal
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Best regards,
Devcoder 
pass: auntas
Hi @Gone_Postal
Could you please send me screenshots showing which colors you need and on which pages? Also, let me know which ones you want to be dynamic through the Theme Customizer. Additionally, please share the collaborator code so I can implement these changes directly in your theme.
I used the transparent background + inverse theme and it worked but I do not want a white bar to come down when i hover the mouse over a menu button
Hi @Gone_Postal
I’ve sent you the request — please accept it.
okay i just accepted it
I like the white bar that comes down from the menu but it hides my logo on the collection, and product pages
Hi @Gone_Postal
I have created a duplicate theme and completed the work on it. Please review it once. After your confirmation, I will move the code to your main theme.
Thank you! How could i make sure the logo stays on screen when i hover my mouse over the text buttons on the menu. currently it disappears when i hover over a button
Hi @Gone_Postal
Ok, I will check and update you.
(post deleted by author)
Do not paste such information on the forum, they’re sensitive details and anyone could access them easily