pawelmalak / flame

Flame is self-hosted startpage for your server. Easily manage your apps and bookmarks with built-in editors.
MIT License
5.33k stars 264 forks source link

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

Open NoLooseEnds opened 3 years ago

NoLooseEnds commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

pawelmalak commented 3 years ago

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

schlaggi commented 3 years ago

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;
  }
}