Tweak colors for CKEditor elements

The goal is to make CKEditor more consistent with other elements, especially when in dark mode.
bestpractical · Feb 14, 2025 · 5c574af · 5c574af
1 parent a8eb916
commit 5c574af
Showing 1 changed file with 45 additions and 23 deletions.
diff --git a/share/static/css/elevator/ckeditor5.css b/share/static/css/elevator/ckeditor5.css
@@ -16,6 +16,48 @@ div.messagebox-container.action-private div.ck-editor__editable_inline {
 :root {
     /* Set the CKEditor border radius the same as bootstrap */
     --ck-border-radius: var(--bs-border-radius) !important;
+
+    /* Set the border color for editor content */
+    --ck-color-focus-border: #5c6273 !important;
+
+    /* Unset shadow for focused buttons */
+    --ck-focus-outer-shadow: none !important;
+
+    /* Drop the blue border around the CKEditor logo */
+    --ck-powered-by-border-color: transparent !important;
+}
+
+:root[data-bs-theme=dark] {
+    /* Set border color for toolbar */
+    --ck-color-base-border: #717171 !important;
+
+    /* Set background for toolbar lists/buttons */
+    --ck-color-list-background: #2C3539 !important;
+    --ck-color-button-on-background: #2C3539 !important;
+    --ck-color-button-default-hover-background: #2C3539 !important;
+    --ck-color-button-on-hover-background: #2C3539 !important;
+    --ck-color-button-default-active-background: #2C3539 !important;
+
+    /* Set background for label fields like "HEX" in color picker input */
+    --ck-color-labeled-field-label-background: #2C3539 !important;
+
+    /* Set background for dialogs like "Insert Media" */
+    --ck-color-dialog-background: #2C3539 !important;
+    --ck-color-input-background: #2C3539 !important;
+
+    /* Set color for dropdown items Paragraph, Font Size, etc. */
+    --ck-color-text: #ededed !important;
+
+    /* Set border color for panels like "Link" */
+    --ck-color-panel-border: #2c3539 !important;
+}
+
+[data-bs-theme=light] {
+    /* Somehow setting var(--ck-focus-ring) doesn't work in light mode, here we set border explicitly */
+    .ck.ck-button:active, .ck.ck-button:focus,
+    a.ck.ck-button:active, a.ck.ck-button:focus {
+        border: 1px solid #c0c7d1;
+    }
 }
 
 [data-bs-theme=dark] {
@@ -25,32 +67,12 @@ div.messagebox-container.action-private div.ck-editor__editable_inline {
 
     .ck-editor .ck-editor__top * {
         background-color: #2C3539;
-        color: #ededed;
     }
 
-    .ck.ck-list__item .ck-button.ck-on:not(.ck-disabled),
-    .ck.ck-list__item .ck-button.ck-off:not(.ck-disabled),
-    .ck.ck-list__item .ck-button.ck-on:hover:not(.ck-disabled),
-    .ck.ck-list__item .ck-button.ck-off:hover:not(.ck-disabled),
-    .ck.ck-list__item .ck-button.ck-on:not(.ck-disabled) *,
-    .ck.ck-list__item .ck-button.ck-off:not(.ck-disabled) *,
-    .ck.ck-list__item .ck-button.ck-on:hover:not(.ck-disabled) *,
-    .ck.ck-list__item .ck-button.ck-off:hover:not(.ck-disabled) *,
-    .ck.ck-splitbutton.ck-splitbutton_open>.ck-button:not(.ck-on):not(.ck-disabled):not(:hover),
-    .ck.ck-splitbutton:hover>.ck-button:not(.ck-on):not(.ck-disabled):not(:hover),
-    .ck.ck-button.ck-on, a.ck.ck-button.ck-on,
-    .ck.ck-button.ck-on:not(.ck-disabled):hover, a.ck.ck-button.ck-on:not(.ck-disabled):hover,
-    .ck.ck-button:not(.ck-disabled):active, a.ck.ck-button:not(.ck-disabled):active,
-    .ck.ck-button:not(.ck-disabled):hover, a.ck.ck-button:not(.ck-disabled):hover {
+    /* Set color for "Link" panel */
+    div.ck.ck-balloon-rotator {
         background-color: #2C3539;
-    }
-
-    .ck.ck-list__item .ck-button.ck-on:focus:not(.ck-switchbutton):not(.ck-disabled) {
-        border-color: #2c3539;
-    }
-
-    .ck.ck-list__item .ck-button.ck-off:focus:not(.ck-switchbutton):not(.ck-disabled) {
-        border-color: #ededed;
+        border-radius: 3px; /* Avoid inner background color from leaking into parent */
     }
 
     div.ck.ck-editor__main span * {