嗨，很高兴能帮到你！要让用户选择的主题在网站不同页面都自动生效，我们只需要在现有代码基础上加入localStorage的读写逻辑即可，下面是具体的修改步骤和完整代码：

核心修改点 #

1. 主题选择函数加入存储逻辑 #

修改scegliTema函数，在切换主题后将选中的主题存入localStorage，这样浏览器会持久保存这个选择：

function scegliTema(tema) {
 const body = document.body;
 if (body.dataset.tema) body.classList.remove(body.dataset.tema);
 body.dataset.tema = tema;
 if (tema) body.classList.add(tema);
 // 将主题存入localStorage，实现持久化
 localStorage.setItem('selectedTheme', tema);
}

2. 页面加载时自动应用存储的主题 #

在页面初始化的自执行函数中，先读取localStorage里保存的主题，如果存在就直接应用到页面上：

(() => {
 // 页面加载优先读取本地存储的主题
 const savedTheme = localStorage.getItem('selectedTheme');
 if (savedTheme) {
   scegliTema(savedTheme);
 }

 const elementi = document.querySelectorAll('#myThemes > div');
 for (let i = 0; i < elementi.length; ++i) {
   const el = elementi[i];
   const nomeTema = el.dataset.tema ? el.dataset.tema + '-theme' : '';
   elementi[i].addEventListener('click', function() {
     scegliTema(nomeTema)
   });
   // 可选：给当前选中的主题按钮添加高亮标识
   if (savedTheme === nomeTema) {
     el.classList.add('active');
   }
 }
})();

3. 可选优化：主题按钮高亮（需要配合CSS） #

你可以在CSS中添加.active类的样式，让用户直观看到当前选中的主题，比如：

#myThemes .active {
  border: 2px solid #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.8);
}

完整代码 #

<footer class="center blur padding-16">
 <p class="bold">NewTechSlyDev_</p>
 <div class="mini-grid-container" id="myThemes">
 <div class="default-theme mini-polaroid circle little-resize pointer" data-tema="" title="Default"></div>
 <div class="dark-theme mini-polaroid circle little-resize pointer" data-tema="dark" title="Dark"></div>
 <div class="transparent-theme mini-polaroid circle little-resize pointer" data-tema="transparent" title="Transparent"></div>
 <div class="apricot-theme mini-polaroid circle little-resize pointer" data-tema="apricot" title="Apricot"></div>
 <div class="past-theme mini-polaroid circle little-resize pointer" data-tema="past" title="Past"></div>
 <div class="panorama-theme mini-polaroid circle little-resize pointer" data-tema="panorama" title="Panorama"></div>
 <div class="blank-theme mini-polaroid circle little-resize pointer" data-tema="blank" title="Blank"></div>
 <div class="slimanoworld-theme mini-polaroid circle little-resize pointer" data-tema="slimanoworld" title="SlimanoWorld"></div>
 </div>
 <script>
 function scegliTema(tema) {
 const body = document.body;
 if (body.dataset.tema) body.classList.remove(body.dataset.tema);
 body.dataset.tema = tema;
 if (tema) body.classList.add(tema);
 // 持久化主题到localStorage
 localStorage.setItem('selectedTheme', tema);
 }
 (() => {
 // 页面加载时应用已存储的主题
 const savedTheme = localStorage.getItem('selectedTheme');
 if (savedTheme) {
   scegliTema(savedTheme);
 }

 const elementi = document.querySelectorAll('#myThemes > div');
 for (let i = 0; i < elementi.length; ++i) {
   const el = elementi[i];
   const nomeTema = el.dataset.tema ? el.dataset.tema + '-theme' : '';
   elementi[i].addEventListener('click', function() {
     scegliTema(nomeTema)
   });
   // 给当前选中的主题按钮添加高亮
   if (savedTheme === nomeTema) {
     el.classList.add('active');
   }
 }
 })();
 </script>
</footer>

原理说明 #

• localStorage是浏览器提供的本地存储API，存储的数据会永久保留（除非用户手动清除或通过代码删除），且同源页面之间可以共享。
• 每次用户切换主题时，我们把主题标识存入localStorage；每个页面加载时，先读取这个标识并应用对应的主题类，就能实现跨页面的主题持久化了。

内容的提问来源于stack exchange，提问作者Mohamed Soliman Hesham