Add dark mode support following system preference

[marckohlbrugge]

Summary

Add comprehensive dark mode support that automatically follows the user's system/browser preference (prefers-color-scheme), similar to how Mission Control Jobs handles theming.

Changes

1. Switch to Bulma with Dark Mode Support

• Changed from bulma-no-dark-mode.min.css to bulma.min.css (v1.0.3)
• Updated CDN integrity hash to match the full Bulma build
• All Bulma components now automatically adapt to light/dark mode

2. Custom Syntax Highlighting for Dark Mode

• Implemented CSS custom properties for Ruby syntax highlighting colors
• Light mode: GitHub-style syntax colors (existing)
• Dark mode: GitHub dark theme-inspired colors for better readability
• Colors automatically switch based on prefers-color-scheme

3. Enhanced Box/Card Visibility in Dark Mode

• Added background-color: var(--bulma-scheme-main-bis) to .box elements in dark mode
• Uses Bulma's official CSS variable for elevated surfaces
• Provides subtle contrast against dark background while maintaining cohesive design

4. Fixed Button Text Contrast

• Removed hardcoded has-text-white-ter class from Run button
• Lets Bulma handle button text colors automatically
• Ensures proper contrast in both light and dark modes

5. Updated Content Security Policy

• Added policy.style_src(:self, BULMA_CDN) to allow external stylesheet loading
• Updated CSP hash for modified inline styles
• Ensures CSP compliance across all browsers and environments

Implementation Details

No Toggle Required: The implementation uses pure CSS @media (prefers-color-scheme: dark) queries, so the UI automatically adapts to the user's system preference without any JavaScript toggle or localStorage.

CSS Variables Used:

• --bulma-scheme-main-bis: For box backgrounds in dark mode (official Bulma variable)
• Custom --ruby-* variables: For syntax highlighting that adapts to theme

Files Modified:

• app/views/layouts/maintenance_tasks/application.html.erb - CSS variables and dark mode styles
• app/views/layouts/maintenance_tasks/_navbar.html.erb - Removed is-light class for automatic theming
• app/controllers/maintenance_tasks/application_controller.rb - Updated CSP configuration
• app/views/maintenance_tasks/tasks/show.html.erb - Removed hardcoded button text color

Testing

To test dark mode:

1. On Mac: System Settings → Appearance → Switch between Light/Dark
2. In browser DevTools:
   • Chrome/Edge: DevTools → ⋮ → More tools → Rendering → Emulate CSS prefers-color-scheme
   • Firefox: DevTools → Inspector → ☀️/🌙 icon
   • Safari: Develop → Experimental Features → Dark Mode CSS Override

Screenshots

Related

Inspired by Mission Control Jobs' approach to dark mode - simple, automatic, and respecting user preferences.

[marckohlbrugge]

Note: The Run button keeps white text in both light and dark modes. While Bulma's success button color varies slightly between themes, white text provides sufficient contrast in both cases without overcomplicating the implementation.

[marckohlbrugge]

Note: The Run button keeps white text (has-text-white-ter) in both light and dark modes. While Bulma's success button color varies slightly between themes, white text provides sufficient contrast in both cases without overcomplicating the implementation.

[marckohlbrugge]

I have signed the CLA!

[adrianna-chang-shopify]

Hey @marckohlbrugge , thanks for the contribution!

Changes generally look good on 🎩 , I think we may just need to make the contrast for the boxes even stronger.

cc @nvasilevski @etiennebarrie either of you up for tophatting?

[adrianna-chang-shopify]

Is this change necessary? We changed from style_src -> style_src_elem in #1195 to prevent CSP conflicts when the parent application uses style_src_elem directives, since we fall back to style_src.

[adrianna-chang-shopify]

I think we could potentially go lighter here for the boxes.

--bulma-scheme-main-bis

--bulma-background (a bit lighter)

[marckohlbrugge]

@adrianna-chang-shopify Thanks for the feedback! I agree with using --bulma-background for the box color based on the screenshot.

I tried testing this locally but kept running into CSP issues that I couldn't resolve after 30 minutes. Given the strict CSP configuration in the test dummy app, it might be easier if you could commit this change directly so it can be validated during tophatting.