From 7e1351507acfb75f46e820342c8e01cc8f7370c3 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Tue, 28 Feb 2023 22:17:24 +0100
Subject: [PATCH] add variables to react tailwind config

---
 packages/react/src/components/style.css | 12 ++++++++++++
 packages/react/tailwind.config.js       | 16 +++++++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/style.css b/packages/react/src/components/style.css
index ae33a5d2..150c9837 100644
--- a/packages/react/src/components/style.css
+++ b/packages/react/src/components/style.css
@@ -1,3 +1,15 @@
+:root {
+  --background: #222;
+  --lineBackground: #22222250;
+  --foreground: #fff;
+  --caret: #ffcc00;
+  --selection: rgba(128, 203, 196, 0.5);
+  --selectionMatch: #036dd626;
+  --lineHighlight: #00000050;
+  --gutterBackground: transparent;
+  --gutterForeground: #8a919966;
+}
+
 .cm-editor {
   background-color: transparent !important;
   height: 100%;
diff --git a/packages/react/tailwind.config.js b/packages/react/tailwind.config.js
index f6cae19b..c5a940fc 100644
--- a/packages/react/tailwind.config.js
+++ b/packages/react/tailwind.config.js
@@ -1,7 +1,21 @@
 module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        // codemirror-theme settings
+        background: 'var(--background)',
+        lineBackground: 'var(--lineBackground)',
+        foreground: 'var(--foreground)',
+        caret: 'var(--caret)',
+        selection: 'var(--selection)',
+        selectionMatch: 'var(--selectionMatch)',
+        gutterBackground: 'var(--gutterBackground)',
+        gutterForeground: 'var(--gutterForeground)',
+        gutterBorder: 'var(--gutterBorder)',
+        lineHighlight: 'var(--lineHighlight)',
+      },
+    },
   },
   plugins: [],
   corePlugins: {