[#1924] Dark theme fixes

src/openforms/js/components/admin/form_design/Editor.js

@@ -9,14 +9,22 @@ const TinyMCEEditor = ({content, onEditorChange}) => {
   const editorRef = useRef(null);
   const tinyMceUrl = useContext(TinyMceContext);
   const intl = useIntl();
+  // TODO Django 4.2: use explicit theme names rather than the media query approach:
+  // https://github.com/django/django/blob/main/django/contrib/admin/static/admin/css/dark_mode.css#L36
+  const useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
   return (
     <>
       <Editor
         tinymceScriptSrc={tinyMceUrl}
         onInit={(evt, editor) => (editorRef.current = editor)}
         value={content}
-        init={{...tinyMceConfig, language: intl.locale}}
+        init={{
+          ...tinyMceConfig,
+          language: intl.locale,
+          skin: useDarkMode ? 'oxide-dark' : 'oxide',
+          content_css: useDarkMode ? 'dark' : 'default',
+        }}
         onEditorChange={onEditorChange}
       />
     </>

src/openforms/scss/components/admin/_ReactModal.scss

@@ -20,8 +20,8 @@
     position: absolute;
     width: 50vw;
     height: 50vh;
-    background: white;
-    border: solid 1px #eee;
+    background: var(--body-bg);
+    border: 1px solid var(--hairline-color);
     border-radius: 0;
     outline: none;
     padding: 20px;

src/openforms/scss/components/admin/_sdk-snippet.scss

@@ -3,11 +3,15 @@
     display: inline-block;
     padding-top: 10px;
     padding-bottom: 10px;
-    background-color: #efefef;
+    background-color: var(--form-input-bg);
+    border-style: solid;
+    border-width: thin;
+    border-color: var(--border-color);
 
     pre {
       font-size: 100%;
       margin-bottom: 0;
+      color: var(--body-fg);
     }
   }
 

src/openforms/scss/components/builder/_admin-fixes.scss

@@ -1,4 +1,5 @@
 @import '~microscope-sass/lib/color';
+@import '~microscope-sass/lib/typography';
 
 @import '../../vars';
 
@@ -35,3 +36,7 @@ div#content h1 {
   color: $color-danger;
   font-weight: bold;
 }
+
+.formio-button-add-another:not(:hover) {
+  color: var(--body-fg) !important;
+}

src/openforms/scss/components/builder/_builder.scss

@@ -69,35 +69,33 @@ div.flatpickr-calendar.open {
   padding-top: 10px;
 }
 
-[ref='editForm'] {
-  .choices__list {
-    &--dropdown {
-      background-color: var(--body-bg);
-      color: var(--body-fg);
-      border-color: var(--border-color);
-    }
-
-    .choices__input {
-      background-color: var(--form-input-bg);
-      border-color: var(--border-color);
-    }
-
-    .choices__item--selectable.is-highlighted {
-      background-color: var(--formio-dropdown-highlighted-bg);
-    }
+.choices__list {
+  &--dropdown {
+    background-color: var(--body-bg);
+    color: var(--body-fg);
+    border-color: var(--border-color);
   }
 
-  .choices__list + .choices__input {
-    border: none;
-    border-radius: unset;
-    padding: 4px 0 4px 2px;
+  .choices__input {
+    background-color: var(--form-input-bg) !important;
+    border-color: var(--border-color) !important;
   }
 
-  .choices__list:not(:empty) + .choices__input {
-    width: 1ch;
+  .choices__item--selectable.is-highlighted {
+    background-color: var(--formio-dropdown-highlighted-bg);
   }
 }
 
+.choices__list + .choices__input {
+  border: none;
+  border-radius: unset;
+  padding: 4px 0 4px 2px;
+}
+
+.choices__list:not(:empty) + .choices__input {
+  width: 1ch;
+}
+
 .builder-sidebar_scroll {
   top: 100px;
 }

src/openforms/scss/components/builder/_formio-component-file.scss

@@ -0,0 +1,6 @@
+.formio-component-file {
+  .list-group-item {
+    background-color: var(--body-bg);
+    border-color: var(--hairline-color);
+  }
+}

src/openforms/scss/components/builder/_index.scss

@@ -4,5 +4,8 @@
 // fixes of styling broken by django admin styling
 @import 'formio-component-checkbox';
 
+// Fix for dark theme
+@import 'formio-component-file';
+
 @import 'columns';
 @import 'openforms-component';

src/openforms/scss/components/builder/_openforms-component.scss

@@ -1,3 +1,5 @@
+@import '~microscope-sass/lib/typography';
+
 @import '../../../ui/static/ui/scss/settings';
 @import '../../vars';
 
@@ -14,6 +16,10 @@
       $color-tooltip-background 20px
     );
 
+    legend {
+      @include h2(auto);
+    }
+
     label {
       color: $color_dark;
     }
@@ -22,4 +28,12 @@
       opacity: 0.9;
     }
   }
+
+  .ck-editor__main {
+    // TODO: Formio uses CKEditor5, but using their dark theme seems more complex than for the tinymce.
+    // So for now we keep the default theme, but ensure that the text in the editor is dark and not light.
+    @media (prefers-color-scheme: dark) {
+      color: $color-dark;
+    }
+  }
 }

src/openforms/scss/vendor/_rjsf-field.scss

@@ -25,6 +25,11 @@
     input[type='email'] {
       width: $input-field-size; // override from admin/rjsf default
     }
+
+    select {
+      background-color: var(--form-input-bg) !important;
+      border-color: var(--border-color) !important;
+    }
   }
 
   &__errors {