This topic contains 0 replies, has 1 voice, and was last updated by  Moderator 1 week, 3 days ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #34541

    Moderator
    Member

    add darkmod to your website with Darkmode.Js

    🌓 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 !

    Features

    1. Widget appears automatically
    2. Saving users choice
    3. Automatically shows Darkmode if the OS prefered theme is dark (if the browsers supports prefers-color-scheme)
    4. 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
    https://tradivegan.com (with custom label)
    https://what.toeat.in (without custom label)
    https://www.kanbanote.com (without the widget, once logged in)
    https://www.sandoche.com (with custom label)

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

    https://wordpress.org/plugins/blackout-darkmode-widget/
    https://wordpress.org/plugins/darkmode/

    📖 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
    npm install darkmode-js
    Then add the following javascript code:

    import Darkmode from ‘darkmode-js’;

    new Darkmode().showWidget();

    ⚙️ Options
    Here are the option availables:

    var options = {
      bottom: ’64px’, // default: ’32px’
      right: ‘unset’, // default: ’32px’
      left: ’32px’, // default: ‘unset’
      time: ‘0.5s’, // default: ‘0.3s’
      mixColor: ‘#fff’, // default: ‘#fff’
      backgroundColor: ‘#fff’,  // default: ‘#fff’
      buttonColorDark: ‘#100f2c’,  // default: ‘#100f2c’
      buttonColorLight: ‘#fff’, // default: ‘#fff’
      saveInCookies: false, // default: true,
      label: ‘🌓’, // default: ”
      autoMatchOsTheme: true // default: true
    }

    const darkmode = new Darkmode(options);
    darkmode.showWidget();

    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.

    const darkmode =  new Darkmode();
    darkmode.toggle();
    console.log(darkmode.isActivated()) // will return true
    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
    .darkmode–activated p, .darkmode–activated li {
      color: #000;
    }

    .button {
      isolation: isolate;
    }

    .darkmode–activated .logo {
      mix-blend-mode: difference;
    }
    😬
    Debug
    If it does not work you may have to add the following code, but this will invalidate the classes to override.

    .darkmode-layer, .darkmode-toggle {
      z-index: 500;
    }
    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.

    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

    read about the latest technology trends and learn about new technologies, methodologies, and best practices through shared knowledge.

    This website – a collection of modded apk game apps for Android, Iphone smartphones & News Phones. These materials are taken from free Internet sources and can only be used for educational purposes!
    You can use it again like sharing friends or on social media, or for reviewing youtube videos etc.,

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.