@diagrammo/dgmo-standalone 0.74.0 → 0.76.0

package/dist/auto.css

@@ -38,10 +38,21 @@ pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
 }
 
 /* @diagrammo/dgmo block — standard embed chrome.
- * Override the [data-theme="dark"] selectors if your site uses .dark or
- * another color-mode convention. */
+ * Dark mode is keyed on a data-theme="dark" attribute (Starlight, Docusaurus)
+ * AND an html.dark class (Tailwind, next-themes, VitePress), so all of those
+ * work as shipped. Add your own selector if your site marks dark a third way.
+ *
+ * No selector is spelled in bracket form anywhere in these comments on
+ * purpose: the adapters that re-key the attribute rules onto another host's
+ * signal match that exact substring, and a mention inside a comment would be
+ * swallowed into a rule they then emit as garbage. */
 
-/* === Color-mode visibility (dual-render) === */
+/* === Color-mode visibility (dual-render) ===
+ * The dark wrapper also carries the "hidden" ATTRIBUTE, so a page that never
+ * loaded this stylesheet shows the light diagram rather than both of them.
+ * Every rule below is author-origin and therefore still overrides it.
+ * Keep the two host conventions in separate rule blocks — the adapters
+ * rewrite by literal replace and a folded rule would half-rewrite. */
 .dgmo-dark {
   display: none;
 }
@@ -51,6 +62,12 @@ pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
 [data-theme="dark"] .dgmo-dark {
   display: block;
 }
+html.dark .dgmo-light {
+  display: none;
+}
+html.dark .dgmo-dark {
+  display: block;
+}
 
 /* === Diagram sizing ===
  * SVGs are emitted with viewBox only (no fixed width/height). Force them to
@@ -485,13 +502,6 @@ pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
   }
 }
 
-.dgmo-theme-dark selectors if your site uses .dark or
- * another color-mode convention. */
-
-/* === Color-mode visibility (dual-render) === */
-.dgmo-dark {
-  display: none;
-}
 .dgmo-theme-dark .dgmo-light {
   display: none;
 }