josesotelocohen/blackout-wordpress-dark-mode-widget

Simple plugin that creates a widget that enables dark mode on click.

blackout-wordpress-dark-mode-widget's Issues

Select/Exclude pages

Is your feature request related to a problem? Please describe.
Select pages where it's going to be shown, or exclude.

Option to disable the automatch OS

A simple checkbox in the settings page

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 <---- THIS ONE
}

• Create checkbox in settings page
• Add option in JS

Can't set up button size

Describe the bug
It doesn't matter how I adjust "Button size" and "Icon size", the button still huge. I even was forced to place it -30px left and right to see only 1/4 of the controller.

To Reproduce
Steps to reproduce the behavior:

1. Set Button size on the MIN
2. Set Icon size on the MIN
3. See the result on your blog
4. The button is huge

Expected behavior
Something with scrollers, I think, might be needed some adjustment.

Screenshots

Wordpress (please complete the following information):

• WP Version: 5.5.1
• Browser Chromium
• Browser Version 85.0.564.44 (Official build) (64-bit)

Additional context
I had this problem since I installed the plugin one year ago. But after the last plugin update, the problem was exaggerated.

Images becoming negative

Is your feature request related to a problem? Please describe.
Its a great plugin. Very usefull. However when I or users toggle it, the images become negative aswell but the images are an integral part of my website. http://conquerorsabacus.online/

Describe the solution you'd like
I feel this is not necessary for dark mode to change images. Either a way to exclude certain elements from the plugin or an option to complete ignore all images should work.

Additional context
It still works very well and I'm thankfull for your work. This is my only issue so far.

Images and header affected, even with darkmode-ignore

Hello Jose,

Im using this plugin in combination with the minimal portfolio theme (https://abileweb.com/portfolio/minimal-portfolio/).
After installing, the plugin adds the darkmode-ignore class to images on the page (as intended), but when the button is toggled the images are still inverted. The same goes for the header-menu when it is set to sticky.

I've tested it on a clean install of wordpress with the theme and plugin only, the result is the same. It should be simple enough the replicate. Does this have to do with the theme or is it the plugin?

Hope to hear from you soon!

Custom Icon

Look for ways to change the icon with the default widget

Remove Icon, When Auto Match OS

Hi,

Thanks so much for this plugin! I do have one feature request: be able to show no icon. Specifically I want to use this feature when I auto match OS. Right now I only want to auto match OS but there’s the icon still there and I would like for it not to be and only use the plugin to do auto match OS.

Thank you for considering.

Custom Widget

See if there's a way to use a custom widget. Have to check the way to activate it programmatically mentioned in the docs

Option to override some of the default actions (Wordpress)

Is your feature request related to a problem? Please describe.
Yes, by default, all the color and images are inverted and if you have a site with few (or lot of) colourful elements and images it looks bad.

Describe the solution you'd like
If there was an ability to either,

• add corresponding alternate styling for an element (block elements, class/id, etc), images, etc., or,
• ignore a certain image and/or elements, that shouldn't change while in night mode

Describe alternatives you've considered
Other plugins

Additional context
Added screenshots to provide context.
Images going wrong:

Branding colours getting changed

Change the icon

Hi guys,

How do I change the icon 🌓?

Many thanks

Invert colors of WordPress theme header

The WordPress theme header gets ignored for inverting colors. Is there a way to tweak the code so it inverts colors of an wordpress theme header too?

Improve the readme

Add tutorials and examples about how configure the widget to usual positions.

Ability to add elements to ignore

I use the enfold theme and in my standard design the footer and some other elements already have a dark color scheme..

I probably can fix this in css myself but it would be a nice addition to the settings screen if I could just list some elements the plugin ignores..

With images I have a similar issue.. if you look here https://www.arendmaatkamp.nl/over-arend/
My jpg portrait a little bit down the page doesn’t get ignored.. while I did add the ignore class to this element in the backend.. which works when the image gets loaded in the background.. but not on regular images.. funny thing is that the jpgs are in negative.. but the pngs are not.. this should be the other way around in my case because I use flat black illustrations only as pngs especially because I want to cleanly switch to darkmode

Excuses me if my thoughts are a bit chaotic.. I’m an artist 😅😜

Test issue

comment

Implement Darkmode-ignore on toggle

Enable the class only when the widget is enable, this way if we add the class to a section or specific item it won't be differentiated until the dark mode is enabled.

The button is too big!!!!!!!!!

Describe the bug

The button is too big for the website. I downloaded the plugin for my WordPress website and made it as small as I could in the setting. It takes up 1/4th of the screen for mobile users.

To Reproduce
Step 1: Download the plugin.

Step 2: Suffer.

Expected behavior
It not to take 1/4th the screen.

Here is the website itself.
https://cherryoutrage.com/2020/11/21/chapter-list-2/

Ignore dark mode on the images (.svg) and buttons

Hi,

How can I isolate the SVG images and buttons from the dark mode?

Add pre-made positions

Create checkboxes with images to have pre-defined positions so users don't need to guess how to configure each parameter to get the usual positions (bottom left, bottom right, middle left, middle right).

Custom font-color

Add a way to choose the font-color while in dark mode.

Custom Background color

Add a way to use a custom background color, have to experiment to see if it's a good idea as it might not work as expected.

Correct the readme.txt

Describe the bug
There are some spelling errors and the name of the plugin should be changed to: Blackout: Dark Mode Widget

Also, change: where you can implement it with a simple JavaScript script implementation to insertion.

Also: Do you love the widget? you can show you support to YOUR

Option to enable/disable cookies

A simple checkbox in the settings page.

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 <---- THIS ONE
  label: '🌓', // default: ''
  autoMatchOsTheme: true // default: true
}

• Create checkbox
• Add option in the JavaScript part

Hi! Thank you for this great plug-in, everything is working fine but the darkmode is not kept when I change page on the website (https://newidentity.marcopolosrl.it/), so I have to enable the switch every time. Any suggestion? Am I doing something wrong? Thank you so much!

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Mobile-Only options

Add configurations that only apply to mobile users.

wordpress shortcode

Hi, does this got any shortcode? we wan to rearrange the button location..

My page is shown in Dark Mode by default

My page is shown in Dark Mode by default

New functionality: Images that don't change color

Your plugin is perfect but if you can prevent the images from changing colors when you put the site in "Dark Mode", it would be perfect.

For now, this is the only reason preventing me from using your plugin.

Thank you for your understanding.

NB : There are 2 images to show you the problem :

Background color change of original theme

Hi there,

I use the „Twenty Twenty“ theme with #f5efe0 as the background-color. However, when I activate this plugin, the background color changes to completely white which is not what I want..

Exclude images

Checkbox to exclude images from the dark mode, so their colours don't change

Elements loaded with AJAX does not have darkmode-ignore.

Describe the bug
Same with title. For example, images loaded with AJAX lack darkmode-ignore class

To Reproduce
Steps to reproduce the behavior:

1. Turn dark mode on
2. Load some elements with AJAX

Expected behavior
Elements have darkmode-ignore class

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS Mojave 10.14.6
• Browser: Chrome
• Version: 77

Smartphone (please complete the following information):

• Device: iPhoneXS
• OS: 13.1.3
• Browser: Chrome, Safari
• Version: Chrome 78

Can't exclude elements from being affected by dark-mode

Describe the bug
None of the provided options for skipping dark-mode for specific elements are working for me (classname, CSS rules).

To Reproduce
Steps to reproduce the behavior:

1. Install and activate plugin
2. Test that it correctly allows you to switch between light and dark mode
3. Add class darkmode-ignore to an element
4. The element still gets switched
5. Add CSS rule mix-blend-mode: difference; to the element
6. The element still gets switched

I've checked that the markup/CSS is definitely being updated and not cached.

Expected behavior
The chosen element(s) should not be affected by the dark-mode filter.

Desktop (please complete the following information):

• OS: Mac
• Browser: Brave (Chromium)

Additional context
A previous issue also references being able to select not to apply dark mode to images, but that seems to be missing from the plugin config as well, and my images are being color-flipped by default. Edit: It seems to be inconsistent in how it's affecting images - some are flipped, but some others (WP uploads) aren't.