How to add multiple theme support in navbar?

[Neutree]

Nice doc tool !!

I'm trying to make my site to support multiple theme support, like this:

So I add script to _nvbar.md, but the script seems not work!

Any one knows how to handle it? Thanks very much

I Add the code below to _navbar.md, but the script seems can not execute!!

<div class="demo-theme-preview">
  <a data-theme="vue">vue.css</a>
  <a data-theme="dark">dark.css</a>
</div>

<style>
  .demo-theme-preview a {
    padding-right: 10px;
  }

  .demo-theme-preview a:hover {
    text-decoration: underline;
    cursor: pointer;
  }
</style>

<script>
  var preview = Docsify.dom.find('.demo-theme-preview');
  var themes = Docsify.dom.findAll('[rel="stylesheet"]');

  preview.onclick = function (e) {
    var title = e.target.getAttribute('data-theme')

    themes.forEach(function (theme) {
      
      if(theme.tilte != '' && title != null && title != ''){
        theme.disabled = theme.title != title
      }
    });
  };
</script>

[stilleshan]

I have the same problem.

Looking forward to someone to help

[albertoalonso]

Same problem...

[Drovosek01]

U also decided to make switching color themes through the navigation bar and also faced the problem that the code in the "script" tag is not executed if this code is located in _navbar.md or _sidebar.md

The only solution I found in this situation is to add a "script" tag with code to markdown content files, such as a file README.md

- **Translations**
    - [:ru: Russian](/ru-RU/)
    - [:us: English](/en-US/)

<li>
  <p><strong>Color themes</strong></p>
  <ul class="theme-preview">
    <li>
      <a data-theme="dark"><img class="emoji" src="https://github.githubassets.com/images/icons/emoji/new_moon_with_face.png" alt="new_moon_with_face"> Dark aaa</a>
    </li>
    <li>
      <a data-theme="vue"><img class="emoji" src="https://github.githubassets.com/images/icons/emoji/sun_with_face.png" alt="sun_with_face"> Light</a>
    </li>
    <li>
      <a data-theme="pure"><img class="emoji" src="https://github.githubassets.com/images/icons/emoji/art.png" alt="art"> Simple</a>
    </li>
  </ul>
</li>

<style>
  .theme-preview a:hover {
    cursor: pointer;
    text-decoration: underline;
  }

  .theme-preview li a {
	 color: red;
  }
</style>

<script>
  var preview = Docsify.dom.find('.theme-preview');
  var themes = Docsify.dom.findAll('[rel="stylesheet"]');

  preview.onclick = function (e) {
	debugger;
    var title = e.target.getAttribute('data-theme')

    themes.forEach(function (theme) {
      theme.disabled = theme.title !== title
    });
  };
</script>

[Drovosek01]

Hey. I found a new way to implement theme change using navbar. I used to add a script to change the theme in every markdown file, but now I can add 1 script to index.html file and everything will work, and add a script tag to each. md file is not necessary.

Here is this script:

<script>
  window.onload = function() {
    var preview = Docsify.dom.find('.theme-preview');
    var themes = Docsify.dom.findAll('[rel="stylesheet"]');

    preview.onclick = function(e) {
      var title = e.target.getAttribute('data-theme');

      themes.forEach(function(theme) {
        theme.disabled = theme.title !== title;
      });
    };
  };
</script>

Here is the repository where I apply this:
https://github.com/Drovosek01/how-to-be-god-of-mirror-links

[spiedeman]

Hey. I found a new way to implement theme change using navbar. I used to add a script to change the theme in every markdown file, but now I can add 1 script to index.html file and everything will work, and add a script tag to each. md file is not necessary.

Here is this script:

<script>
  window.onload = function() {
    var preview = Docsify.dom.find('.theme-preview');
    var themes = Docsify.dom.findAll('[rel="stylesheet"]');

    preview.onclick = function(e) {
      var title = e.target.getAttribute('data-theme');

      themes.forEach(function(theme) {
        theme.disabled = theme.title !== title;
      });
    };
  };
</script>

Here is the repository where I apply this:
https://github.com/Drovosek01/how-to-be-god-of-mirror-links

I've cloned your repo to my laptop and tested. It didn't work.

[Drovosek01]

Hey. I found a new way to implement theme change using navbar. I used to add a script to change the theme in every markdown file, but now I can add 1 script to index.html file and everything will work, and add a script tag to each. md file is not necessary.
Here is this script:

<script>
  window.onload = function() {
    var preview = Docsify.dom.find('.theme-preview');
    var themes = Docsify.dom.findAll('[rel="stylesheet"]');

    preview.onclick = function(e) {
      var title = e.target.getAttribute('data-theme');

      themes.forEach(function(theme) {
        theme.disabled = theme.title !== title;
      });
    };
  };
</script>

Here is the repository where I apply this:
https://github.com/Drovosek01/how-to-be-god-of-mirror-links

I've cloned your repo to my laptop and tested. It didn't work.

Yes, my method has a problem - it doesn't work if you open the documentation link for the first time after starting the browser, but if you reload the page and try to switch the theme to "navbar" again, then everything should work. I still have no idea how to solve this problem.

[spiedeman]

I found a way to modify the DOM for each page generated from *.md file scriptly by using the hook function. And I also added a switch button on every page like iOS. But it’s not an elegant solution yet. I still have no idea to solve the problems that I came across cause I’m new to a javascriptor.

…

2019年10月21日 15:41，Drovosek01 ***@***.***> 写道： https://github.com/Drovosek01/how-to-be-god-of-mirror-links <https://github.com/Drovosek01/how-to-be-god-of-mirror-links>

[syedsimanta03]

theme swicther toggle button needed

[anikethsaha]

I guess creating a plugin for this might make it work.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.