sandoche / darkmode.js Goto Github PK

View Code? Open in Web Editor NEW

2.7K 31.0 173.0 734 KB

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

Home Page: https://darkmodejs.learn.uno

License: MIT License

JavaScript 75.80% HTML 24.20%

darkmode npm npm-package npm-module dark-theme dark nightmode vanilla-js widget

darkmode.js's People

Contributors

Stargazers

Watchers

Forkers

hellopixely soumsps manudequevedo bloqbuilt atulcodex cyberwani uzitech feelscoder git2358 hermanya maacpiash y4rr chengguangnan rsempere s1natra cwonrails davidcabrera01 mohammedbakr44 ismiyati fuxun2008 daodaoliang brucewu16899 chinayuan shantanuuchak tantv thomas-programmierer ipublicis erreur32 nullnotfound uxcoffee kkcode alvarlaigna sarpay mestrellar28 junaidashraf1 zilions bansicloud d8vjork davedele the-cc-dev brydzu smilefounder jkalio52 ryanza lhempire integratepress billyyyyy3320 sara97oheda naveenda cybernetics sss0987 gentoos163 dinour kkosin remcofy dmzstudio steadyhua ppppcss3 m415 tmbv93 hello-pixely mmjanloo scottpeterman jeremehancock yeffly itxchandan kitaiv tonycletus zevfung melodyjerry prasenjitghose36 jhingun1 ufukcam speccy-rom infatuation-psa edsonjorgef1 vavilon nimita311 mfrank2016 p44v9n melanyss dragon8github sringly thecoderraman rakshitmaggon princeahmed stafdehat crazytaxii gitshujian cyyh3 finedesign realmonkeys paloranta mustafa-coder mossawir abhiprojectz antoniopezzella patriciamayo ideas-design ailumaodeyu

darkmode.js's Issues

Highlighting Color Changes

Is it possible to make the text highlight color not change color in dark mode? If not, is this a feature that could be considered.

Exclude emojis when inverting color

How to make the background picture instead of solid color？

Please teach me how to make the background of the website a picture rather than a solid color.

Error "Identifier 'darkmode' has already been declared" appears in the console

Hi @sandoche :
Thank you very much for Darkmode.js.✔
How exciting it is！I configured it on my personal website.
It adds a lot of fun to the page, and it is very useful at night.❤

But there is currently a problem that bothers me. 😦
The following is a description of the problem.

Code

My code is written like this:

var options = {
  bottom: '64px', // default: '32px'
  right: '32px', // default: '32px'
  left: 'unset', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: 'white', // default: '#fff'
  backgroundColor: '#dedede', // default: '#fff'
  buttonColorDark: '#212121', // default: '#100f2c'
  buttonColorLight: '#dedede', // default: '#fff'
  saveInCookies: true, // default: true,
  label: nightAndDaySvg, // default: ''
  autoMatchOsTheme: true // default: true
}

// Set the default value of darkmode
if (window.localStorage.getItem('darkmode') == null) {
  window.localStorage.setItem('darkmode', 'true');
}

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

Reproduce👻

This error can be reproduced at here.This is a static page.

Add the ability to pass in Color values

Add the ability to pass in background color for dark mode and light mode.
There seems to be little to no documentation on the methods or properties.

Darkmode gives back text on black background with MathJax

I'm using darkmode.js which has a lot of mathematical formulae - rendered with mathjax. However, all those formulae do not change the colour to white when dark mode is switched on

With white background
With Darkmode switched activated

Is there a way around it?

Opacity

How would you change the code to do it with opacity blend in instead of the current effect?

Problem with Next/Nuxt.js

Hey,
as mentioned via mail is here the issue.

While integrating in my next.js-App its working fine with the widget. But if i dont use the widget, it breaks the app with "window not defined".

Your answer:

I had the same problem with Nuxt.js (the equivalent of Next for Vue.js)
I guess it's typical because Next/Nuxt is trying to render it.

I need to investigate on it. I am a bit busy these days I may try in the next two weeks.
Please open an issue on github so I don't forget!

so, here it is :D

Thank you very much!

Element darkmode color switch only works when static (i.e. sticky, fixed do not work)

I work in Webflow and find the issue that when I set up any element to something other than static, darkmode.js won't switch this element correctly when activated.

Is that something which can be fixed?

Thanks for any info!

not working with bootstrap framework

it's only change the background, any others component still the same

Request: demo with switch toggle

It'd be great to see a simple demo with a switch toggle for turning dark-mode on. I'd like to use it with the Bootstrap Custom Switch but unsure of the code to add to it.
https://getbootstrap.com/docs/4.3/components/forms/#switches

darkmode-ignore class doesn't seem to work

I even tried to add the class to the <body> section but once new DarkMode() is instantiated it stilled change the class's style content?!

Label option not working

I followed same instructions mentioned in https://github.com/sandoche/Darkmode.js. But somehow label is not working.

Demo: https://codepen.io/johndoe007/pen/gNdOrN

Problems with WordPress.

1: Widget doesn't show up on some themes.
2: Widget is not clickable on some themes.
3: Webpage Title and Website title are being darked out after activating it.

--> Only worked for me on WordPress's Twenty Nineteen Theme

Tip: Add topics to the GitHub repo.

Using snippet won't work.

For my own website, I decided to give this a shot.

I added the snippet that was given to me to my own page:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
<script>
  new Darkmode().showWidget();
</script>

But to my surprise, nothing happened.

I checked the console, and found this:

darkmode-js.min.js:1 Uncaught TypeError: Cannot read property 'classList' of null
    at new e (darkmode-js.min.js:1)

I haven't done anything weird.

I even created a new html document with nothing in it except a default template with some text, added the snippet, and nothing happened.

Any help?

Rapidly clicking the icon breaks the overlay

I was playing around trying to break dark mode and I think I succeeded 😛

To reproduce, just tap the widget repeatedly until this happens

Overwriting css property using .darkmode--activated class is not working

Overwriting CSS property using .darkmode--activated class is not working and also overwriting class attributes too are not working.

Double click will give you a Ellipse

Releasing "releases"?

Hi @sandoche,

Author of the "Darkmode" WordPress plugin here. Any chance you could submit new releases with changelogs, so we can "watch" the repo and get notified with new releases? Right now I don't even know which version is darkmode.js on.

Emojis change its color in dark mode

I have a GatsbyJS blog and I can't make the emojis remain their original color in the dark mode, I tried everything from the darkmodejs documentation but I still can't achieve it. Is there any way to add the darkmode-ignore css class to an emoji in the markdown text?

Thanks!

Isolation doesn't work when Position is relative or transform is applied

The Dark-Mode exclusion works perfectly on all "normal" objects. But when I add either a position of fixed, sticky, absolute or relative, It doesn't anymore. Same with transforms etc.

How to customize the div of the switch button

I don't want the default button, how can I design it according to my own div?

Undo hue inversion

By rotating the hue with 180 degreess, the original hue of elements can be retained in dark mode :)

filter: hue-rotate(180deg);

Inversed buttonColorDark & buttonColorLight in default settings

Broken on Mobile Firefox 79.0.5

I'm sure this is an issue with the new Firefox update, but I thought it would be best to mention:

Hide-Toggle on IE11

I think it'd be good to make this run at all on IE11 and stop the widget icon from displaying. Could maybe do this in JavaScript or use CSS targeting.

I use this to hide in IE10/IE11

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.darkmode-toggle {display: none !important}
}

Flicker when loading pages

Hi,

I am using this plugin in a next.js application and I am having issues.

When dark mode is selected, pages seem to load in light first then toggle to dark mode.

I added autoMatchOsTheme: false. But that didn't work. Same thing in chrome and firefox.

Here is the staging site.

TypeError: null is not an object (evaluating 'document.body.insertBefore')

Im getting this error when trying to add the script

TypeError: null is not an object (evaluating 'document.body.insertBefore')

Could not auto set darkmode after 1.3.4

I have try v1.3.4 v1.4.0 v1.5.0 and v1.5.1
all of these version can set Local Storage darkmode: true
but only v1.3.4 can read it and use darkmode automatically
and I try to visit other site which use darkmode.js in your README Demo
all of them can not auto set darkmode
here is my code

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
<script>
  let options = {
    label: '🌓'
  };
  const darkmode = new Darkmode(options);
  darkmode.showWidget();
</script>

Work on Browser (Mobile/PC) But not working on Android WebView Application

I have implented the darkmode.Js it works great on PC or mobile browser. But somehow the JS is not working on Android Webview Application. It doesnot show toggles or even I set the dark mode pre activated it does not switch on webview application.

PS note: I tried to activate the Javascript on webview App. Still no luck.

Darkmode body color?

Hi! How do I set the background body color I need?
default color = #000000
need = #222222

Usage without the widget displays a button

I use Darkmode.js programmatically without displaying the widget, since the version 1.5.4 I have the following bug (a little empty button appearing)

Background turned dark, but it didn't work for the texts

Hi, thanks for your work!

I used Darkmode.js to add dark mode for my blog powered by VuePress. But in the dark mode, only the background turned black, while the text didn't change at all, like the screenshot below, which looked very weird. In the meanwhile, the button didn't appear the emoji 🌓 I added.

And I used the script as your instruction shows:

Using NPM

npm install darkmode-js

Add the javascript code and options:

// Dark Mode
import Darkmode from 'darkmode-js';

new Darkmode().showWidget();

var options = {
    label: '🌓'
}
  
const darkmode = new Darkmode(options);
darkmode.showWidget();

It would be great if you can help me about the problem. Thanks in advance 😊

css width issue

in responsive websites class "darkmode-ignore" sets a custom width...

to prevent this, in css you have to add a class:

.darkmode-ignore{
width: 100%;
}

it will work fine then...

Tips on how to avoid the darkmode from flashing?

Problem

I have added this library to an existing static site that I am building. However, every time someone clicks on a new page there is a flashing effect from the white background, which is the original site color.

This website is a static website, so there is no server rendering which makes it a bit more difficult to avoid the flash.

Do you guys have any tips on how to avoid or limit as much possible the flashing on static sites?

Add an option to automatically switch to darkmode if it's enabled in the device

A feature idea:

Automatically activate the darkmode if the device is

Resources:
https://stackoverflow.com/questions/50840168/how-to-detect-if-the-os-is-in-dark-mode-in-browsers

Label option not working

Still same issue buddy 😢

Code:

In Browser

Originally posted by @the-mcnaveen in #14 (comment)

[Question] How to make it ignore images?

Hello, I've installed this in a project at my job but I'm trying to make it ignore images when dark mode is on, but it's not working for me, not sure if I'm doing something wrong:

All the rest of the system works, just the images it's wrong.

How to add switchDarkmode to the menu？

I'm not a programmer, but I want to add switchDarkmode to the menu.I don't know how? My wordpress theme is TwentyTwenty. In addition, this DarkMode is not work on search bar. Thanks

Is there a way to disable the circular expanding animation?

I'd like a simple instant transition from light to dark and vice-versa - without animation.

Is there a way to do this with darkmode.js?

Darkmode does not work in Admin LTE 3 template

I am working on a web platform and I integrated Admin LTE template (version 3).
I integrated darkmode.js using CDN .
Darkmode does not work while running the project on local server and there is no error on browser's console.

Saving Mode

When I disconnect my app and connect it again darkmode shows the last set mode. How can i disable it so that darkmode is inactive while app initiates?

**<input id="darktoggle" type="checkbox"/>**

          const options = {autoMatchOsTheme: false}
          const darkmode =  new Darkmode(options);

          $('#darktoggle').click(function(){
              darkmode.toggle();
          });

           if (darkmode.isActivated()) {
              document.getElementById('darktoggle').checked = true;
            }
          else {
                document.getElementById('darktoggle').checked = false;
          }

Darkmode.js, possible issue with jQuery and Bootstrap 4

Hi, I tried adding ```

    <script>
    $(document).ready(function () {
      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();
    });
    
    </script>

To my website and It seems that it is not working at all, I simply cannot click on the Dakrmode button. Is there anything that can help me fix this issue?

darkmode button

the dark-mode button go behinds images

Blogger Error

I'm trying to add this on my blogger blog, but i get the following Error. the Ocde i implemented is below.

Uncaught TypeError: Cannot read property 'insertBefore' of null
at new e (darkmode-js.min.js:1)
at (index):37

`<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>

Also, Is there a way to use it someway show that it appears with a set of FontAwesome Icons but on clicking the icon the website returns dark theme. I would prefer that instead of a floating Button.

Nav bar

The dark mode doesn’t change the colour of my nav bar no matter what I do.

example page(scroll as far down as possible and turn on dark mode)

https://acegoal07.github.io/web/issues.html

Starting in Dark Mode

Is there a way to start it in dark mode via the options or to force dark mode to be the default on initial load?

How To Exclude background-image css property

Everything is working fine except making the background image of my page negative. I have added a backround image using css background-image peoperty. And now its changing the color of the image. How can can is solve the problem?

Hope for solution soon.

Thanks from reply in advance.

Double clicking jams the dark mode

When I double click the dark mode button, the dark mode creates this weird circle.

Darkmode toggle is behind other HTML element

So I can't click the toggle because it's behind an HTML element.

I tried making a CSS file and putting this:

.darkmode-layer, .darkmode-toggle{
    z-index: 999;
}

But I have 0 experience with CSS so I'm not sure if that's correct. Any ideas?