javascript 使用PrimeVue切换主题

3hvapo4f 于 2024-01-05 发布在 Java

关注(0)|答案(1)|浏览(149)

我想改变的主题使用Prime Vue与出usnig <link id="lara-light-indigo" rel="stylesheet" href="/themes/lara-light-indigo/theme.css">在index.html文件
我正在运行我的主题使用import "primevue/resources/themes/lara-light-indigo/theme.css";在main.js文件我想用这个来改变主题在Topbar.vue页面

import { usePrimeVue } from 'primevue/config';

  const PrimeVue = usePrimeVue();
let currentTheme = ref(null);
if ( localStorage.getItem('theme') != null) {
       currentTheme.value = localStorage.getItem('theme');
       toggleThemeDark();
    }else {
        localStorage.setItem('theme', 'lara-light-indigo');
        currentTheme.value = 'lara-light-indigo'
        toggleThemeDark();
    }
function toggleTheme () {
    
    const newTheme = localStorage.getItem('theme') === 'lara-light-indigo' ? 'lara-dark-indigo' : 'lara-light-indigo';
  PrimeVue.changeTheme(localStorage.getItem('theme'), newTheme, 'lara-light-indigo', () => {
    currentTheme = newTheme;
    document.querySelector('.moon').classList.toggle('sun');
   
  });   
  localStorage.setItem('theme', newTheme);

};

function toggleThemeDark () {
    if(currentTheme.value == 'lara-dark-indigo'){
        PrimeVue.changeTheme('lara-light-indigo', 'lara-dark-indigo', 'lara-light-indigo', () => {
    document.querySelector('.moon');
   
  }); 
    }else{
        PrimeVue.changeTheme('lara-dark-indigo', 'lara-light-indigo', 'lara-light-indigo', () => {
            document.querySelector('.dark');
    document.querySelector('.moon').classList.toggle('sun');
   
  }); 
    }
};
<div class="dark" @click="toggleTheme">
        <div class="tdnn" :class="{ 'day': currentTheme === 'lara-light-indigo' }">
            <div class="moon" :class="{ 'moon': currentTheme === 'lara-dark-indigo' }"></div>
        </div>
    </div>

字符串
我使用这个代码，而我使用的链接标记在index.html和工作良好，但我需要做一些不同的，所以我更新的总理vue或类似的东西，没有必要去index.html和改变的东西

JavaScript

来源：https://stackoverflow.com/questions/77746549/theme-switching-using-primevue

1条答案

按热度按时间

qnakjoqk1#

你可以动态地改变主题而不使用index.html文件中的标签。

import { usePrimeVue } from 'primevue/config';
import { ref } from 'vue';

export default {
  setup() {
    const PrimeVue = usePrimeVue();
    const currentTheme = ref(null);

    if (localStorage.getItem('theme') != null) {
      currentTheme.value = localStorage.getItem('theme');
      toggleThemeDark();
    } else {
      localStorage.setItem('theme', 'lara-light-indigo');
      currentTheme.value = 'lara-light-indigo';
      toggleThemeDark();
    }

    function toggleTheme() {
      const newTheme =
        localStorage.getItem('theme') === 'lara-light-indigo'
          ? 'lara-dark-indigo'
          : 'lara-light-indigo';

      PrimeVue.changeTheme(
        localStorage.getItem('theme'),
        newTheme,
        'lara-light-indigo',
        () => {
          currentTheme.value = newTheme;
          document.querySelector('.moon').classList.toggle('sun');
        }
      );

      localStorage.setItem('theme', newTheme);
    }

    function toggleThemeDark() {
      if (currentTheme.value === 'lara-dark-indigo') {
        PrimeVue.changeTheme(
          'lara-light-indigo',
          'lara-dark-indigo',
          'lara-light-indigo',
          () => {
            document.querySelector('.moon');
          }
        );
      } else {
        PrimeVue.changeTheme(
          'lara-dark-indigo',
          'lara-light-indigo',
          'lara-light-indigo',
          () => {
            document.querySelector('.dark');
            document.querySelector('.moon').classList.toggle('sun');
          }
        );
      }
    }

    return {
      currentTheme,
      toggleTheme,
    };
  },
};

字符串

赞(0）回复(0）举报 2024-01-05

我来回答

javascript 使用PrimeVue切换主题

1条答案

相关问题

热门标签

最新问答