Start on admin dark theme. Closes #1904

web/public/styles/admin/main-layout.css

@@ -1,3 +1,64 @@
+/* NOTE: This is used for the admin only! */
+
+@media (prefers-color-scheme: dark) {
+	/* Admin dark mode. Right now this is just adjusting the colors
+	to be darker. This is petty ugly but it's as good as we have for now. We
+	can look more into this after we upgrade to Ant Design v5
+	https://github.com/owncast/owncast/issues/2359 */
+
+	:root {
+		--theme-color-background-main: #1e2e3a;
+	}
+
+	.ant-layout {
+		color: white;
+    background-color: #172027;
+	}
+
+	.ant-btn, .ant-card-meta-title, .ant-typography, .stream-info-box, .ant-card, .ant-card-meta-description, .section-title, .formfield-container .formfield-label, .field-tip, .description{
+		color: rgba(255, 255, 255, 0.78) !important;
+	}
+
+	h2.ant-typography, div.ant-typography-h2, div.ant-typography-h2 > textarea, .ant-typography h2 {
+		color: white !important;
+	}
+
+  img {
+    opacity: .75;
+    transition: opacity .5s ease-in-out;
+  }
+
+  img:hover {
+    opacity: 1;
+  }
+
+}
+
+
+body {
+    margin: 0;
+    color: #ddd;
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    background-color: #222629;
+    font-feature-settings: "tnum";
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin-top: 0;
+    margin-bottom: 0.5em;
+    color: #fff;
+    font-weight: 500;
+}
+}
+
+
 .app-container .side-nav {
   position: fixed;
   height: 100vh;

web/style-definitions/tokens/color/antd-overrides.yaml

@@ -1,6 +1,6 @@
 # Ant Design component color overrides.
 # You can find the variable names to override at:
-# https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less
+# https://github.com/ant-design/ant-design/blob/4.x-stable/components/style/themes/dark.less (for ant v4)
 
 link-color:
   value: 'var(--theme-color-action)'