Customizing colors

[nhewitt99]

Hello! Thanks for this theme!

I'm hoping to customize the accent colors used and am not sure whether this is possible. The best leads I could find were the color parameter, the dark.css and light.css files, and the color settings in site.webmanifest. None of these had the desired effect of changing the accent color of hyperlinks, nav pills, and icons.

What can I do to change the colors used by this theme? I'm woefully unexperienced with web dev, so I hope I'm not overlooking something obvious :)

[nhewitt99]

I mostly have this figured out, I think. I'm adding a partial at the end of head that pulls in a custom stylesheet where I can override any of the bootstrap defaults. For example, to override the href colors this works:

themes/paige/layouts/partials/paige/head-last.html

<link rel="stylesheet" href="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/custom.css" />

static/custom.css

a {
    color: hotpink;
}

I'll wait to close this issue, because I'm not confident that this is the canonical way to approach this.

[willfaught]

Hi, @nhewitt99! Thanks for your question.

You're correct that the only way to do this was to override the CSS styles yourself. If you want to stick with that approach, you can also change the background colors for Bootstrap components like the navbar active item or the search button that way. Look for Bootstrap classes that end in "-primary", like .btn-primary, and override their colors in your own stylesheet.

I quickly looked into making this easier a little while ago, but I didn't find an easy solution. Your issue prompted me to figure it out, so now with the latest release, setting paige.color also changes the primary color for Bootstrap, following the technique described here. In short, when you specify paige.color, a custom Bootstrap stylesheet with your custom color is generated and used.

Hope that helps!

[nhewitt99]

Thanks so much! That new feature will absolutely be helpful down the line.