Javascript 样式表更改器更改网站上元素的大小

Question

因此，我添加了一个深色模式主题，只需单击一个按钮即可将其打开。 A 有一个 javascript，只需按一下按钮即可更改样式表:

function nightmode(sheet,sheet2) {
  document.getElementById('light1').setAttribute('href', sheet);
  document.getElementById('light2').setAttribute('href', sheet2);
}

和可以改变样式表的按钮

<li> <a onclick="nightmode('/cdn/about/css/main_dark.css','/cdn/about/css/bootstrap_dark.css')"  alt="nightmode"> <i class="far fa-moon "></i> </a></li>
<li> <a onclick="nightmode('/cdn/about/css/main.css','/cdn/about/css/bootstrap.css')"  alt="nightmode"> <i class="fas fa-moon "></i> </a></li>

但问题是当我单击其中一个按钮时，样式表会更改不同元素的大小，例如网站上的图标会更改。这可以在 https://swedcraft.net/Game_Hub/ 上进行测试按月亮。两个样式表之间的区别只是颜色，没有大小。谢谢!

Answer 1

css文件改变了大小，比如这个navbar
.
首先，你什么都不做，查看 css 属性，
.
接下来，点击月亮按钮可以看到，padding size 已经改变了，
.
因此，样式表会改变不同元素的大小。