Use higher specificity for hiding elements

Also brings back the `display: block` setting behaviours.

docs/kitchen-sink/sphinx-design.md

@@ -72,6 +72,34 @@ Footer
 The entire card can be clicked to navigate to <https://example.com>.
 ```
 
+## Grid Cards
+
+This also checks the interaction of only-dark and only-light.
+
+````{grid} 1 1 2 3
+```{grid-item-card} One
+:img-top: https://via.placeholder.com/700.png?text=One
+:link: https://example.com/
+```
+
+```{grid-item-card} Two (only-dark)
+:img-top: https://via.placeholder.com/700.png/000000/FFFFFF/?text=only-dark
+:link: https://example.com/
+:class-item: only-dark
+```
+
+```{grid-item-card} Two (only-light)
+:img-top: https://via.placeholder.com/700.png/FFFFFF/000000?text=only-light
+:link: https://example.com/
+:class-item: only-light
+```
+
+```{grid-item-card} Three
+:img-top: https://via.placeholder.com/700.png?text=Three
+:link: https://example.com/
+```
+````
+
 ## Carousels
 
 ````{card-carousel} 2

src/furo/assets/styles/base/_theme.sass

@@ -13,16 +13,19 @@ body
 
   @include colors
 
-body:not([data-theme])
-  .only-dark
-    display: none !important
+.only-light
+  display: block !important
+html body .only-dark
+  display: none !important
 
 // Enable dark-mode, if requested.
 body[data-theme="dark"]
   @include colors-dark
 
   html & .only-light
     display: none !important
+  .only-dark
+    display: block !important
 
 // Enable dark mode, unless explicitly told to avoid.
 @media (prefers-color-scheme: dark)
@@ -31,6 +34,8 @@ body[data-theme="dark"]
 
     html & .only-light
       display: none !important
+    .only-dark
+      display: block !important
 
 //
 // Theme toggle presentation