fix readability issues with white themes (codesandbox#1706)

* fix readibility issues with white themes

* fix github

* remove duplicate

* revert terminal changes

* fix icons

* fix flicker

* fix lint

* Update packages/app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme.js

Co-Authored-By: SaraVieira <[email protected]>

* Update packages/app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme.js

Co-Authored-By: SaraVieira <[email protected]>

Author: SaraVieira

packages/app/src/app/components/Alert/elements.js

@@ -13,7 +13,6 @@ export const Title = styled.div`
   justify-content: center;
   font-weight: 500;
   font-size: 1.125rem;
-  color: rgba(255, 255, 255, 0.9);
   margin-top: 0 !important;
   margin-bottom: 1rem;
   text-transform: uppercase;

packages/app/src/app/components/Alert/index.js

@@ -3,9 +3,9 @@ import React from 'react';
 import { Button } from '@codesandbox/common/lib/components/Button';
 import { Container, Title, Text, Buttons } from './elements';
 
-function Alert({ title, body, onCancel, onDelete }) {
+function Alert({ title, body, onCancel, onDelete, ...props }) {
   return (
-    <Container>
+    <Container {...props}>
       <Title>{title}</Title>
       <Text>{body}</Text>
       <Buttons>

packages/app/src/app/components/CodeEditor/VSCode/Configuration/elements.ts

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
   padding: 1rem;
-  color: rgba(255, 255, 255, 0.8);
+  color: ${props => props.theme['sideBar.foreground'] || 'inherit'};
   box-sizing: border-box;
   max-height: 100%;
   overflow: auto;
@@ -12,7 +12,7 @@ export const Title = styled.h1`
   display: inline-block;
   font-weight: 600;
   font-size: 1.25rem;
-  color: rgba(255, 255, 255, 0.8);
+  color: ${props => props.theme['sideBar.foreground'] || 'inherit'};
   text-transform: uppercase;
   margin-top: 0;
   margin-bottom: 0;
@@ -23,7 +23,5 @@ export const Title = styled.h1`
 export const Description = styled.p`
   font-size: 1;
   line-height: 1.4;
-
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
+  color: ${props => props.theme['sideBar.foreground'] || 'inherit'};
 `;

packages/app/src/app/components/CodeEditor/VSCode/MonacoReactComponent.js

@@ -85,8 +85,6 @@ class MonacoEditor extends React.PureComponent {
         r('vs/platform/instantiation/common/instantiation'),
       ];
 
-      document.getElementById('root').className += ' monaco-shell vs-dark';
-
       const container = document.createElement('div');
       const part = document.createElement('div');
       container.appendChild(part);
@@ -174,6 +172,7 @@ class MonacoEditor extends React.PureComponent {
 
             // After initializing monaco editor
             this.editorDidMount(editorApi, context.monaco);
+            document.getElementById('root').className += ` monaco-shell`;
           });
         }
       );

packages/app/src/app/components/Preview/DevTools/Terminal/terminal-theme.js

@@ -53,7 +53,7 @@ type XTermTheme = {
 export default function getTerminalTheme(theme: VSTheme): XTermTheme {
   return {
     background:
-      theme.vscodeTheme.colors['panel.background'] || theme.background2(),
+      theme.vscodeTheme.colors['terminal.background'] || theme.background2(),
     black: theme.vscodeTheme.colors['terminal.ansiBlack'],
     blue: theme.vscodeTheme.colors['terminal.ansiBlue'],
     brightBlack: theme.vscodeTheme.colors['terminal.ansiBrightBlack'],
@@ -74,5 +74,7 @@ export default function getTerminalTheme(theme: VSTheme): XTermTheme {
     white: theme.vscodeTheme.colors['terminal.ansiWhite'],
     yellow: theme.vscodeTheme.colors['terminal.ansiYellow'],
     selection: theme.vscodeTheme.colors['terminal.selectionBackground'],
+    cursor: theme.vscodeTheme.colors['terminalCursor.foreground'],
+    cursorAccent: theme.vscodeTheme.colors['terminalCursor.background'],
   };
 }

packages/app/src/app/index.html

@@ -82,7 +82,7 @@
         height="0" width="0" style="display:none;visibility:hidden"></iframe>
     </noscript>
     <!-- End Google Tag Manager (noscript) -->
-    <div class="vs-dark" id="root">
+    <div id="root">
     </div>
   </body>
 </html>

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/index.js

@@ -311,6 +311,14 @@ class DirectoryEntry extends React.Component {
               width={400}
             >
               <Alert
+                css={`
+                  background-color: ${props =>
+                    props.theme['sideBar.background'] || 'auto'};
+                  color: ${props =>
+                    props.theme.light
+                      ? 'rgba(0,0,0,0.9)'
+                      : 'rgba(255,255,255,0.9)'};
+                `}
                 title="Delete File"
                 body={
                   <span>

packages/app/src/app/pages/Sandbox/Editor/Workspace/Git/Changes/elements.js

@@ -11,7 +11,7 @@ export const Entry = styled(EntryContainer)`
   display: flex;
   align-items: center;
   line-height: 1;
-
+  color: ${props => props.theme.vscodeTheme.colors['editor.foreground']};
   ${({ hideColor }) =>
     hideColor &&
     css`

packages/app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme.js

@@ -97,10 +97,22 @@ const findTheme = async (themeName, customTheme) => {
   };
 };
 
+const classnames = {
+  dark: 'vs-dark',
+  light: 'vs',
+  hc: 'hc-black',
+};
+
 export default async function getTheme(themeName, customTheme) {
   const foundTheme = await findTheme(themeName, customTheme);
   // Explicitly check for dark as that is the default
   const isLight = foundTheme.type !== 'dark' && foundTheme.type !== 'hc';
+  // We need to set this so VSCode knows that the last known theme is the right one. This prevents
+  // flickering for light themes.
+  document.body.classList.remove('vs');
+  document.body.classList.remove('vs-dark');
+  document.body.classList.remove('hc-black');
+  document.body.classList.add(classnames[foundTheme.type] || 'vs');
 
   const colors = {
     ...(isLight ? vs : vsDark),

packages/common/src/templates/configuration/elements.ts

@@ -25,15 +25,16 @@ export const ConfigName = styled.span`
   flex: 1;
   font-weight: 400;
 
-  color: rgba(255, 255, 255, 0.8);
+  color: ${props => props.theme['sideBar.foreground'] || 'inherit'};
 `;
 
 export const ConfigValue = styled.div``;
 
 export const ConfigDescription = styled.div`
   margin-top: 0.25rem;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.5);
+  color: ${props => props.theme['sideBar.foreground'] || 'inherit'};
+  opacity: 0.8;
   font-size: 0.875rem;
   max-width: 75%;
 `;