Dark theme as default?

[vipau]

Summary

Sorry if this has been asked already, but I could not find much about it.
Doks has a beautiful button to change the page to dark theme, and I love it.

I was wondering if it could be possible to have the page always load in dark mode by default, with the user having the option to select the light theme via the same button.

Please NOTE - I am not necessairly requesting these changes to be implemented in Doks if that is too complicated for the codebase, an explanation of how to achieve this in my own project will suffice.

Motivation

Dark theme is easier on the eyes, and just better to read documentation overall. Most websites are embracing it now and I think it would make for a great feature to have this on by default.

[h-enk]

Hi @paualberto, yes that is possible — see #64

I will add instructions to the documentation later.

[h-enk]

@paualberto, did you update the script?

Hi @mrdotkg! Doks remembers your theme choice by using the LocalStorage API. You can see it in action in two steps:

// assets/js/app.js

document.getElementById('mode').addEventListener('click', () => {
  document.body.classList.toggle('dark');

  // 1. Here we save it !
  localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
});

// 2. Here we retrieve it !
if (localStorage.getItem('theme') === 'dark') {
  document.body.classList.add('dark');
}

As you mentioned, this only works when starting out with the light theme. If you would like it to work the other way around, my solution was replacing step 2 with (this is just an example, you can work it your way just using that LocalStorage value):

// 2. Here we retrieve it !
const localTheme = localStorage.getItem('theme');

if (localTheme === 'dark')
  document.body.classList.add('dark');
else if (localTheme === 'light')
  document.body.classList.remove('dark');

Just note that if the user never switched the theme, the value in LocalStorage will be null/undefined (that's why I check if it's equal to either theme).

[vipau]

My assets/js/app.js was empty, is that normal?

Anyway, I tried adding the code with the edited step 2, and the theme switch button doesn't work at all now. Could you share the entire file, please?

[vipau]

I'm using the starter theme, not the child theme by the way

[vipau]

Tried to put it in layouts/partials/header/header.html as suggested in the thread but that doesn't change the situation, it goes back to dark

[vipau]

Solved, it was in assets/js/darkmode.js. thx