change mdxEditor popup input background color

DINHaus · Apr 5, 2024 · 6f02abb · 6f02abb
1 parent 2c67b92
commit 6f02abb
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,8 +1,12 @@
 #root {
-	margin: 0 auto;
+  margin: 0 auto;
 }
 
 .mdxeditor-select-content,
 .mdxeditor-popup-container {
-	color: gray;
+  color: gray;
+}
+
+.mdxeditor-popup-container input {
+  background-color: hsl(228, 43.3%, 17.5%);
 }
diff --git a/src/components/customFields/MDXEditorField.tsx b/src/components/customFields/MDXEditorField.tsx
@@ -19,15 +19,17 @@ import {
 } from "@mdxeditor/editor";
 import "@mdxeditor/editor/style.css";
 import styled from "styled-components";
-
 import { LinkStyles } from "@daohaus/ui";
 
 const MarkDownContainer = styled.div`
   padding: 10px;
   margin-bottom: 5rem;
   border-radius: 5px;
-  background-color: hsl(228, 43.3%, 17.5%); // TODO: use theme
-  font-family: inherit;
+  background-color: ${({ theme }) => theme.input.bg};
+  color: ${({ theme }) => theme.input.color};
+  font-size: ${({ theme }) => theme.field.fontSize};
+  font-weight: ${({ theme }) => theme.field.fontWeight};
+  font-family: ${({ theme }) => theme.field.inputFont};
   min-height: 10vh;
   max-height: 50vh;
   overflow: auto;