https://quarkus.io/assets/javascript/colormode.js

1function setTheme() {
2  const storedTheme = localStorage.getItem('color-theme') || 'light';
3  document.documentElement.dataset.storedTheme = storedTheme;
4  let theme_color = "#fafafa";
5  if (storedTheme === 'dark' || (storedTheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
6    document.documentElement.classList.add('dark');
7    theme_color = "#1e1e1e";
8  } else {
9    document.documentElement.classList.remove('dark');
10  }
11  return theme_color;
12}
13function toggleTheme() {
14  const themeOrder = ['light', 'dark', 'system'];
15  const storedTheme = localStorage.getItem('color-theme') || 'system';
16  const newTheme = themeOrder[(themeOrder.indexOf(storedTheme) + 1) % themeOrder.length];
17  localStorage.setItem('color-theme', newTheme);
18  document.querySelector('meta[name="theme-color"]').content = setTheme();
19  updateButton();
20}
21function updateButton() {
22  const button = document.getElementById('theme-toggle');
23  const storedTheme = localStorage.getItem('color-theme') || 'system';
24  const themeTitles = {
25    'dark': 'Color scheme: dark; next: system preferences',
26    'light': 'Color scheme: light; next: dark',
27    'system': 'Color scheme: system preferences; next: light'
28  };
29  button.setAttribute('aria-label', storedTheme);
30  button.setAttribute('title', themeTitles[storedTheme]);
31  return button;
32}
33const meta = document.createElement('meta');
34meta.name = "theme-color";
35meta.content = setTheme();
36document.head.appendChild(meta);
37window.onload = function() {
38  const button = updateButton();
39  button.addEventListener('click', toggleTheme);
40};