tailwindcss/02-vite/src/main.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

/* Toggle button (or link) to change the theme */

const toggleButton = document.querySelector('#theme-toggle');

toggleButton.addEventListener('click', () => {
  // Toggle the class on the <html> tag
  document.documentElement.classList.toggle('dark');
  
  // Optional: Save preference to localStorage
  const isDark = document.documentElement.classList.contains('dark');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
});


/* Font size increase or decrease */

let currentSize = 1; // 1 rem is the baseline

function increaseFontSize() {
  if (currentSize < 1.5) { // Cap at 150%
    currentSize += 0.1;
    applyFontSize();
  }
}

function decreaseFontSize() {
  if (currentSize > 0.8) { // Set a minimum limit
    currentSize -= 0.1;
    applyFontSize();
  }
}

function applyFontSize() {
  document.documentElement.style.fontSize = currentSize * 100 + "%";
}