0

A sub domain of my site uses a cname record to point to a 3rd party resource. Support is limited. The only control I have over that resource is the style. On page load, it pulls in a stylesheet from the root of the main domain. Within that stylesheet, I can @import more stylesheets from my site, but referencing images, fonts etc from my site violates cross-domain policies and they won't load.

I want to implement a dark-mode option for the whole site and include this subdomain with the changes. What's the best way to achieve this?

Can I set a cookie or something that can be read by the CSS somehow?

Do I replace the whole stylesheet file when the user toggles dark-mode, and if so, how do I overcome server and browser caching?

I've even thought of having two different subdomains, but I know that won't work because the stylesheets for both would have to be named the same and located in the same place.

UPDATE: Thanks @Ryuno-Ki for this suggestion.

@media (prefers-color-scheme: dark) is a good start. It will allow me to determine the user's own system's dark-mode settings and automatically apply CSS based on it. But I also want to provide the user a way to toggle it on the site as well (because). Can I manipulate this property from my main site in some way?

Baddie
  • 305
  • 1
  • 3
  • 11

1 Answers1

0

yes, that should work. Dark-mode generally works with the prefers-color-scheme: dark media query. A stylesheet should allow that.

Regarding the images: It will bloat up the site, but using data-URIs may pass the Cross-Domain policies.

Ryuno-Ki
  • 692
  • 1
  • 6
  • 8
  • Thanks for the data-URI hint, that'll actually solve another issue fro me. Looks like prefers-color-scheme is a good start, I updated my OP. – Baddie Feb 28 '21 at 15:17
  • As far as I know, CSS cannot read Cookies. That being said, there used to be the option to link to alternate stylesheets: https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets If you could also run JavaScript, that might help. – Ryuno-Ki Feb 28 '21 at 15:31
  • The only other way is to use a set of `` (or `type="checkbox"`) with a shared `name` attribute (since these HTML elements can hold state). They won't be persisted across multi-page transitions (but might be for a SPA site). You then would target it via attribute selectors in CSS. – Ryuno-Ki Feb 28 '21 at 15:33