Referring to site-wide custom code per page

Hi folks,

my webshop will eventually have pages with both light and dark styles. I’ve set up a single nav symbol that contains all variants (main nav, sub nav, mobile nav).

I want to override the css styling of elements within this nav symbol per page. As of now, I’ve set this up in the page custom code fields, but I end up having to duplicate this code on every page and any changes must be updated on every page. This gets tedious and hard to keep track of.

Is there a way to set up bulk CSS code in the site-wide custom code fields, and refer to them on a per-page basis? (If it requires me to learn some JS I’m happy to).

In addition to this, I would also like to achieve this per layout in the Products Template page. Some products will be presented in a light style, some in a dark style, so I’ve had to set it up according to this template https://webflow.com/live-stream/creating-multiple-layouts-for-webflow-collection-template-pages due to lack of multiple Product Template pages in webflow (please, Webflow).

Any help would be appreciated.

Best,
Øystein