主页 / 问题 / 1384919
Accepted
Alexandr_TT
Asked:2022-07-23 00:43:57 +0800 CST2022-07-23 00:43:57 +0800 CST

将徽标颜色切换为深色模式的问题

  • 772

我的作品集有一个黑色徽标，我想在深色模式下将其切换为白色。https://www.paulinerouger.com/

我试着做：

  • 使用 CSS 变量：
<img class="nav_logo" src="assets/img/PR_logo.png" alt="original logo" />

body {
  --nav_logo: url(PR_logo.png) no-repeat;

}

body[data-theme="dark"] {
  --nav_logo: url(PR_logo_white.png) no-repeat;
}

.nav_logo {
    background: var(--nav_logo);
  }
  • 使用 SVG 制作
<img class="nav_logo" src="assets/img/PR_logo.svg" id="svg" alt="PR Logo">


.nav_logo {
    fill: currentColor;
}

不幸的是，以上都没有奏效。
有什么解决问题的建议吗？

@PaulineTW对深色模式下 Switch 徽标颜色的 松散翻译问题。

javascript

2 个回答

  1. 如果您正在考虑基于 JS 的解决方案，您可以使用我在下面开发的方法。
    单击该按钮会同时更改元素的属性和元素src的<img>样式。background-color<body>

    let button = document.getElementById('toggleButton');
let logo = document.getElementById('logo');

let darkImageURL = "https://isstatic.askoverflow.dev/DuKoK.png";
let lightImageURL = "https://isstatic.askoverflow.dev/kJSxu.png";

button.addEventListener('click', function(event) {
  if(this.innerHTML === "Dark") {
    document.body.style.background = "black";
    this.innerHTML = "Light";
    logo.src = darkImageURL;
  }
  else {
    document.body.style.background = "white";
    this.innerHTML = "Dark";
    logo.src = lightImageURL;
  }
});
    <body>
  <button id="toggleButton">Dark</button>

  <img id="logo" class="nav_logo" src="https://isstatic.askoverflow.dev/kJSxu.png" alt="original logo" width="100" height="100"/>
</body>

    来自 @Sercan的答案的松散翻译 。

    • 1
  2. Best Answer

    您可以使用属性content，可以使用 css 变量进行设置。

    例如：

    document.getElementById('toggleButton').addEventListener('click', function(event) {
  if (this.innerHTML === "Dark") {
    document.body.dataset.theme = "dark";
    this.innerHTML = "Light";
  } else {
    document.body.dataset.theme = "light";
    this.innerHTML = "Dark";
  }
});
    body {
  --nav_logo: url(https://cdn-icons-png.flaticon.com/512/169/169367.png);
}

body[data-theme="dark"] {
  --nav_logo: url(https://cdn-icons-png.flaticon.com/512/196/196685.png);
}

.nav_logo {
  content: var(--nav_logo);
  display: inline-block;
}
    <body>
  <button id="toggleButton">Dark</button>

  <img id="logo" class="nav_logo" alt="original logo" width="100" height="100" />
</body>

    • 1

相关问题