需要帮助在函数中更改 SVG 的颜色 - Skycons答案

【问题标题】：Need help changing the color of an SVG in a function - Skycons需要帮助在函数中更改 SVG 的颜色 - Skycons
【发布时间】：2019-09-05 21:08:20
【问题描述】：

我正在使用基于 youtube video 的天气应用程序

我有以下code 并且正在使用 Skycons.js

我现在遇到的问题是我正在尝试在此实现暗模式。而且我的大部分功能都可以正常工作，但是当我的暗模式切换打开时，我找不到将 Skycon 从黑色更改为白色然后再变回黑色的方法。

这是我的代码：

//pulls Skycons from skycons.js

function setIcons(icon, iconID) {
  const skycons = new Skycons({color: "black"});
  const currentIcon = icon.replace(/-/g, "_").toUpperCase();
  skycons.play();
  return skycons.set(iconID, Skycons[currentIcon]);
}

// Dark Mode Toggle Button
function darkMode(obj) {
  if ($(obj).is(":checked")){
    $("body").addClass("dark");
  } else {
    $("body").removeClass("dark"); 
  }
}

理想情况下，我希望我的按钮能够关闭和打开暗模式，这应该将我的 SVG 更改为白色，文本和背景从蓝色渐变到紫色渐变。

【问题讨论】：

标签： javascript jquery css html ecmascript-6

【解决方案1】：

代码需要重构以包含不同的功能。

let currentMode = 'light'

window.addEventListener("load", () => {
  getWeather();
});

function getWeather() {
 if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {

const long = position.coords.longitude; const lat = position.coords.latitude;

  const proxy = "https://cors-anywhere.herokuapp.com/";
  const api = `${proxy}https://api.darksky.net/forecast/3dfa731ae990c93b6909c90958e9bc36/${lat},${long}`;
  fetch(api)
    .then(response => {
      return response.json();
    })

    .then(data => {
      loadData(data)
    });
});
}
}...
// Dark Mode Toggle Button

function toggleMode(sourceCheckbox) {
  const newMode = currentMode === 'light' ? 'dark' : 'light'
  currentMode = newMode
  getWeather();
  if ($(sourceCheckbox).is(":checked")) {
    $("body").addClass("dark");
  } else {
    $("body").removeClass("dark");

  }
}

【讨论】：