Notice: Fix issues with dark mode selection

Incorporate open PR from the repo: martignoni/hugo-notice#32

Author: hugocf

bin/theme-compare-notice.approved

@@ -0,0 +1,64 @@
+--- _vendor/github.com/martignoni/hugo-notice/layouts/shortcodes/notice.html	2024-04-20 01:51:49
++++ layouts/shortcodes/notice.html	2024-04-20 02:16:17
+@@ -23 +23 @@
+-        --tip-content: #efe
++        --tip-content: #efe;
+@@ -39 +39 @@
+-            --tip-content: #121
++            --tip-content: #121;
+@@ -43 +43 @@
+-    body.dark .notice {
++    body.dark .notice, [data-theme="dark"] .notice {
+@@ -55 +55 @@
+-        --tip-content: #121
++        --tip-content: #121;
+@@ -64 +64 @@
+-        background: var(--root-background)
++        background: var(--root-background);
+@@ -68 +68 @@
+-        margin-bottom: 0
++        margin-bottom: 0;
+@@ -77 +77 @@
+-        background: var(--title-background)
++        background: var(--title-background);
+@@ -81 +81 @@
+-        background: var(--warning-title)
++        background: var(--warning-title);
+@@ -85 +85 @@
+-        background: var(--warning-content)
++        background: var(--warning-content);
+@@ -89 +89 @@
+-        background: var(--info-title)
++        background: var(--info-title);
+@@ -93 +93 @@
+-        background: var(--info-content)
++        background: var(--info-content);
+@@ -97 +97 @@
+-        background: var(--note-title)
++        background: var(--note-title);
+@@ -101 +101 @@
+-        background: var(--note-content)
++        background: var(--note-content);
+@@ -105 +105 @@
+-        background: var(--tip-title)
++        background: var(--tip-title);
+@@ -109 +109 @@
+-        background: var(--tip-content)
++        background: var(--tip-content);
+@@ -115 +115 @@
+-        margin-right: 8px
++        margin-right: 8px;
+@@ -118,2 +118 @@
+-    .icon-notice img,
+-    .icon-notice svg {
++    .icon-notice img, .icon-notice svg {
+@@ -122 +121 @@
+-        fill: currentColor
++        fill: currentColor;
+@@ -125,2 +124 @@
+-    .icon-notice img,
+-    .icon-notice.baseline svg {
++    .icon-notice img, .icon-notice.baseline svg {
+@@ -128 +126 @@
+-        position: relative
++        position: relative;

layouts/shortcodes/notice.html

@@ -20,7 +20,7 @@
         --note-title: #6be;
         --note-content: #e7f2fa;
         --tip-title: #5a5;
-        --tip-content: #efe
+        --tip-content: #efe;
     }
 
     @media (prefers-color-scheme:dark) {
@@ -36,11 +36,11 @@
             --note-title: #069;
             --note-content: #023;
             --tip-title: #363;
-            --tip-content: #121
+            --tip-content: #121;
         }
     }
 
-    body.dark .notice {
+    body.dark .notice, [data-theme="dark"] .notice {
         --root-color: #ddd;
         --root-background: #eff;
         --title-color: #fff;
@@ -52,7 +52,7 @@
         --note-title: #069;
         --note-content: #023;
         --tip-title: #363;
-        --tip-content: #121
+        --tip-content: #121;
     }
 
     .notice {
@@ -61,11 +61,11 @@
         margin-bottom: 24px;
         border-radius: 4px;
         color: var(--root-color);
-        background: var(--root-background)
+        background: var(--root-background);
     }
 
     .notice p:last-child {
-        margin-bottom: 0
+        margin-bottom: 0;
     }
 
     .notice-title {
@@ -74,58 +74,56 @@
         border-radius: 4px 4px 0 0;
         font-weight: 700;
         color: var(--title-color);
-        background: var(--title-background)
+        background: var(--title-background);
     }
 
     .notice.warning .notice-title {
-        background: var(--warning-title)
+        background: var(--warning-title);
     }
 
     .notice.warning {
-        background: var(--warning-content)
+        background: var(--warning-content);
     }
 
     .notice.info .notice-title {
-        background: var(--info-title)
+        background: var(--info-title);
     }
 
     .notice.info {
-        background: var(--info-content)
+        background: var(--info-content);
     }
 
     .notice.note .notice-title {
-        background: var(--note-title)
+        background: var(--note-title);
     }
 
     .notice.note {
-        background: var(--note-content)
+        background: var(--note-content);
     }
 
     .notice.tip .notice-title {
-        background: var(--tip-title)
+        background: var(--tip-title);
     }
 
     .notice.tip {
-        background: var(--tip-content)
+        background: var(--tip-content);
     }
 
     .icon-notice {
         display: inline-flex;
         align-self: center;
-        margin-right: 8px
+        margin-right: 8px;
     }
 
-    .icon-notice img,
-    .icon-notice svg {
+    .icon-notice img, .icon-notice svg {
         height: 1em;
         width: 1em;
-        fill: currentColor
+        fill: currentColor;
     }
 
-    .icon-notice img,
-    .icon-notice.baseline svg {
+    .icon-notice img, .icon-notice.baseline svg {
         top: .125em;
-        position: relative
+        position: relative;
     }
 </style>
 {{- $.Page.Scratch.Set "notice-style-loaded-flag" true -}}