如何仅用HTML和CSS实现点击链接/图标切换网页配色样式？

Hey there! Let's break down how to solve both your needs—switching page CSS styles on click, and building color scheme variants for ibrepository.com using only HTML and CSS. Since we can't rely on JavaScript, we'll use a clever trick with hidden checkboxes and CSS sibling selectors. Here's a step-by-step guide:

1. Define CSS Variables for Easy Color Management #

First, we'll store all color values in CSS variables (in the :root selector). This lets us swap entire color schemes in one place instead of rewriting styles for every element. We'll start with a default scheme and add an alternate one (you can expand to more later).

:root {
  /* Default light color scheme */
  --primary: #2563eb;
  --bg: #ffffff;
  --text: #1f2937;
  --link: #2563eb;
  --border: #e5e7eb;
}

/* Alternate dark color scheme (activated on toggle) */
.color-toggle:checked ~ :root {
  --primary: #7c3aed;
  --bg: #1f2937;
  --text: #f9fafb;
  --link: #a78bfa;
  --border: #374151;
}

2. Add the Toggle Control (Icon or Link) #

We'll use a hidden checkbox to track the toggle state, and a <label> element (linked to the checkbox) as the clickable trigger. You can style this label as an icon or a link—whichever fits your site's design.

Option A: Icon Toggle #

<!-- Hidden checkbox (tracks state) -->
<input type="checkbox" id="color-switch" class="color-toggle" hidden>

<!-- Clickable icon label -->
<label for="color-switch" class="toggle-icon">
  🌙 <!-- Use an emoji, SVG, or icon font here -->
</label>

<!-- Example ibrepository.com content structure -->
<header>
  <h1>ibrepository.com</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/repos">Repositories</a>
  </nav>
</header>
<main>
  <p>Welcome to the open-source repository hub!</p>
</main>

Option B: Link-Style Toggle #

If you prefer a clickable link instead of an icon, style the label like this:

<label for="color-switch" class="toggle-link">Switch to Dark Mode</label>

.toggle-link {
  cursor: pointer;
  color: var(--link);
  text-decoration: underline;
  margin-left: 1rem;
}

3. Apply Variables to Your Site's Styles #

Now hook up the CSS variables to all your page elements so they inherit the active color scheme. Add a smooth transition for a polished effect:

body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.3s, color 0.3s;
}

a {
  color: var(--link);
}

header {
  border-bottom: 1px solid var(--border);
  padding: 1rem;
}

/* Style the icon toggle */
.toggle-icon {
  cursor: pointer;
  font-size: 1.5rem;
  padding: 0.5rem;
  position: fixed;
  top: 1rem;
  right: 1rem;
}

How It Works #

• The hidden checkbox keeps track of whether we're using the default or alternate scheme.
• Clicking the label (icon/link) toggles the checkbox's :checked state, which triggers the CSS rule that overwrites the :root variables.
• Every element using the variables automatically updates its colors—no JavaScript required!

Adding Multiple Color Schemes #

Want more than two variants? Use radio buttons instead of a checkbox, and target each radio's :checked state to set unique variable values:

<input type="radio" id="scheme-light" name="color-scheme" class="scheme-toggle" checked hidden>
<input type="radio" id="scheme-dark" name="color-scheme" class="scheme-toggle" hidden>
<input type="radio" id="scheme-purple" name="color-scheme" class="scheme-toggle" hidden>

<label for="scheme-light" class="toggle-icon">☀️</label>
<label for="scheme-dark" class="toggle-icon">🌙</label>
<label for="scheme-purple" class="toggle-icon">💜</label>

#scheme-dark:checked ~ :root {
  /* Dark scheme variables */
  --primary: #0f172a;
  --bg: #020617;
  /* ... other colors */
}

#scheme-purple:checked ~ :root {
  /* Purple scheme variables */
  --primary: #8b5cf6;
  --bg: #1e1b4b;
  /* ... other colors */
}

This approach fits perfectly for ibrepository.com—just map the variables to your existing site's CSS classes, and you can swap color schemes with a single click using only HTML and CSS.

内容的提问来源于stack exchange，提问作者s1-