use theme.light

components/Carbon.js

@@ -99,6 +99,7 @@ class Carbon extends React.PureComponent {
             theme={config.windowTheme}
             code={this.props.children}
             copyable={this.props.copyable}
+            light={config.theme.light}
           />
         ) : null}
         <CodeMirror

components/Themes/index.js

@@ -103,20 +103,6 @@ class Themes extends React.PureComponent {
       ...themes
     ]
 
-    let isColorLight = color => {
-      var r, g, b, hsp
-      color = +("0x" + color.slice(1).replace(color.length < 5 && /./g, '$&$&'))
-      r = color >> 16
-      g = color >> 8 & 255
-      b = color & 255;
-      hsp = Math.sqrt(
-        0.299 * (r * r) +
-        0.587 * (g * g) +
-        0.114 * (b * b)
-      )
-      return hsp > 127.5
-    }
-    
     return (
       <div className="themes">
         <Dropdown
@@ -150,10 +136,6 @@ class Themes extends React.PureComponent {
               background-color: ${highlights.background} !important;
             }
 
-            :global(.window-title-container input) {
-              color: ${isColorLight(highlights.background || "#000000") ? "black" : "white"};
-            }
-
             :global(.cm-string),
             :global(.cm-string-2) {
               color: ${highlights.string} !important;

components/WindowControls.js

@@ -36,7 +36,7 @@ const CopyButton = React.memo(function CopyButton({ text }) {
   )
 })
 
-export default ({ theme, copyable, code }) => (
+export default ({ theme, copyable, code, light }) => (
   <div className="window-controls">
     {theme === 'bw' ? <ControlsBW /> : <Controls />}
     <div className="window-title-container">
@@ -73,6 +73,7 @@ export default ({ theme, copyable, code }) => (
           border: none;
           text-align: center;
           font-size: 14px;
+          color: ${light ? COLORS.BLACK : COLORS.SECONDARY};
         }
 
         .copy-button {