Kanbanote



🌓 Add a dark-mode / night-mode to your website in a few seconds

This library uses the css mix-blend-mode in order to bring Dark-mode to any of your websites.Just copy paste the snippet and you will get a widget to turn on and off the dark-mode. You can also use it without the widget programmatically. The plugin is lightweight, built in VanillaJS.It also uses localstorage by default so your last setting will be remembered !

🌓 Add darkmode / nightmode to your website in a few seconds. Old Hangouts Chrome Extension - Revert back to the old hangouts extension. (Chrome Extensions, Productivity, and Messaging) Read the opinion of 10 influencers.

I have been inspired by this article: blank'>https://dev.to/wgao19/night-mode-with-mix-blend-mode-difference-23lm

Features

  • Widget appears automatically
  • Saving users choice
  • Automatically shows Darkmode if the OS preferred theme is dark (if the browsers supports prefers-color-scheme)
  • Can be used programmatically without widget

✨ Demo

Check out the demo in these websites (there is a button on the bottom, right hand corner, just press it!):
  • On this website
  • blank'>https://tradivegan.com (with custom label)
  • blank'>https://what.toeat.in (without custom label)
  • blank'>https://www.kanbanote.com (without the widget, once logged in)
  • blank'>https://www.sandoche.com (with custom label)
  • blank'>https://pilab.dev (without the widget, with a custom toggle button)

Wordpress plugins

If you are using Wordpress you may want have a look to these plugins based on Darkmode.js:

Nuxt.js module

If you are using Nuxt.js there is a module for Darkmode.js:

📖 How to use

Darkmode.js is very easy to use, just copy paste the following code or use the npm package.

🚀 Easy way (using the JSDelivr CDN)

Just add this code to your html page:

📦 Using NPM

Then add the following javascript code:

⚙️ Options

Here are the option availables:

▶️ Methods

If you don't want to show the widget and enable/disable Darkmode programatically you can use the method toggle(). You can also check if the darkmode is activated with the method isActivated(). See them in action in the following example.

Override style

  • A CSS class darkmode--activated is added to the body tag when the darkmode is activated. You can take advantage of it to override the style and have a custom style
  • Use the class darkmode-ignore where you don't want to apply darkmode
  • You can also add this style: isolation: isolate; in your css, this will also ignore the darkmode.
  • It is also possible to revert the dark-mode with this style mix-blend-mode: difference;

Examples

Debug

If it does not work you may have to add the following code, but this will invalidate the classes to override.

Browser compatibility

This library uses the CSS mix-blend-mode: difference; in order to provide the Dark Mode.It may not be compatible with all the browsers. Therefore the widget has been hidden in Internet Explorer and Edge.This library also uses prefers-color-scheme: dark to automatically enable the Dark Mode if the OS prefered theme is dark.

Kanban Notebook

Check the compatibility here:
  • https://caniuse.com/#search=mix-blend-mode
  • https://caniuse.com/#search=prefers-color-scheme (to activate Dark Mode automatically)

Development

  • yarn build or npm run build - produces production version of your library under the lib folder
  • yarn dev or npm run dev - produces development version of your library and runs a watcher
  • yarn test or npm run test - it runs the tests 😃
  • yarn test:watch or npm run test:watch - same as above but in a watch mode

⭐️ Show your support

Please ⭐️ this repository if this project helped you!

🍺 Buy me a beer

If you like this project, feel free to donate:
  • Paypal: blank'>https://www.paypal.me/kanbanote
  • Bitcoin: 19JiNZ1LkMaz57tewqJaTg2hQWH4RgW4Yp
  • Ethereum: 0xded81fa4624e05339924355fe3504ba9587d5419
  • Monero: 43jqzMquW2q989UKSrB2YbeffhmJhbYb2Yxu289bv7pLRh4xVgMKj5yTd52iL6x1dvCYs9ERg5biHYxMjGkpSTs6S2jMyJn
  • Motive: MOTIV-25T5-SD65-V7LJ-BBWRD (Get Motive Now: blank'>https://motive.network)

Meet Macro Debugger and Object Browser

Macro Editor now allows running macros step by step under the debugger via the or buttons. This will switch the editor into the debugger mode and will display the next statement with a yellow background, activate the Object Browser with local variables and show the debugger buttons at the bottom:

Once in the debugger mode, you can step through the macro and see the local variables in the Object Browser. Following buttons appear in the debugger mode:

  • Continue (F5): Continue execution until the next breakpoint
  • Step Over (F10): Execute the next statement and then break
  • Stop (Shift+F5): Stop debugging and go back to the editor
  • Restart: Restart debugging and break at the first statement
  • Toggle Breakpoint (F9): Sets or removes a breakpoint at the selected statement

Breakpoints

Kanbanote

You can set a breakpoint on a statement using Toggle Breakpoint button or theF9 key. This works both in the editor and in the debugger. The statements with abreakpoint will show with a maroon background and the debugger will stop when it hits one of the breakpoints.

Object Browser

Macro Debugger automatically displays the Object Browser on the right. Object Browser allowsbrowsing OneNote hierarchy under Current Page, Section, Section Group, Notebook and under all notebooks.This way you can look into how the objects and their properties are stored in OneNote. This is also useful while editing a macro and can be activated using button. Object Browserdisplays local variables currently in use in the macro under Locals section, allowing youto see the types and values of them.

Licensing

Kanbanote

These additional developer tools are available via Onetastic Developer License. You can find more details here.

Demonstration

Kanban Note

Watch the short video below to learn more about how to use these tools: