关于Cargo Collective网站暗黑模式切换仅修改背景色未同步修改文字色的技术求助

Hey there! Let's get that dark mode text color working properly for your Cargo Collective site. The issue here is that Cargo's predefined styles (like the one for your H1) have higher specificity than your basic .dark-mode selector, so they're overriding your text color changes. Here's how to fix it:

Step 1: Update Your CSS with Targeted Selectors #

You need to target text elements within the .dark-mode classed body, and for elements like H1 that have Cargo's predefined styles, you'll need to match or exceed their selector specificity to override them.

Here's the revised CSS you can use:

/* Default light mode styles */
body {
  background-color: #d9ff76 !important;
  color: #000000; /* Set default text color for light mode */
}

/* Dark mode styles */
body.dark-mode {
  background-color: black !important;
  color: #ffffff; /* Global text color for dark mode (inherits to p, span, etc.) */
}

/* Override Cargo's predefined H1 style for dark mode */
body.dark-mode [data-predefined-style="true"] h1 {
  color: #ffffff !important; /* Replace with your preferred light color */
}

/* Optional: Explicitly target other text elements if needed */
body.dark-mode p,
body.dark-mode span,
body.dark-mode a {
  color: #ffffff;
}

Why This Works: #

• Using body.dark-mode instead of just .dark-mode ensures we're specifically targeting the body element with the dark mode class applied.
• The body.dark-mode [data-predefined-style="true"] h1 selector matches the specificity of Cargo's predefined H1 style exactly, so your dark mode color will take precedence.
• Setting a global color on the dark-mode body means most text elements (like paragraphs) will inherit this color automatically—you only need to target elements individually if you want custom colors for them.

Step 2: Keep Your JavaScript As-Is #

Your existing toggle code is perfectly functional—it correctly adds and removes the dark-mode class from the body element:

<button onclick="myFunction()">Toggle dark mode</button>
<script>
function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}
</script>

Give this a test, and your H1 and other text should now switch colors smoothly when you toggle dark mode!

内容的提问来源于stack exchange，提问作者Emanuele Pesa