Dark theme/dark mode

[tborychowski]

What would you like on Statping?

Editing the theme is extremely difficult and buggy (speaking with 20yrs or experience in front-end dev).
It would be much easier if this was rearchitected and standardised a bit, to make it easier to modify.
The least of my suggestion is that there should be an alternate Dark theme (like we have on mobile app).

Describe the solution you'd like

My ideal solution would be

• drop sass in favour of plain css - for a simple and (almost) static page like this, there's no need for a pre-processor
• use css properties in favour of the preprocessed - it makes it easier to control (even dynamically) with javascript and to override based on context
• simplify the template (both html and css) - the website is really very simple and can be build using simple reusable components with flat css, that's easy modifiable and themeable. Currently it isn't.
• allow for custom themes

Describe alternatives you've considered

I tried editing the theme with the option that is available in settings. Problems:

• changing a sass property is not reflected without !important
• sometimes even adding !important is not enough, because the template already has !important imperative, so the base template must be edited to increase the specificity of the selector
• a lot of colours are hardcoded in the template and are not using variables
• colours and styles are not used consistently, and - what's worse - classes and elements (tags) are not used consistently, e.g. changing card background, doesn't change the main list on the index page (these cannot be changed from the template that is available to the user, it needs to be added to the template)

Is your feature request related to a problem? Please describe.

I'm always frustrated when I have to use bright colours during the evening/night hours, as they burn my eyes. I have all apps using dark theme, OS using dark mode and even websites are tweaked with a browser extension - but as the extension not always changes the colours perfectly, making some parts invisible/illegible - it's always preferable to have a native support for dark colours.

Additional context

Add any other context or screenshots about the feature request here.

[jamiew0w]

I also would love to have this. As it stands (with a custom theme) every second update seems to break the display resulting in endless white screens and basically starting over with modifying the theme. I haven't been able to update for the last 3-4 releases without running into this. Having it built in, or a simpler & more straightforward setup would really help.

For context, this project is very popular but there are basically no people sharing themes as it's just so unstable. This could really spur on more community involvement and draw even more people towards using this awesome project.

Thanks @tborychowski for summarising everything so eloquently, it's been a pet peeve of mine but I haven't found the time to raise an issue myself.

[tborychowski]

Hi @jamiew0w,
Thanks :-)
Yes, I agree; a plugin-like theming would be fantastic!
And community submitted themes would definitely increase the user-base even more.

[hunterlong]

hey @tborychowski , thanks for typing up this issue. I also want to restructure the SCSS template, along with organizing the HTML. I created a repo for statping/themes which I'd like to have as a centralized repo for choosing a custom theme without designing. (still in the works)

• Standardize Statping frontend HTML classes
• Create a Wiki Page describing SCSS classes and designs
• Create a Dark Theme
• Add "Choose Design" selection (based off of statping/themes)

[tborychowski]

Thanks @hunterlong,
That's great to hear! I'm looking forward to this :-)

[hunterlong]

Ive been picking away at this, the PR is at: #745

Not ready yet, but it’s getting somewhere. :D

[github-actions]

This issue hasn't had any updates in a while. If this is still a problem, please create a new issue.

[davidak]

this is still a problem

[github-actions]

This issue hasn't had any updates in a while. If this is still a problem, please create a new issue.

[davidak]

...

[github-actions]

This issue hasn't had any updates in a while. If this is still a problem, please create a new issue.

[jonasled]

This feature is still wanted and not stale

[jonasled]

I've starting developping a dark mode to apply as custom stylesheet if someone is interested: https://gitlab.jonasled.de/jonasled/statping-dark

[github-actions]

This issue hasn't had any updates in a while. If this is still a problem, please create a new issue.