Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added the option for an automatic dark mode based on the device status #1836

Merged
merged 3 commits into from
Jun 22, 2021

Conversation

AlexLamond
Copy link
Contributor

@AlexLamond AlexLamond commented Jun 21, 2021

Signed-off-by: = [email protected]

By submitting this pull request, I confirm the following: {please fill any appropriate checkboxes, e.g: [X]}

{Please ensure that your pull request is for the 'devel' branch!}

  • I have read and understood the contributors guide, as well as this entire template.
  • I have made only one major change in my proposed changes.
  • I have commented my proposed changes within the code.
  • I have tested my proposed changes.
  • I am willing to help maintain this change if there are issues with it later.
  • I give this submission freely and claim no ownership.
  • It is compatible with the EUPL 1.2 license
  • I have squashed any insignificant commits. (git rebase)
  • I have Signed Off all commits. (git commit --signoff)

What does this PR aim to accomplish?:

{A detailed description, screenshots (if necessary), as well as links to any relevant GitHub issues}

This PR adds the ability to set the PiHole theme to auto, enabling users to have light mode when the device is in light mode and dark mode when the device is in dark mode

How does this PR accomplish the above?:

{A detailed description (such as a changelog) and screenshots (if necessary) of the implemented fix}

The PR adds an additional CSS document that applies the relevant theme on the device theme and adds the option to the themes.php file

What documentation changes (if any) are needed to support this PR?:

None

PiHole-Auto-Light-Dark.mp4

@AlexLamond AlexLamond marked this pull request as ready for review June 21, 2021 17:47
@AlexLamond AlexLamond changed the base branch from master to devel June 21, 2021 17:48
@dschaper
Copy link
Member

The mov isn't working for me but this is a great idea!

@AlexLamond
Copy link
Contributor Author

AlexLamond commented Jun 21, 2021

The mov isn't working for me but this is a great idea!

Uploaded an .mp4 that seems to be working now @dschaper!

Copy link
Member

@DL6ER DL6ER left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why custom-auto when it is referring to default templates? This may cause confusion.

@@ -16,6 +16,8 @@
$available_themes["default-light"] = array("Pi-hole default theme (light, default)", false, "default-light");
$available_themes["default-dark"] = array("Pi-hole midnight theme (dark)", true, "default-dark");
$available_themes["default-darker"] = array("Pi-hole deep-midnight theme (dark)", true, "default-darker");
// Option to have the theme go with the device dark mode setting, always set the background to black to avoid flashing
$available_themes["custom-auto"] = array("Pi-hole auto theme (light/dark)", true, "custom-auto");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
$available_themes["custom-auto"] = array("Pi-hole auto theme (light/dark)", true, "custom-auto");
$available_themes["default-auto"] = array("Pi-hole auto theme (light/dark)", true, "default-auto");

And rename custom-auto.css to default-auto.css

AlexLamond and others added 3 commits June 22, 2021 12:52
Corrected naming conventions for files and theme name

Co-authored-by: DL6ER <[email protected]>
Signed-off-by: Alex Lamond <[email protected]>
Signed-off-by: Alex Lamond <[email protected]>
Copy link
Member

@DL6ER DL6ER left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirmed working with this Firefox debug option:
Screenshot from 2021-06-22 16-12-39

@DL6ER
Copy link
Member

DL6ER commented Jun 22, 2021

I wonder if we (a) should make this the default choice (can be done in another PR) and (b) when the first user will request the auto theme to be darker ;-)

@DL6ER DL6ER merged commit a2c64d6 into pi-hole:devel Jun 22, 2021
@AlexLamond
Copy link
Contributor Author

AlexLamond commented Jun 23, 2021

@DL6ER I considered (a) but wasn't sure if it would be accepted by the userbase or seen as an annoyance and having to go in and set it to specific dark or light? For (b) I'm sure I could find some time to implement a light theme / dark theme dropdown section to choose which one applies in each case. Thoughts?

The other option I'm considering is getting rid of the radio buttons and making it a drop down choice for the light and dark mode themes. Will make a pull request as requested and let the Pi-Hole team decide on if it will be usable ☺️

@DL6ER
Copy link
Member

DL6ER commented Jun 24, 2021

I'm not sure if it'd be seen as an "annoyance". How often do you switch between light and dark? I don't ever switch and use dark throughout the entire day - but this may not be the typical use case.

I wonder how you imagine such a dropdown choice, would it be three drop downs in the end?

  1. What to use
    1.1. Always light
    1.2. Always dark
    1.3. Device-dependent

  2. Theme to use in light mode
    2.1. There is only one

  3. Theme to use in dark mode
    3.1. Midnight
    3.2. Deep-midnight

I do really wonder if it would be worth the effort. We have only one light theme and never had a user submitting a custom theme at all since we have implemented this ability more than one year ago (based on a feature request, btw).

@PromoFaux
Copy link
Member

Just something I noticed when reviewing another PR, @AlexLamond - not sure if this is intentional but in auto dark mode the top left background colour remains blue, where the midnight theme is grey

Pi-hole Midnight theme (dark):

image

Pi-hole auto theme (light/dark) Windows dark mode:

image

@PromoFaux
Copy link
Member

This was the other PR I was reviewing, BTW. I've also noticed that the auto mode does not change the address bar colour on Android chrome, where the manual modes do.:

Default Theme:

image

Midnight Theme:

image

Deep Midnight:

image

Auto (light):

image

Auto (dark):

image

@pralor-bot
Copy link

This pull request has been mentioned on Pi-hole Userspace. There might be relevant details there:

https://discourse.pi-hole.net/t/pi-hole-ftl-v5-9-web-v5-6-and-core-v5-4-released/49544/1

@pralor-bot
Copy link

This pull request has been mentioned on Pi-hole Userspace. There might be relevant details there:

https://discourse.pi-hole.net/t/default-theme-use-prefers-color-scheme-to-detect-system-theme/35615/2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants