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

[Suggestion] Variable theme by time of day (aka daymode / nightmode) #22

Open
NoLooseEnds opened this issue Jun 10, 2021 · 4 comments
Open
Labels
🔨 Feature New feature or request

Comments

@NoLooseEnds
Copy link

Purely esthetic, but it would be nice to i.e has the yellow/black (aka cab) theme during daytime, and a darker one (ie blackboard) during nighttime.

@pawelmalak pawelmalak added the 🔨 Feature New feature or request label Jun 10, 2021
@pawelmalak
Copy link
Owner

I was thinking about that. I have two ideas on how to implement it, either by creating user-defined scheduler or by leveraging isDay property from the weather api. User could then choose which theme to apply for day and night time.

@gitcatpeter
Copy link

Correct me if I'm wrong, but right now the page does not auto refresh the date/time field either.

@pawelmalak
Copy link
Owner

It doesn't. You can open new issue and it should be fixed with next release.

@schlaggi
Copy link

schlaggi commented Nov 5, 2021

Another option could be to use the CSS media feature "prefers-color-scheme" whitch would change the color based on the browser setting.

I just implemented it (after @pawelmalak showed me how to change the theme colors via custom CSS) and as I configured my OS to change the window style based on daytime/nighttime the browser and the website theme change their style too.

My custom CSS looks like this:

body {
  --color-primary: #eceae8 !important;
  --color-accent: #f65275 !important;
  --color-background: #041e42 !important;
}

@media (prefers-color-scheme: dark) {
  body {
    --color-primary: #eceae8 !important;
    --color-accent: #f65275 !important;
    --color-background: #041e42 !important;
  }
}

@media (prefers-color-scheme: light) {
  body {
    --color-primary: #041e42 !important;
    --color-accent: #f65275 !important;
    --color-background: #eceae8 !important;
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔨 Feature New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants