Comutator simplu pentru tema întunecată cu Vue.JS

  • 1 minute de citit
  • 4 exemple de cod
  • 2 imagini

Disponibil și în English

Salut,

În acest articol îți arăt cât de repede poți adăuga un comutator pentru tema întunecată în aplicația ta Vue.JS.

Vom porni de la o aplicație goală. Apoi vom crea un fișier CSS pentru tema întunecată, pe care îl vom salva în public/css/darktheme.css.

Așa arată aplicația fără niciun CSS.

Acum vom pune următorul cod în darktheme.css:

body {    background-color: #2c3e50;}h1,h2,h3,h4,h5,h6,p {    color: #42b983;}

Putem testa tema adăugând următoarea linie în ` ` din public/index.html

    <link rel="stylesheet" href="<%= BASE_URL %>css/darktheme.css">

Acum hai să o facem interactivă!

În src/App.vue vom adăuga un buton și următoarele metode:

    <button @click="darkThemeSwitch">Switch Theme</button>
  methods: {    _addDarkTheme() {      let darkThemeLinkEl = document.createElement("link");      darkThemeLinkEl.setAttribute("rel", "stylesheet");      darkThemeLinkEl.setAttribute("href", "/css/darktheme.css");      darkThemeLinkEl.setAttribute("id", "dark-theme-style");      let docHead = document.querySelector("head");      docHead.append(darkThemeLinkEl);    },    _removeDarkTheme() {      let darkThemeLinkEl = document.querySelector("#dark-theme-style");      let parentNode = darkThemeLinkEl.parentNode;      parentNode.removeChild(darkThemeLinkEl);    },    darkThemeSwitch() {      let darkThemeLinkEl = document.querySelector("#dark-theme-style");      if (!darkThemeLinkEl) {        this._addDarkTheme()      } else {        this._removeDarkTheme()      }    }

De fiecare dată când dai click pe butonul Switch Theme, tema întunecată ar trebui să se comute între activ și inactiv.

Aceasta este o metodă rapidă și simplă de a adăuga un comutator pentru tema întunecată în aplicația ta Vue.JS. Poți merge mai departe implementând un serviciu pentru teme și salvarea preferinței.

Mulțumesc că ai citit!