boopathikumar018 / docsify-darklight-theme Goto Github PK

Whenever I click darkmode toggle button, a new tab for git project opens. Maybe the reason for this is that toggle button is not properly aligned with github corner button.

Any way to remove github fork button or align toggle button ?

My pages is so longer, I hope have a button back to top. can you add a button on the right bottom,thank you!

Hello,

The problem is that when I set the option "onlyCover" to true then docsify is in an infinite render loop.

In my opinion the plugin tries to set the theme switcher button on the cover but on the HTML page of the cover there is no hook for it. But now your script tries to find the HTML tag and use the property "setAttribute". Here it needs a check for NULL.

A Screenshot from the error

The content from the specified file

window.$docsify.plugins=[].concat((e,t)=>{let o={siteFont:"PT Sans",defaultTheme:"dark",codeFontFamily:"Roboto Mono, Monaco, courier, monospace",bodyFontSize:"17px",dark:{accent:"#42b983",toogleBackground:"#ffffff",background:"#091a28",toogleImage:"url(https://cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/icons/sun.svg)"},light:{accent:"#42b983",toogleBackground:"#091a28",background:"#ffffff",toogleImage:"url(https://cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/icons/moon.svg)"}};if(t.config.hasOwnProperty("darklightTheme")){for(var[r,d]of Object.entries(t.config.darklightTheme))"light"!==r&&"dark"!==r&&"defaultTheme"!==r&&(o[r]=d);for(var[r,d]of Object.entries(o))"light"!==r&&"dark"!==r&&(o[r]=d,document.documentElement.style.setProperty("--"+r,d));if(t.config.darklightTheme.hasOwnProperty("dark"))for(var[r,d]of Object.entries(t.config.darklightTheme.dark))o.dark[r]=d;if(t.config.darklightTheme.hasOwnProperty("light"))for(var[r,d]of Object.entries(t.config.darklightTheme.light))o.light[r]=d}else for(var[r,d]of Object.entries(o))"light"!==r&&"dark"!==r&&(o[r]=d,document.documentElement.style.setProperty("--"+r,d));window.matchMedia("(prefers-color-scheme: dark)").matches?o.defaultTheme="dark":window.matchMedia("(prefers-color-scheme: light)").matches&&(o.defaultTheme="light");var i=e=>{if(document.getElementById("docsify-darklight-theme").setAttribute("data-link-title",e),document.getElementById("docsify-darklight-theme").click(),localStorage.setItem("DARK_LIGHT_THEME",e),o.defaultTheme=e,"light"==e)for(var[t,r]of Object.entries(o.light))document.documentElement.style.setProperty("--"+t,r);else if("dark"==e)for(var[t,r]of Object.entries(o.dark))document.documentElement.style.setProperty("--"+t,r)};e.afterEach((function(e,t){t(e='<div id="docsify-darklight-theme"><p>.</p></div>'+e)})),e.doneEach((function(){let e=localStorage.getItem("DARK_LIGHT_THEME");"light"==e||"dark"==e?(o.defaultTheme=e,i(o.defaultTheme)):i(o.defaultTheme),document.getElementById("docsify-darklight-theme").addEventListener("click",(function(){"light"===o.defaultTheme?i("dark"):i("light")}))}))},window.$docsify.plugins);

I found that there’s an odd bug with docsify-darklight-theme plugin, whether it’s used with or without docsify-themeable.

If you setup a raw docsify project:

npx docsify init ./test-docs

And edit docsify’s options in index.html:

window.$docsify = {
  loadSidebar: true,
  autoHeader: true
}

Then create the following _sidebar.md:

- [Title 1](/autotitle.md)
- [Title 2](/customtitle.md)

With the following pages:

autotitle.md

This page has an auto-generated title.

customtitle.md

# My custom title

This page has a custom title.

When loaded, the autotitle.md will have an auto-generated title matching its link text from _sidebar.md.

When loaded, the customtitle.md will keep its custom title.

However, after docsify-darklight-theme setup, the customtitle.md will have two main titles:

• the one from the sidebar
• the one from its content

I find this behavior very strange and can’t understand where it’s coming from… I heavily rely on the default behavior in order to have short links in my sidebar with more detailed page titles.

For now, I will disable the autoHeader feature and manually provide page titles, but I’d really like to use the default behavior with docsify-darklight-theme… If you could look into this, it would be greatly appreciated!

Thanks 🙂

Can we add two different sidebar images, one for light and another for dark theme when we switch the theme.

the plugin is working flawlessly most of the time, but once in a every couple of times the plugin is messing the other plugins that i am using like tab. so they will stop working completely. but this plugin works fine

Hello,
This is a very useful plugin, thanks for that.
The switch icon (moon / sun) is not refreshed when using Safari (mac Os Big Sur, latest version : Version 14.1.2 16611.3.10.1.3 )
Here is a small video to be more clear;

It is confirmed on you website https://docsify-darklight-theme.boopathikumar.me/#/
and also on mine, wich is using docsify-themeable

Tx

Attached video

Hello. I'm currently using docsify with mermaid.

When turning dark mode on, mermaid diagrams are not readable since they get completely dark

Is there a way to tell the theme to skip certain elements so the diagram color doesn't get changed?

can we add a config field to follow the system light/dark mode?

Many users set their light/dark mode theme in their operating system.

By using prefers-color-scheme, we can set the default site theme to match with the expected theme.

Windows 10/11, macOS, Android, iOS, and many Linux distributions all support this functionality

the default scroll bar is so wide, how to hide it or set the with is 0

especial in dark mode, the scroll bar is ugly

Docsify-Themeable mobile half of the toggle button is not visible. Can you fix it?

Here is the screenshots.

Is it possible to load different image in markdown based on dark/light mode ? (ie. one logo for light mode, another logo for dark mode) ?

I know its two different plugins here but I guess the mermaid plugin is very commonly used as well as yours.

If you don't ask, you don't get :)

I've been trying to get the Redesigned search box to work but I can only see the old search box.
I wonder if I have any conflicts in the css below? Perhaps there's something I need to add in <script></script>?

<html lang="en">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
   <meta name="description" content="">
   <title>UN*Xity</title>

   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-darklight-theme@3/dist/docsify-themeable/style.min.css" type="text/css">

   <!-- docsify-themeable styles-->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css" title="light">
   <link rel="stylesheet alternative" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css" title="dark">

   <!-- Themes (light + dark) -->
   <!-- <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css"> -->
   <!-- <link rel="stylesheet" media="(prefers-color-scheme: light)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"> -->

   <!-- Custom Styles -->
   <style>
     :root {
       /* --theme-hue: 325; */
     }
   </style>
</head>
<body>
   <div id="app"></div>

   <script>
     // Docsify Configuration
     window.$docsify = {
        name: 'UN*Xity',
        loadSidebar: true,
        coverpage: true,
        coverpage: '_coverpage.md',
        onlyCover: false
     };
   </script>

   <!-- Required -->
   <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
   <!-- <script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script> -->

   <!-- Plugins -->
   <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/zoom-image.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

  <script type="module">
    import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
    mermaid.initialize({ startOnLoad: true });
    window.mermaid = mermaid;
  </script>
  <script src="//unpkg.com/[email protected]/dist/docsify-mermaid.js"></script>


<script
    src="//cdn.jsdelivr.net/npm/docsify-darklight-theme@3/dist/docsify-themeable/main.min.js"
    type="text/javascript">
</script>

<script
    src="//cdn.jsdelivr.net/npm/docsify-darklight-theme@3/dist/docsify-themeable/index.min.js"
    type="text/javascript">
</script>


</body>
</html>

To reproduce do a hard refresh or continuously refresh for >2s.
This is caused since we cannot set the CSS attributes based on the theme (stored in local storage) before the DOM being rendered. Have attached a sample video for reference.

In docsify-themeable this has been handled and they can set the previously stored theme. Let me know if you have any possible solution for this issue am happy to contribute as well. Thanks.

The current method of installation requires that we setup a package.json and install this package, it would be better to setup npx to do the codegen instead.

the chinese font size is bigger, how to set the font size?
please look here: https://sweeter.io/#/sweetest/

Thank you for the theme. I want to add the icon to the navbar, so I tried moving it as shown below. However it gets recreated somehow in the original position, with the result that there are now two icons, and neither can trigger.

Is there any way to move the icon safely?

         hook.doneEach(function() {
			const darkLightLink = document.querySelector("#docsify-darklight-theme");
			const fred = document.getElementsByClassName("app-nav")[0].appendChild(darkLightLink); //
			darkLightLink.style.display = 'inline-block';
			darkLightLink.style.position = 'relative';
			darkLightLink.style.top = '15px';
          });

Right now the icons are fetched from jsdeliver, there doesn't seem to be an option to overide them. Could the switch just change its class so that custom css can be applied?

It does not seem to change the colour of docsify with cover pages enabled:

https://docx.js.org/#/