feat: use Bulma 1 for dark theme and revised it

[swiffer]

Checking out the Dark Theme and awesome work done in #5065

Bulma v1 however introduced support for themes and has a dark theme bundled with it.

-> https://bulma.io/documentation/features/dark-mode/
-> https://bulma.io/documentation/start/migrating-to-v1/#what-s-new-i-e-did-not-exist-before

Therefore reverting most of the changes and instead migrated to Bulma v1.

This is not 100% tested and compared yet - want to get some thoughts about it @JakobLichterfeld / @wooter.

[netlify]

✅ Deploy Preview for teslamate ready!

Name	Link
🔨 Latest commit	3197340
🔍 Latest deploy log	https://app.netlify.com/projects/teslamate/deploys/69771de3271d0600083dc09f
😎 Deploy Preview	https://deploy-preview-5112--teslamate.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[wooter]

Thanks for taking this forward with Bulma v1! I really like the approach of leveraging Bulma's native dark theme instead of all the custom CSS overrides. Much cleaner and more maintainable.

I've deployed this to my test server and it looks good. The background is noticeably darker than my original implementation, but I think it works well, while keeping the map filter. In my limited testing, I don't see any obvious issues with how Bulma v1's default dark theme handles TeslaMate's UI.

I wish I had known about Bulma v1's native dark mode support earlier - would have saved us from writing 400+ lines of manual CSS overrides! This is a much better architectural approach than manually overriding every component. Nice work!

[swiffer]

Didn't know either - but agree with your points and therefore proposed it here.

Less maintenance work going forward most likely and way cleaner.

We could still finetune some styles by using component overrides / writing our own theme via v1 logic if we would like to make it a little lighter / blend it towars the dark theme of grafana for a more consistent look and feel.

[JakobLichterfeld]

Much cleaner and more maintainable.
This is a much better architectural approach than manually overriding every component.

Total agree. As this is not my focus area, I didn't dive deep into it and reviewed it without comparing different architectural approaches, sorry for that.

I always vote for maintainable approches.

[wooter]

I tested a slightly lighter variant by overriding a few CSS variables, which might be worth considering:

[data-theme="dark"] {
  // Lighter color scheme alternative
  --bulma-scheme-main: #1a1a1a;
  --bulma-background: #1a1a1a;
  --bulma-scheme-main-bis: #2d2d2d;
  --bulma-scheme-main-ter: #363636;
  --bulma-text: #e8e8e8;
  --bulma-text-weak: #b8b8b8;
  --bulma-border: #4a4a4a;
  --bulma-border-weak: #4a4a4a;

  // Fix card shadows
  .card,
  .box {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }
  
  // Map tiles - monochrome style like Tesla's in-car maps
  .dark-mode-tiles {
    filter: grayscale(100%) invert(100%) brightness(0.95) contrast(1.1);
  }
}

This gives a bit more brightness while still maintaining good contrast. Feel free to use as-is, adjust, or ignore - just wanted to share what I found worked well in testing! If you want, I can make a separate PR for this.

[swiffer]

Thanks! I'll try to update this PR on the weekend!