sandoche / Darkmode.js

🌓 Add a dark-mode / night-mode to your website in a few seconds
https://darkmodejs.learn.uno
MIT License
2.72k stars 176 forks source link

Add the ability to pass in Color values #28

Open Adit-COCO-Garg opened 4 years ago

Adit-COCO-Garg commented 4 years ago

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.

sandoche commented 4 years ago

Hi,

You can actually do it with those settings:

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
}
Adit-COCO-Garg commented 4 years ago

So what's happening here is that your base color - backgroundColor is being modified by the CSS blend mix. If I am using complex layouts and dynamic content delivery it becomes really difficult to manage ignoring appropriate modules as they constantly change and it messes up with images it turns them into negatives.

A future implementation could include being able to define a background color for both light and dark and find a way to not break layouts when trying to ignore certain modules of your document.

tobias-klein commented 3 years ago

Is there any way to configure the dark background color as something that's not black? (Like #ff2d2d30) I would like to use something similar as the Visual Studio Code dark theme background color, but I did not manage this with darkmode-js.