Fix #3849: fix Light Mode color swatches in Dark Mode

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec36cf1a60f43b8b0cdfc83ec83450821996fe4e..40f184123087d7735c68942ef226ef52ccec01b3 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,9 +2,10 @@
 
 ## 1.0.3
 
-### Bug fixes
+### Documentation Fixes
 
 - Fix #3904, #3884: fix website horizontal overflow
+- Fix #3849: fix Light Mode color swatches in Dark Mode
 
 ## 1.0.2
 

diff --git a/docs/documentation/features/dark-mode.md b/docs/documentation/features/dark-mode.md
index 59905e207f891da09d32e57eb8d98a34d52e7dbd..afc958979659cbbe80a59e2c8579aac1d28bf89b 100644 (file)
--- a/docs/documentation/features/dark-mode.md
+++ b/docs/documentation/features/dark-mode.md
@@ -259,70 +259,70 @@ For Dark Mode, Bulma will keep the same hue and saturation of the main scheme co
     <tr>
       <th><code>--bulma-scheme-main-l</code></th>
       <td><code>100%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l));"></span></td>
       <td><code>11%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l));"></span></td>
     </tr>
     <tr>
       <th><code>--bulma-scheme-main-bis-l</code></th>
       <td><code>98%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l));"></span></td>
       <td><code>13%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l));"></span></td>
     </tr>
     <tr>
       <th><code>--bulma-scheme-main-ter-l</code></th>
       <td><code>98%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l));"></span></td>
       <td><code>15%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l));"></span></td>
     </tr>
     <tr>
       <th><code>--bulma-background-l</code></th>
       <td><code>96%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l));"></span></td>
       <td><code>14%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l));"></span></td>
     </tr>
     <tr>
       <th><code>--bulma-border-weak-l</code></th>
       <td><code>93%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-weak-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-weak-l));"></span></td>
       <td><code>21%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-weak-l));"></span></td>
     </tr>
     <tr>
       <th><code>--bulma-border-l</code></th>
       <td><code>86%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l));"></span></td>
       <td><code>24%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l));"></span></td>
     </tr>
     <tr>
       <th><code>--bulma-text-weak-l</code></th>
       <td><code>48%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-weak-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-weak-l));"></span></td>
       <td><code>53%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-weak-l));"></span></td>
     </tr>
     <tr>
       <th><code>--bulma-text-l</code></th>
       <td><code>29%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));"></span></td>
       <td><code>71%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));"></span></td>
     </tr>
     <tr>
       <th><code>--bulma-text-strong-l</code></th>
       <td><code>21%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-strong-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-strong-l));"></span></td>
       <td><code>93%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-strong-l));"></span></td>
     </tr>
     <tr>
       <th><code>--bulma-text-title-l</code></th>
       <td><code>14%</code></td>
-      <td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-title-l));"></span></td>
+      <td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-title-l));"></span></td>
       <td><code>100%</code></td>
       <td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-title-l));"></span></td>
     </tr>