我有一个html页面里面的功能已经完成了 现在要新增一个功能 叫暗黑模式进入暗黑模式后页面整体主题变成黑色但是这个功能 我不想修改原来的引用的css只允许改动一个js可以动态输出css 有什么办法实现

您可以使用JavaScript来实现这个功能。以下是一种实现方法：

1. 在您的HTML页面中添加一个按钮或开关，用于切换暗黑模式。

<button id="darkModeButton">切换暗黑模式</button>

2. 创建一个名为darkmode.js的JavaScript文件，并将其引入到您的HTML页面中。

<script src="darkmode.js"></script>

3. 在darkmode.js文件中编写JavaScript代码来处理暗黑模式的切换。

// 获取切换按钮元素
var darkModeButton = document.getElementById("darkModeButton");

// 添加点击事件监听器
darkModeButton.addEventListener("click", function() {
  // 切换暗黑模式
  toggleDarkMode();
});

// 切换暗黑模式函数
function toggleDarkMode() {
  // 获取或创建一个新的<style>元素
  var styleElement = document.getElementById("darkModeStyle");
  if (!styleElement) {
    styleElement = document.createElement("style");
    styleElement.setAttribute("id", "darkModeStyle");
    document.head.appendChild(styleElement);
  }

  // 判断当前是否为暗黑模式
  var isDarkMode = styleElement.innerHTML.length > 0;

  // 动态输出CSS样式
  if (isDarkMode) {
    // 如果当前为暗黑模式，则移除<style>元素的内容
    styleElement.innerHTML = "";
  } else {
    // 如果当前不是暗黑模式，则设置<style>元素的内容为黑色主题的CSS样式
    styleElement.innerHTML = `
      body {
        background-color: black;
        color: white;
      }
      /* 其他样式... */
    `;
  }
}

4. 现在，当用户点击"切换暗黑模式"按钮时，toggleDarkMode()函数将会在页面上动态输出或移除一个<style>元素，从而切换页面的主题为黑色或原始样式。

请注意，这个方法只是一种简单的实现方式，并且只会影响<style>元素中的样式，而不会直接修改已引用的CSS文件