diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
index 147e97b5e..ec3e27a15 100644
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@@ -1,5 +1,5 @@
 // order matters!
-import '../styles/variables.scss';
+import '../styles/variables.css';
 import '../styles/global.less';
 import '../styles/globals.scss';
 // import '../styles/ant-overrides.scss';
diff --git a/web/styles/global.less b/web/styles/global.less
index 50370b927..7282e591c 100644
--- a/web/styles/global.less
+++ b/web/styles/global.less
@@ -1,7 +1,2 @@
-// @import '~antd/dist/antd.less'; // Import Ant Design styles by less entry
-// @import '~antd/dist/antd.less';
 @import '~antd/dist/antd.dark.less'; // Introduce the official dark less style entry file
-@import './theme.less'; // Import owncast theme styles
-
-
-
+@import './theme.less'; // Import ant design theme definition
diff --git a/web/styles/globals.scss b/web/styles/globals.scss
index 72f10f8fb..b979a68c7 100644
--- a/web/styles/globals.scss
+++ b/web/styles/globals.scss
@@ -1,10 +1,18 @@
 // @import "~antd/dist/antd.dark";
 
+:root {
+  // chat variables
+  --header-h: 64px;
+  --chat-w: 300px;
+  --chat-input-h: 40.5px;
+  }
+
+  
 html,
 body {
   padding: 0;
   margin: 0;
-  font-family: var(--font-family);
+  font-family: var(--theme-font-family);
   font-size: 16px;
 
   background-color: var(--default-bg-color);
diff --git a/web/styles/theme.less b/web/styles/theme.less
index 7be06d259..838838e51 100644
--- a/web/styles/theme.less
+++ b/web/styles/theme.less
@@ -1,40 +1,72 @@
-@theme: owncast;
 
-// These overrides are only used for customizing the style of Ant Design
-// components and do not impact any custom components. Therefore CSS variables
-// should be set in a centralized place and used here so changes only need
-// to be made once. See variables.scss.
-
-// Variable names can be found in
-// https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less
-
-// From color palette in variables.scss.
-@green-1: --var(green-100);
-@green-2: --var(green-300);
-@green-3: --var(green-500);
-@green-4: --var(green-700);
-@green-5: --var(green-900);
-
-@purple-1: --var(purple-100);
-@purple-2: --var(purple-300);
-@purple-3: --var(purple-500);
-@purple-4: --var(purple-700);
-@purple-5: --var(purple-900);
-
-// Random colors for testing
-@primary-color: #d62222;
-@text-color: green;
-@text-color-secondary: orange;
-@link-color: #1890ff; // link color
-@success-color: #52c41a; // success state color
-@warning-color: #faad14; // warning state color
-@error-color: #f5222d; // error state color
-@font-size-base: 14px; // major text font size
-@heading-color: rgba(177, 168, 44, 0.85); // heading text color
-@text-color-secondary: rgba(224, 8, 231, 0.45); // secondary text color
-@disabled-color: rgba(134, 123, 123, 0.25); // disable state color
-@border-radius-base: 2px; // major border radius
-@border-color-base: #d9d9d9; // major border color
-@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-  0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers
+// Do not edit directly
+// Generated on Sat, 07 May 2022 06:21:28 GMT
 
+@text-color: var(--theme-text-color);
+@text-color-secondry: var(--theme-text-color-secondary);
+@link-color: var(--theme-link-color);
+@popover-background: var(--theme-background);
+@background-color-light: #f4ebff;
+@primary-color: #9e77ed;
+@info-color: #667085;
+@success-color: #12b76a;
+@warning-color: #f79009;
+@error-color: #f04438;
+@purple-base: #9e77ed;
+@green-base: #12b76a;
+@red-base: #f04438;
+@orange-base: #f79009;
+@theme-primary-color: #9e77ed;
+@theme-text-color: #d0d5dd;
+@theme-text-color-secondary: #667085;
+@theme-link-color: #9e77ed;
+@theme-success-color: #12b76a;
+@theme-info-color: #d6bbfb;
+@theme-warning-color: #f79009;
+@theme-error-color: #f04438;
+@theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';;
+@theme-background: #171523;
+@color-owncast-purple-100: #f4ebff;
+@color-owncast-purple-300: #d6bbfb;
+@color-owncast-purple-500: #9e77ed;
+@color-owncast-purple-700: #6941c6;
+@color-owncast-purple-900: #42307d;
+@color-owncast-green-100: #d15ad5;
+@color-owncast-green-300: #6ce9a6;
+@color-owncast-green-500: #12b76a;
+@color-owncast-green-700: #027a48;
+@color-owncast-green-900: #054f31;
+@color-owncast-red-100: #fee4e2;
+@color-owncast-red-300: #fda29b;
+@color-owncast-red-500: #f04438;
+@color-owncast-red-700: #b42318;
+@color-owncast-red-900: #7a271a;
+@color-owncast-orange-100: #fef0c7;
+@color-owncast-orange-300: #fec84b;
+@color-owncast-orange-500: #f79009;
+@color-owncast-orange-700: #b54708;
+@color-owncast-orange-900: #93370d;
+@color-owncast-gray-100: #f2f4f7;
+@color-owncast-gray-300: #d0d5dd;
+@color-owncast-gray-500: #667085;
+@color-owncast-gray-700: #344054;
+@color-owncast-gray-900: #101828;
+@color-owncast-logo-purple: #7871ff;
+@color-owncast-logo-pink: #c98bfe;
+@color-owncast-logo-blue: #2086e1;
+@color-owncast-background-light: #1b1a26;
+@color-owncast-background: #171523;
+@font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';;
+@owncast-purple: #7871ff;
+@owncast-purple-25: rgba(120, 113, 255, 0.25);
+@owncast-purple-50: rgba(120, 113, 255, 0.5);
+@online-color: #73dd3f;
+@offline-color: #999;
+@pink: #c98bfe;
+@purple: #7871ff;
+@blue: #2086e1;
+@white-88: #667085;
+@purple-dark: rgba(28, 26, 59, 1);
+@default-link-color: #c98bfe;
+@default-bg-color: black;
+@default-text-color: rgba(255, 255, 255, 0.88);
\ No newline at end of file
diff --git a/web/styles/variables.css b/web/styles/variables.css
new file mode 100644
index 000000000..c62259774
--- /dev/null
+++ b/web/styles/variables.css
@@ -0,0 +1,79 @@
+/**
+ * Do not edit directly
+ * Generated on Sat, 07 May 2022 06:21:28 GMT
+ */
+
+:root {
+  --text-color: var(--theme-text-color);
+  --text-color-secondry: var(--theme-text-color-secondary);
+  --link-color: var(--theme-link-color);
+  --popover-background: var(--theme-background);
+  --background-color-light: #f4ebff;
+  --primary-color: #9e77ed;
+  --info-color: #667085;
+  --success-color: #12b76a;
+  --warning-color: #f79009;
+  --error-color: #f04438;
+  --purple-base: #9e77ed;
+  --green-base: #12b76a;
+  --red-base: #f04438;
+  --orange-base: #f79009;
+  --theme-primary-color: #9e77ed;
+  --theme-text-color: #d0d5dd;
+  --theme-text-color-secondary: #667085;
+  --theme-link-color: #9e77ed;
+  --theme-success-color: #12b76a;
+  --theme-info-color: #d6bbfb;
+  --theme-warning-color: #f79009;
+  --theme-error-color: #f04438;
+  --theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --theme-background: #171523;
+  --color-owncast-purple-100: #f4ebff;
+  --color-owncast-purple-300: #d6bbfb;
+  --color-owncast-purple-500: #9e77ed;
+  --color-owncast-purple-700: #6941c6;
+  --color-owncast-purple-900: #42307d;
+  --color-owncast-green-100: #d15ad5;
+  --color-owncast-green-300: #6ce9a6;
+  --color-owncast-green-500: #12b76a;
+  --color-owncast-green-700: #027a48;
+  --color-owncast-green-900: #054f31;
+  --color-owncast-red-100: #fee4e2;
+  --color-owncast-red-300: #fda29b;
+  --color-owncast-red-500: #f04438;
+  --color-owncast-red-700: #b42318;
+  --color-owncast-red-900: #7a271a;
+  --color-owncast-orange-100: #fef0c7;
+  --color-owncast-orange-300: #fec84b;
+  --color-owncast-orange-500: #f79009;
+  --color-owncast-orange-700: #b54708;
+  --color-owncast-orange-900: #93370d;
+  --color-owncast-gray-100: #f2f4f7;
+  --color-owncast-gray-300: #d0d5dd;
+  --color-owncast-gray-500: #667085;
+  --color-owncast-gray-700: #344054;
+  --color-owncast-gray-900: #101828;
+  --color-owncast-logo-purple: #7871ff;
+  --color-owncast-logo-pink: #c98bfe;
+  --color-owncast-logo-blue: #2086e1;
+  --color-owncast-background-light: #1b1a26;
+  --color-owncast-background: #171523;
+  --font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --owncast-purple: #7871ff;
+  --owncast-purple-25: rgba(120, 113, 255, 0.25);
+  --owncast-purple-50: rgba(120, 113, 255, 0.5);
+  --online-color: #73dd3f;
+  --offline-color: #999;
+  --pink: #c98bfe;
+  --purple: #7871ff;
+  --blue: #2086e1;
+  --white-88: #667085;
+  --purple-dark: rgba(28, 26, 59, 1);
+  --default-link-color: #c98bfe;
+  --default-bg-color: black;
+  --default-text-color: rgba(255, 255, 255, 0.88);
+}
diff --git a/web/styles/variables.scss b/web/styles/variables.scss
index 31d7da1f3..d4b2d5c27 100644
--- a/web/styles/variables.scss
+++ b/web/styles/variables.scss
@@ -94,8 +94,4 @@
     'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol', 'Noto Color Emoji';
 
-  // chat variables
-  --header-h: 64px;
-  --chat-w: 300px;
-  --chat-input-h: 40.5px;
-}
+