diff --git a/packages/graphql-playground-react/src/components/Playground/Results.tsx b/packages/graphql-playground-react/src/components/Playground/Results.tsx
index 054db00f1..eec3122ce 100644
--- a/packages/graphql-playground-react/src/components/Playground/Results.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/Results.tsx
@@ -135,14 +135,14 @@ const SubscriptionTime = styled.div`
     content: '';
     top: 9px;
     left: 95px;
-    border-top: 1px solid ${p => p.theme.colours.white20};
+    border-top: 1px solid
+      ${p => p.theme.editorColours.subscriptionTimeBoaderTop};
   }
 `
 
 const SubscriptionTimeText = styled.div`
-  color: rgba(23, 42, 58, 1);
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.5);
+  color: ${p => p.theme.editorColours.subscriptionTimeText};
   padding-left: 15px;
 `
 
diff --git a/packages/graphql-playground-react/src/styled/theme.ts b/packages/graphql-playground-react/src/styled/theme.ts
index 8c5d74954..4653a6a1d 100644
--- a/packages/graphql-playground-react/src/styled/theme.ts
+++ b/packages/graphql-playground-react/src/styled/theme.ts
@@ -94,6 +94,8 @@ export interface EditorColours {
   buttonWorkspaceHover: string
   buttonWorkspaceText: string
   circle: string
+  subscriptionTimeBoaderTop: string
+  subscriptionTimeText: string
 }
 
 export const darkColours: Colours = {
@@ -227,6 +229,8 @@ export const darkEditorColours: EditorColours = {
   buttonWorkspaceHover: '#a4acb2',
   buttonWorkspaceText: 'rgb(23, 42, 58)',
   circle: 'rgba(255, 255, 255, 0.4)',
+  subscriptionTimeBoaderTop: 'rgba(255, 255, 255, 0.2)',
+  subscriptionTimeText: 'rgba(255, 255, 255, 0.5)',
 }
 
 export const lightEditorColours: EditorColours = {
@@ -283,6 +287,8 @@ export const lightEditorColours: EditorColours = {
   buttonWorkspaceHover: 'rgb(157, 166, 173)',
   buttonWorkspaceText: 'rgb(238, 239, 240)',
   circle: 'rgba(23,42,58,.4)',
+  subscriptionTimeBoaderTop: 'rgba(23, 42, 58, 0.2)',
+  subscriptionTimeText: 'rgba(23, 42, 58, 0.5)',
 }
 
 export interface Sizes {