From 296a537b960fe095f0ea7c71bb558b32e8c8af56 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Mon, 22 Jun 2020 23:05:42 -0700
Subject: [PATCH] feat: Start working on dark mode variables

---
 src/components/Layout.js |  1 +
 src/theme.scss           | 41 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 src/theme.scss

diff --git a/src/components/Layout.js b/src/components/Layout.js
index 22b2b4d0c..af75b4793 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -9,6 +9,7 @@ import Sidebar from './Sidebar';
 import styles from './Layout.module.scss';
 import 'normalize.css';
 import './styles.scss';
+import '../theme.scss';
 
 const Layout = ({ children }) => {
   const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
diff --git a/src/theme.scss b/src/theme.scss
new file mode 100644
index 000000000..47bfdd2a9
--- /dev/null
+++ b/src/theme.scss
@@ -0,0 +1,41 @@
+.light-mode {
+  --primary-background: var(--color-white);
+  --primary-text-color: var(--color-neutrals-700);
+  --primary-button-background-color: var(--color-brand-800);
+
+  --secondary-background-color: var(--color-neutrals-100);
+  --secondary-text-color: var(--color-neutrals-600);
+  --secondary-button-background-color: var(--color-white);
+  --secondary-button-text-color: var(--color-brand-800);
+
+  --link-color: var(--color-brand-800);
+  --border-color: var(--color-neutrals-400);
+  --divider-color: var(--color-neutrals-100);
+}
+
+.dark-mode {
+  --color-neutrals-050: #131f23;
+  --color-neutrals-100: #22353c;
+  --color-neutrals-200: #233940;
+  --color-neutrals-300: #2a4249;
+  --color-neutrals-400: #37484e;
+  --color-neutrals-500: #495b5c;
+  --color-neutrals-600: #7c9799;
+  --color-neutrals-700: #a5bbbd;
+  --color-neutrals-800: #cedede;
+  --color-neutrals-900: #e8eaea;
+
+  --primary-background-color: #1c2a2f;
+  --primary-text-color: var(--color-white);
+  --primary-button-background-color: var(--color-brand-800);
+  --primary-button-text-color: var(--color-brand-800);
+
+  --secondary-background-color: var(--color-neutrals-100);
+  --secondary-text-color: var(--color-neutrals-600);
+  --secondary-button-background-color: var(--color-white);
+  --secondary-button-text-color: var(--color-brand-800);
+
+  --link-color: var(--color-brand-400);
+  --border-color: var(--color-neutrals-300);
+  --divider-color: var(--color-neutrals-200);
+}