Theme Switching Button #1223

Teddy-van-Jerry · 2023-04-14T16:53:44Z

Is your feature request related to a problem? Please describe.
I hope to implement a theme-switching button so that users can choose a dark or light theme. Currently, the option provided by JTD only allows setting the site to be either dark or light.

Describe the solution you'd like
The theme can be changed by JavaScript:

There is a button (possibly) next to the aux link button;
When clicking the button, the theme can change.

The current solution:

Add Button in header_custom.html: (I have noticed that this location is not very mobile-friendly.)

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="svg-sun" viewBox="0 0 24 24">
    <title>Light mode</title>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather-sun">
      <circle cx="12" cy="12" r="5"></circle>
      <line x1="12" y1="1" x2="12" y2="3"></line>
      <line x1="12" y1="21" x2="12" y2="23"></line>
      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
      <line x1="1" y1="12" x2="3" y2="12"></line>
      <line x1="21" y1="12" x2="23" y2="12"></line>
      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
    </svg>
  </symbol>
  <symbol id="svg-moon" viewBox="0 0 24 24">
    <title>Dark mode</title>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon-tabler-moon">
      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
      <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
    </svg>
  </symbol>
</svg>

<a class="site-button" id="theme-toggle"><svg width='18px'><use href="#svg-sun"></use></svg></a>

Add related JS scripts
Overriding head.html:

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

  <script>
    const theme = localStorage.getItem('theme') || 'light';
    document.documentElement.setAttribute('data-theme', theme);
  </script>
  <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}">

...

</head>

Add scripts at the bottom of body, so I override _layouts/default.html to have the following script:

  <script>
    const userPrefers = getComputedStyle(document.documentElement).getPropertyValue('content'); 
    const toggleDarkMode = document.getElementById("theme-toggle");
  
    if (theme === "dark") {
      setToggleTheme('dark');
    } else if (theme === "light") {
      setToggleTheme('light');
    } else if (userPrefers === "dark") {
      document.documentElement.setAttribute('data-theme', 'dark');
      window.localStorage.setItem('theme', 'dark');
      setToggleTheme('dark');
    } else {
      document.documentElement.setAttribute('data-theme', 'light');
      window.localStorage.setItem('theme', 'light');
      setToggleTheme('light');
    }
    
    jtd.addEvent(toggleDarkMode, 'click', function(){
      const currentTheme = jtd.getTheme();
      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  
      jtd.setTheme(newTheme);
      localStorage.setItem('theme', newTheme);
      setToggleTheme(newTheme);
    });
  
    function setToggleTheme(theme) {
      jtd.setTheme(theme);
      if (theme === 'dark') {
        toggleDarkMode.innerHTML = `<svg width='18px'><use href="#svg-moon"></use></svg>`;
      } else {
        toggleDarkMode.innerHTML = `<svg width='18px'><use href="#svg-sun"></use></svg>`;
      }
    }
  </script>

However, there is an issue that in the dark theme, it flickers on refresh. I am not experienced in this, and the solution here at StackOverflow cannot solve the issue. I am not sure what is wrong, so can it be related to jtd.setTheme(theme); so that the theme is applied only after the whole page loads?

Describe alternatives you've considered
I am currently implementing it as mentioned above, overriding _includes files. But the main idea is the same.

Additional context
The current site is live at mmcesim.org ~~(with the flickering issue)~~. The repo is mmcesim/mmcesim.org.

The text was updated successfully, but these errors were encountered:

Still has issue in just-the-docs/just-the-docs#1223.

Teddy-van-Jerry · 2023-04-15T06:52:53Z

Today, after some other attempts, I think there might be one solution.

If we can put dark and light themes under the same css file, we can use html attributes or classes to change the theme. For example, we can base the switchable theme on the light theme, whenever html has class dark-mode, the CSS style for html.dark-mode can work now.

Related: just-the-docs/just-the-docs#1223

Teddy-van-Jerry · 2023-04-15T09:41:11Z

Finally, I implemented the theme change with CSS and JS. Maybe this feature can be added to JTD with some changes.

Basically, in the overrided _includes/head.html, the first lines are

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

  <script>
    if (localStorage.getItem('theme') === 'dark') document.documentElement.classList.add('dark-mode');
  </script>
  <script type="text/javascript" src="{{ '/assets/js/theme-switch.js' | relative_url }}"></script>
  <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-switchable.css' | relative_url }}">

...

The theme-switch.js is

window.addEventListener("DOMContentLoaded", function() {
  const toggleDarkMode = document.getElementById("theme-toggle");

  if (localStorage.getItem('theme') === 'dark') {
    setTheme('dark');
  } else {
    setTheme('light');
  }

  jtd.addEvent(toggleDarkMode, 'click', function(){
    const currentTheme = getTheme();
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

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

  function getTheme() {
    return document.documentElement.classList.contains('dark-mode') ? 'dark' : 'light';
  }

  function setTheme(theme) {
    if (theme === 'dark') {
      toggleDarkMode.innerHTML = `<svg width='18px' height='18px'><use href="#svg-moon"></use></svg>`;
      document.documentElement.classList.add('dark-mode');
      document.documentElement.classList.remove('light-mode');
    } else {
      toggleDarkMode.innerHTML = `<svg width='18px' height='18px'><use href="#svg-sun"></use></svg>`;
      document.documentElement.classList.add('light-mode');
      document.documentElement.classList.remove('dark-mode');
    }
  }
});

Finally, I combine the light.css with dark.css, by adding html.dark-mode to dark theme settings. (I tried implementing this in SCSS, but I did not figure out an appropriate way.)

Site live at: https://mmcesim.org

Light Theme

Dark Theme

stefanintech · 2023-04-18T04:40:50Z

Loving the dark theme! @Teddy-van-Jerry 🔥

Teddy-van-Jerry · 2023-04-18T04:45:45Z

Loving the dark theme! @Teddy-van-Jerry 🔥

Thanks! The dark theme is already provided in JTD and can be configured in _config.yml. What I did here is to make the dark and light theme switchable dynamically via a button :-)

mattxwang · 2023-04-20T05:40:13Z

Hi @Teddy-van-Jerry, thanks for opening an issue! This is one of our most requested features, and there's a handful of (stale) PRs that have tried to implement this in some way. I'd be happy to review a PR with your proposed solution and work with you to merge it upstream!

(I am alright implementing a toggle and automatic theme switch in piecemeal, rather than all at once)

Related issues and PRs:

most recent attempt: Implement toggle color scheme, automatic theme mode #1086, [VARIANT] Implement toggle color scheme, automatic theme mode #1099
related: Dark mode toggle #302, feat: support automatic selectable dark theme #560, add support for 'prefers-color-scheme' save our eyes @ night #858
original issue: Support system-/browser-level dark mode #234

Joli-ta · 2023-06-23T19:50:30Z

Hi @Teddy-van-Jerry , this is a beautiful implementation. One thing I would suggest is reversing the symbols: logically, and how others have it implemented, if I am on a light theme and want to switch to dark, I should click on a moon icon. And vice versa. How about we stay consistent and logical?

Example: https://al-folio.github.io

The-Epic · 2023-07-27T04:11:28Z

How could i add this to my site but using the default light and dark modes?

Teddy-van-Jerry · 2023-07-27T04:19:13Z

Sorry guys, I am busy with some other research projects recently and do not have enough time to look into this carefully. Well, I also want to use the system's default, and it can be done with some minor modifications to look into the system settings. However, my employed method in this issue is not decent enough. Actually, a better way is to use CSS variables, as in many projects. To achieve that, we need to make a bunch of modifications to the source. I am not sure if there is a better way with SASS as in the current project, but my previous search told me that it can be very difficult.

Teddy-van-Jerry added the enhancement label Apr 14, 2023

Teddy-van-Jerry added a commit to mmcesim/mmcesim.org that referenced this issue Apr 14, 2023

Minor Change

47b9861

Still has issue in just-the-docs/just-the-docs#1223.

Teddy-van-Jerry added a commit to mmcesim/mmcesim.org that referenced this issue Apr 15, 2023

Fix Theme Chaning with Pure CSS and JS

2de7ec9

Related: just-the-docs/just-the-docs#1223

mattxwang added the status: ready to implement Issues that can be actively worked on, and need an implementation! label Apr 20, 2023

maks-oleksyuk mentioned this issue May 11, 2023

Standard white background and black text? selwynpolit/d9book#58

Closed

samcunliffe mentioned this issue Mar 7, 2024

Dark mode. UCL-ARC/python-tooling#314

Merged

mgmegive mentioned this issue Mar 31, 2024

adds light dark toggle to nav footer #1446

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Theme Switching Button #1223

Theme Switching Button #1223

Teddy-van-Jerry commented Apr 14, 2023 •

edited

Teddy-van-Jerry commented Apr 15, 2023

Teddy-van-Jerry commented Apr 15, 2023 •

edited

stefanintech commented Apr 18, 2023

Teddy-van-Jerry commented Apr 18, 2023

mattxwang commented Apr 20, 2023

Joli-ta commented Jun 23, 2023 •

edited

The-Epic commented Jul 27, 2023

Teddy-van-Jerry commented Jul 27, 2023

Theme Switching Button #1223

Theme Switching Button #1223

Comments

Teddy-van-Jerry commented Apr 14, 2023 • edited

Teddy-van-Jerry commented Apr 15, 2023

Teddy-van-Jerry commented Apr 15, 2023 • edited

stefanintech commented Apr 18, 2023

Teddy-van-Jerry commented Apr 18, 2023

mattxwang commented Apr 20, 2023

Joli-ta commented Jun 23, 2023 • edited

The-Epic commented Jul 27, 2023

Teddy-van-Jerry commented Jul 27, 2023

Teddy-van-Jerry commented Apr 14, 2023 •

edited

Teddy-van-Jerry commented Apr 15, 2023 •

edited

Joli-ta commented Jun 23, 2023 •

edited