Init (Add theme)

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+/.idea/

.idea/.gitignore

@@ -1,5 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/niklas-birk.iml" filepath="$PROJECT_DIR$/.idea/niklas-birk.iml" />
-    </modules>
-  </component>
-</project>

.idea/niklas-birk.iml

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/build" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@nextui-org/react": "^1.0.0-beta.9",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",

src/App.js

@@ -1,8 +1,54 @@
 import logo from './logo.svg';
 import './App.css';
 
+import { createTheme, NextUIProvider } from "@nextui-org/react"
+
+const theme = createTheme({
+  type: "dark", // it could be "light" or "dark"
+  theme: {
+    colors: {
+      // color names
+      draculaBackground: '#282a36',
+      draculaCurrentLine: '#44475a',
+      draculaSelection: '#44475a',
+      draculaForeground: '#f8f8f2',
+      draculaComment: '#6272a4',
+      draculaCyan: '#8be9fd',
+      draculaGreen: '#50fa7b',
+      draculaOrange: '#ffb86c',
+      draculaPink: '#ff79c6',
+      draculaPurple: '#bd93f9',
+      draculaRed: '#ff5555',
+      draculaYellow: '#f1fa8c',
+
+      // brand colors
+      background: '$draculaBackground',
+      text: '$draculaForeground',
+      primaryLight: '$draculaSelection',
+      primaryLightHover: '$draculaComment',
+      primaryLightActive: '$draculaComment',
+      primaryLightContrast: '$draculaComment',
+      primary: '$draculaPurple',
+      primaryBorder: '$draculaPurple',
+      primaryBorderHover: '$draculaPurple',
+      primarySolidHover: '$draculaPurple',
+      primarySolidContrast: '$draculaForeground',
+      primaryShadow: '$draculaPurple',
+
+      gradient: 'linear-gradient(112deg, $draculaCyan -25%, $draculaPink -10%, $draculaPurple 80%)',
+      link: '$draculaPurple',
+    },
+    space: {},
+    fonts: {
+      sans: "'Roboto', 'Fira Sans', 'Helvetica Neue', sans-serif;",
+      mono: "Monaco, 'Liberation Mono'"
+    }
+  }
+})
+
 function App() {
   return (
+      <NextUIProvider theme={theme}>
         <div className="App">
           <header className="App-header">
             <img src={logo} className="App-logo" alt="logo" />
@@ -19,6 +65,7 @@ function App() {
             </a>
           </header>
         </div>
+      </NextUIProvider>
   );
 }