Add dark mode support following system preference

Add comprehensive dark mode support to the Maintenance Tasks UI that automatically follows the user's system/browser preference (prefers-color-scheme):

- Switch from bulma-no-dark-mode.min.css to bulma.min.css to enable Bulma's built-in dark mode support
- Implement CSS custom properties for syntax highlighting colors with dark mode variants
- Use CSS color-scheme property to automatically apply correct theme based on system preference
- Update CSP hashes for modified inline styles
- Update Bulma CDN integrity hash for the full version

The implementation provides a seamless dark mode experience that automatically adapts to the user's system settings, similar to Mission Control Jobs.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: marckohlbrugge

app/controllers/maintenance_tasks/application_controller.rb

@@ -8,10 +8,14 @@ class ApplicationController < MaintenanceTasks.parent_controller.constantize
     BULMA_CDN = "https://cdn.jsdelivr.net"
 
     content_security_policy do |policy|
+      policy.style_src(
+        :self,
+        BULMA_CDN,
+      )
       policy.style_src_elem(
         BULMA_CDN,
         # <style> tag in app/views/layouts/maintenance_tasks/application.html.erb
-        "'sha256-WHHDQLdkleXnAN5zs0GDXC5ls41CHUaVsJtVpaNx+EM='",
+        "'sha256-LVai3C2/+O9MPVaeiRrXbcSwDbPxqWfXI4pz487d9Js='",
       )
       capybara_lockstep_scripts = [
         "'sha256-1AoN3ZtJC5OvqkMgrYvhZjp4kI8QjJjO7TAyKYiDw+U='",

app/views/layouts/maintenance_tasks/_navbar.html.erb

@@ -1,4 +1,4 @@
-<nav class="navbar is-light" role="navigation" aria-label="main navigation">
+<nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
     <%= link_to 'Maintenance Tasks', root_path, class: 'navbar-item is-size-4 has-text-weight-semibold has-text-danger' %>
   </div>

app/views/layouts/maintenance_tasks/application.html.erb

@@ -16,20 +16,44 @@
     <%= csrf_meta_tags %>
 
     <%=
-      stylesheet_link_tag(URI.join(controller.class::BULMA_CDN, "npm/[email protected]/css/versions/bulma-no-dark-mode.min.css"),
+      stylesheet_link_tag(URI.join(controller.class::BULMA_CDN, "npm/[email protected]/css/bulma.min.css"),
         media: :all,
-        integrity: "sha256-HCNMQcqH/4MnGR0EYg2S3/BXYMM1z9lrFV10ANRd79o",
+        integrity: "sha256-RwYNyYLkMTjyYn8FRzVzQFtHXuHg9dpfkPCuf6j2XDM=",
         crossorigin: "anonymous") unless request.xhr?
     %>
 
     <style>
-      .ruby-comment { color: #6a737d;}
-      .ruby-const { color: #e36209; }
-      .ruby-embexpr-beg, .ruby-embexpr-end, .ruby-period { color: #24292e; }
-      .ruby-ident, .ruby-symbeg { color: #6f42c1; }
-      .ruby-ivar, .ruby-cvar, .ruby-gvar, .ruby-int, .ruby-imaginary, .ruby-float, .ruby-rational { color: #005cc5; }
-      .ruby-kw { color: #d73a49; }
-      .ruby-label, .ruby-tstring-beg, .ruby-tstring-content, .ruby-tstring-end { color: #032f62; }
+      :root {
+        --ruby-comment: #6a737d;
+        --ruby-const: #e36209;
+        --ruby-embexpr: #24292e;
+        --ruby-ident: #6f42c1;
+        --ruby-number: #005cc5;
+        --ruby-keyword: #d73a49;
+        --ruby-string: #032f62;
+        --required-color: #ff6685;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --ruby-comment: #8b949e;
+          --ruby-const: #ffa657;
+          --ruby-embexpr: #c9d1d9;
+          --ruby-ident: #d2a8ff;
+          --ruby-number: #79c0ff;
+          --ruby-keyword: #ff7b72;
+          --ruby-string: #a5d6ff;
+          --required-color: #ff6685;
+        }
+      }
+
+      .ruby-comment { color: var(--ruby-comment); }
+      .ruby-const { color: var(--ruby-const); }
+      .ruby-embexpr-beg, .ruby-embexpr-end, .ruby-period { color: var(--ruby-embexpr); }
+      .ruby-ident, .ruby-symbeg { color: var(--ruby-ident); }
+      .ruby-ivar, .ruby-cvar, .ruby-gvar, .ruby-int, .ruby-imaginary, .ruby-float, .ruby-rational { color: var(--ruby-number); }
+      .ruby-kw { color: var(--ruby-keyword); }
+      .ruby-label, .ruby-tstring-beg, .ruby-tstring-content, .ruby-tstring-end { color: var(--ruby-string); }
 
       .select, select { width: 100%; }
       summary { cursor: pointer; }
@@ -55,9 +79,16 @@
         box-shadow: 0 4px 6px -1px #0000001a,
                     0 2px 4px -2px #0000001a;
       }
+
+      @media (prefers-color-scheme: dark) {
+        .box {
+          background-color: var(--bulma-scheme-main-bis);
+        }
+      }
+
       .label.is-required:after {
         content: " (required)";
-        color: #ff6685;
+        color: var(--required-color);
         font-size: 12px;
       }
     </style>

app/views/maintenance_tasks/tasks/show.html.erb

@@ -27,7 +27,7 @@
     <% end %>
     <%= render "maintenance_tasks/tasks/custom", form: form %>
     <div class="block">
-      <%= form.submit 'Run', class: "button is-success is-rounded mb-4 has-text-white-ter", disabled: @task.deleted? %>
+      <%= form.submit 'Run', class: "button is-success is-rounded mb-4", disabled: @task.deleted? %>
     </div>
   <% end %>
 </div>