Fixed light theme for tracing view. Closes #254

Author: timsuchanek

packages/graphql-playground/src/components/Playground/GraphQLEditor.tsx

@@ -38,7 +38,7 @@ import Results from './Results'
 import ReponseTracing from './ResponseTracing'
 import GenerateCodeButton from './GenerateCodeButton'
 import withTheme from '../Theme/withTheme'
-import { ThemeInterface } from '../Theme/index'
+import { LocalThemeInterface } from '../Theme/index'
 
 /**
  * The top-level React component for GraphQLEditor, intended to encompass the entire
@@ -137,7 +137,7 @@ export interface ToolbarButtonProps extends SimpleProps {
 }
 
 export class GraphQLEditor extends React.PureComponent<
-  Props & ThemeInterface,
+  Props & LocalThemeInterface,
   State
 > {
   static Logo: (props: SimpleProps) => JSX.Element

packages/graphql-playground/src/components/Playground/ResponseTracing.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react'
-import styled from 'styled-components'
 import { $v } from 'graphcool-styles'
 import TracingRow from './TracingRow'
+import * as theme from 'styled-theming'
+import styled from '../../styled/styled'
 
 export interface TracingFormat {
   version: 1
@@ -27,10 +28,15 @@ export interface Props {
   endTime?: Date
 }
 
+const textColor = theme('mode', {
+  light: p => p.theme.colours.darkBlue60,
+  dark: p => p.theme.colours.white,
+})
+
 const TracingWrapper = styled.div`
   padding-top: 16px;
   padding-left: 25px;
-  color: white;
+  color: ${textColor};
   overflow: auto;
 `
 

packages/graphql-playground/src/components/Playground/TracingRow.tsx

@@ -1,12 +1,23 @@
 import * as React from 'react'
-import styled from 'styled-components'
+import * as theme from 'styled-theming'
+import styled from '../../styled/styled'
+
+const textColor = theme('mode', {
+  light: p => p.theme.colours.darkBlue60,
+  dark: p => p.theme.colours.white,
+})
+
+const durationColor = theme('mode', {
+  light: p => p.theme.colours.darkBlue50,
+  dark: p => p.theme.colours.white60,
+})
 
 const Row = styled.div`
   position: relative;
   font-size: 12px;
   display: table;
 
-  color: white;
+  color: ${textColor};
 `
 
 const Bar = styled.span`
@@ -16,12 +27,12 @@ const Bar = styled.span`
   height: 1.5px;
   bottom: 4px;
 
-  background: white;
+  background: ${textColor};
 `
 
 const Duration = styled.span`
   font-size: 10px;
-  color: rgba(255, 255, 255, 0.5);
+  color: ${durationColor};
 `
 
 const NameWrapper = styled.span`

packages/graphql-playground/src/styled/theme.ts

@@ -7,6 +7,7 @@ export interface Colours {
   darkBlue10: string
   white60: string
   white20: string
+  white: string
   black40: string
   paleText: string
   paleGrey: string
@@ -21,6 +22,7 @@ export const colours: Colours = {
   darkBlue10: 'rgba(23, 42, 58, 0.1)',
   white20: 'rgba(255, 255, 255, 0.2)',
   white60: 'rgba(255, 255, 255, 0.6)',
+  white: 'rgba(255, 255, 255, 1)',
   black40: 'rgba(0, 0, 0, 0.4)',
 
   paleText: 'rgba(0, 0, 0, 0.5)',