Add font to the theme

agneym · Mar 1, 2020 · 49eed08 · 49eed08
1 parent 8d7f1d2
commit 49eed08
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/example/src/index.html b/example/src/index.html
@@ -4,14 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>React Editor example</title>
-    <style>
-      body {
-        font-family: Consolas, Menlo, Monaco, source-code-pro, Courier New,
-          monospace;
-        font-feature-settings: normal;
-      }
-    </style>
+    <title>React Playground example</title>
   </head>
 
   <body>

diff --git a/playground/src/Editor/EditorSetup.tsx b/playground/src/Editor/EditorSetup.tsx
@@ -7,9 +7,11 @@ import styled from "styled-components";
 import { IEditorTabs } from "../types";
 
 const StyledSimpleEditor = styled(SimpleEditor)`
-  background-color: #000000;
-  color: #ffffff;
+  background-color: ${props => props.theme.editor.backgroundColor};
+  color: ${props => props.theme.editor.color};
   overflow-y: auto !important;
+  font-family: ${props => props.theme.editor.fontFamily};
+  font-feature-settings: normal;
 `;
 
 interface IProps {

diff --git a/playground/src/utils/theme.ts b/playground/src/utils/theme.ts
@@ -15,7 +15,12 @@ const theme: DefaultTheme = {
   },
   divider: {
     width: 2,
-    background: " #202020",
+    background: "#202020",
+  },
+  editor: {
+    fontFamily: `Consolas, Menlo, Monaco, source-code-pro, Courier New, monospace`,
+    backgroundColor: `#000000`,
+    color: `#ffffff`,
   },
   tabs: {
     tabHeader: {