[FEATURE_REQUEST] Auto dark/light theme

Is your feature request related to a problem? If so, please describe.

Using dashy in daytime with dark theme, it's look like uncomfortable, so can we switch theme automatically, that make our eyes healthy

Describe the solution you'd like

Set light theme and dark theme, and detected current operating system theme by browser, switch it automatic
Like vscode plugin Toggle Light/Dark Theme

Priority

Low (Nice-to-have)

Is this something you would be keen to implement

Yes!

[liss-bot]

If you're enjoying Dashy, consider dropping us a ⭐
_{🤖 I'm a bot, and this message was automated}

[Lissy93]

Hiya @DaiYuANg

This is a nice idea 👍

I'm working on #799 at the moment, that includes refactoring the theme class.
So I'm going to wait until that's finished and merged before looking at this.

---

Possible Implementation

Could be done based on time of day, but user would need to specify times. And working with time is hard.

I'd probably keep it simple, and check if the users OS or browser is set to prefer-dark.
Most operating systems have the option to switch to dark mode at night, light at day, with custom times.

Then in the config, it'd the user could specify nightTheme and dayTheme instead of just theme.

Finally, in the code, we'd detect if browser / OS is set to dark or light, and apply the theme accordingly.

const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
const theme = prefersDark ? appConfig.nightTheme : appConfig.dayTheme;

And if the user has specified a day / night theme, then in the UI could also show a "Quick Toggle" switch

Hi, I try to implement this issue last night, but the dev server is so slow, so I try to migrate to vite.
Unfortunately, I crash the project(I restored every changed I do). Are you planning to migrate to vue3 and vite?
This is a new question.

[Lissy93]

How were you running the dev server? I'm using yarn dev and there don't seem to be any performance issues.

But I wouldn't recommend working on this until the stuff in #799 is merged, as I've totally re-worked how all the theming is managed, it's in the REFACTOR/2.1.2_unified-config branch.

I'm happy to add the light/ dark theme feature, once I've got 2.1.2 finished and merged.

I mean the compiled speed

I'm running a production version in my home server, and it's AMD 5600x. When I change something in my server config that waiting about 30s - 1minute for compile
I was run a development version in my laptop, and it's MacBook 14 version, I'm also using yarn for start dev server and backend server and when I change something that the situation seem like my home server.
However, when I develop on quasar framework that a vue3 framework, I can choose use webpack or vite on quasar-cli.
For vite version, start dev server only need 3s-5s, for webpack version, a new project started dev server need 10s-15s
It's not a vite advertisement ☻, but it's faster than vue-cli really.
Maybe the current performance is enough, I just want to make it batter one

[Lissy93]

I'm getting 0.4s server refresh time using yarn dev, and the changes are visible in the browser pretty much instantly on a 10 year old AMD FX-8350, so there's something not right there.

Yeah, Vue CLI isn't the fastest, your welcome to try switching to Vite ot upgrading, but I guess it will be more work than it's worth.

I think your right, thanks for your answer

[liss-bot]

This issue has gone 6 weeks without an update. To keep the ticket open, please indicate that it is still relevant in a comment below. Otherwise it will be closed in 5 working days.