HuntersKeepers icon indicating copy to clipboard operation
HuntersKeepers copied to clipboard

HuntersKeepers needs a Dark Mode

Open ChaelCodes opened this issue 4 years ago • 3 comments

Describe the bug HuntersKeepers continues to blind unexpecting stream viewers. Apply a dark mode to the site.

To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context Add any other context about the problem here.

ChaelCodes avatar Jan 31 '21 14:01 ChaelCodes

This looks very painful. https://buefy.org/documentation/customization/ https://bulma.io/2019/10/15/light-dark-colors/#scheme-variables-for-dark-mode https://github.com/buefy/buefy/issues/1861 https://mybyways.com/blog/dark-mode-with-prefers-color-sheme-media-query https://css-tricks.com/dark-modes-with-css/ Permanent dark mode is fine, but I think we stripped out our sass plugin.

ChaelCodes avatar Feb 04 '21 21:02 ChaelCodes

FWIW I implemented this with Bulma on vglist by using Bulma's css variables branch https://github.com/jgthms/bulma/tree/css-variables-with-fallback

https://github.com/connorshea/vglist/pull/1501

Not sure how applicable that is for Buefy, though.

connorshea avatar Feb 07 '21 17:02 connorshea

I'm okay with this being dark mode only, and Buefy does support css variables! Buefy will use custom Bulma values if they're set in application.sass and buefy.css is not imported. That means application.css needs to be converted into an application.sass file though. I like the colors and styles you used. I definitely want to borrow that.

Why did you need the theme in individual components? It seems like the application.scss in vglist already has a media query. Also, it looks like Bulma 0.8.0 supported css vars. Why did you need the fallback branch?

ChaelCodes avatar Feb 11 '21 21:02 ChaelCodes