search

smittreiter / DneStorefrontDarkMode

Dark-Mode Plugin for Shopware Storefront
6 stars 1 forks source link

[data-theme="dark"] selector usage #2

Open nikkoch opened 1 year ago

nikkoch commented 1 year ago

Hello, I try to use these selectors, but can't make them appear in compiled CSS:

`:root[data-theme="dark"] { img.cms-image { filter: invert(100%) sepia(5%) saturate(0%) hue-rotate(226deg) brightness(119%) contrast(100%); } }

html[data-theme="dark"] { h3 { color: #fff; } }`

Shopware, 6.5.4.1 Dark Mode Storefront, 2.0.0 Custom JavaScript/CSS Manager for Shopware 6, 3.0.0

dneustadt commented 1 year ago

I tested this and generally it still works. Maybe the rules get overridden in the compiler? The installation date of plugins dictates the order in which styles are loaded. Try uninstalling and installing your plugin again, so the installation date is newer than that of the dark mode plugin. If you're using a theme you can also set the order in which styles are loaded in the configuration.

nikkoch commented 1 year ago

after reinstalling Custom CSS Manager it still doesn't appear. The only appearance I discover at the end of CSS rules (Chrome inspector) of all.css is:

@media (prefers-color-scheme: dark) :root:not([data-theme="light"]) { --color-6f42c1: #6a3dbe; etc..

UPDATE: it works in Firefox, but not in Chrome including Incognito mode (even after cleaning the cache manually)

dneustadt commented 1 year ago

Well, if it works in one browser but not the other then the issue certainly occurs past the compilation. Maybe Chrome doesn't support some of the filters and ignores the rule entirely?

nikkoch commented 1 year ago

In Firefox Private mode, it also doesn't work.

Rules just doesn't appear, this is not about the filter, I use some simple 'color:' rules as well.