Add styling to allow for scrollbars to be themed in Chrome (#1233)

closes
RaspberryPiFoundation/digital-editor-issues#776

Author: jamiebenstead

CHANGELOG.md

@@ -20,6 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Improved status bar styling (#1221)
 - Added horizontal scrollbar to editor (#1228)
+- Add theme for scrollbars (#1233)
 
 ## [0.30.1] - 2025-06-09
 

src/assets/stylesheets/App.scss

@@ -30,6 +30,8 @@ input {
   background-color: $rpf-teal-100;
   color: $rpf-text-primary;
   caret-color: $rpf-black;
+  color-scheme: light;
+
 
   .pythonrunner-input {
     color: rgb(36, 103, 236);
@@ -44,6 +46,7 @@ input {
   background-color: $rpf-grey-900;
   color: $rpf-white;
   caret-color: $rpf-white;
+  color-scheme: dark;
 
   .pythonrunner-input {
     color: rgb(36, 186, 236);

src/assets/stylesheets/EditorPanel.scss

@@ -1,6 +1,13 @@
 @use "./rpf_design_system/spacing" as *;
 @use "./rpf_design_system/font-size" as *;
 
+// Scrollbar-width is needed from scrollbar to show in Chrome
+.editor-wrapper {
+  // Needed here for vertical scroll
+  overflow: auto;
+  scrollbar-width: thin;
+}
+
 .editor {
   display: flex;
   flex-flow: column;
@@ -16,6 +23,7 @@
     }
 
     .cm-scroller {
+      // Needed here for horizontal scroll
       overflow: auto;
       scrollbar-width: thin;
       overscroll-behavior-x: none;

src/components/Editor/EditorPanel/EditorPanel.jsx

@@ -164,7 +164,7 @@ const EditorPanel = ({ extension = "html", fileName = "index" }) => {
   }, [file, cascadeUpdate, editorViewRef]);
 
   return (
-    <>
+    <div className="editor-wrapper">
       <div className={`editor editor--${settings.fontSize}`} ref={editor}></div>
       {characterLimitExceeded && (
         <Alert
@@ -175,7 +175,7 @@ const EditorPanel = ({ extension = "html", fileName = "index" }) => {
           })}
         />
       )}
-    </>
+    </div>
   );
 };