scrollbar theme

src/components/Editor.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { ThemeProvider } from 'styled-components';
+import { ThemeProvider, createGlobalStyle } from 'styled-components';
 import ls from 'local-storage';
 
 import EditorControls from './EditorControls';
@@ -35,6 +35,7 @@ export default function Editor({ content, setContent, contentType }) {
   return (
     <>
       <ThemeProvider theme={themes[theme]}>
+        <EditorGlobalStyle />
         <EditorControls
           code={content}
           setCode={setContent}
@@ -55,6 +56,14 @@ export default function Editor({ content, setContent, contentType }) {
   );
 }
 
+const EditorGlobalStyle = createGlobalStyle`
+  html, body {
+    color-scheme: ${props => props.theme.lightOrDark};
+    scrollbar-color: ${props => props.theme.lightOrDark};
+    background-color: ${props => props.theme.editor.background};
+  }
+`;
+
 // hook used to load "preference" settings from local storage, or fall back to a default value.
 function usePreference(id, defaultValue, valid) {
   const [value, setValue] = useState(() => {

src/style/themes.js

@@ -3,6 +3,7 @@ const themes = {
     primary: '#aaddff',
     secondary: '#022550',
     highlight: '#36368c',
+    lightOrDark: 'light',
 
     editor: {
       background: 'none',
@@ -31,6 +32,7 @@ const themes = {
     primary: '#022550',
     secondary: '#aaddff',
     highlight: '#77c8f9',
+    lightOrDark: 'dark',
 
     editor: {
       background: '#041f29',
@@ -59,6 +61,7 @@ const themes = {
     primary: '#c9d1d9', // fg.default
     secondary: '#010409', // canvas.inset
     highlight: '#161b22', // canvas.overlay
+    lightOrDark: 'dark',
 
     editor: {
       background: '#0d1117', // canvas.default