Move merge_conflicts to page specific styles

Also moves color variables to css variables for
dark mode support

app/assets/stylesheets/_page_specific_files.scss

@@ -31,7 +31,6 @@
 @import './pages/labels';
 @import './pages/login';
 @import './pages/members';
-@import './pages/merge_conflicts';
 @import './pages/merge_requests';
 @import './pages/monitor';
 @import './pages/note_form';

app/assets/stylesheets/pages/merge_conflicts.scss → app/assets/stylesheets/page_bundles/merge_conflicts.scss

+@import 'mixins_and_variables_and_functions';
 // Disabled to use the color map for creating color schemes
 // scss-lint:disable ColorVariable
 $colors: (
@@ -240,14 +241,14 @@ $colors: (
       right: 10px;
       padding: 0;
       outline: none;
-      color: $white;
+      color: var(--white, $white);
       width: 75px; // static width to make 2 buttons have same width
       height: 19px;
     }
   }
 
   .btn-success .fa-spinner {
-    color: $white;
+    color: var(--white, $white);
   }
 
   .editor-wrap {
@@ -263,7 +264,7 @@ $colors: (
 
     &.saved {
       .editor {
-        border-top: solid 2px $green-300;
+        border-top: solid 2px var(--green-300, $green-300);
       }
     }
 
@@ -282,10 +283,10 @@ $colors: (
   }
 
   .discard-changes-alert {
-    background-color: $gray-light;
+    background-color: var(--gray-10, $gray-10);
     text-align: right;
     padding: $gl-padding-top $gl-padding;
-    color: $gl-text-color;
+    color: var(--gl-text-color, $gl-text-color);
 
     .discard-actions {
       display: inline-block;

app/views/projects/merge_requests/conflicts/show.html.haml

 - page_title _("Merge Conflicts"), "#{@merge_request.title} (#{@merge_request.to_reference}", _("Merge Requests")
+- add_page_specific_style 'page_bundles/merge_conflicts'
 - content_for :page_specific_javascripts do
   = page_specific_javascript_tag('lib/ace.js')
 = render "projects/merge_requests/mr_title"

changelogs/unreleased/239852-move-merge-conflicts-to-page-bundle.yml

+---
+title: Add darkmode support for merge conflict page
+merge_request: 44168
+author:
+type: other

config/application.rb

@@ -191,6 +191,7 @@ module Gitlab
     config.assets.precompile << "page_bundles/ide.css"
     config.assets.precompile << "page_bundles/issues.css"
     config.assets.precompile << "page_bundles/jira_connect.css"
+    config.assets.precompile << "page_bundles/merge_conflicts.css"
     config.assets.precompile << "page_bundles/milestone.css"
     config.assets.precompile << "page_bundles/todos.css"
     config.assets.precompile << "page_bundles/xterm.css"