diff --git a/ui/components/demos/typing.js b/ui/components/demos/typing.js
index 4429ae2..725c9a3 100644
--- a/ui/components/demos/typing.js
+++ b/ui/components/demos/typing.js
@@ -5,11 +5,6 @@ import styled from 'styled-components'
 import MediaQuery from '../../kit/media'
 
 const Outer = styled.div`
-  --not-quite-black: #23272A;
-  --dark-but-not-black: #2C2F33;
-  --greyple: #99AAB5;
-  --blurple: var(--c-discord);
-
   background-color: var(--dark-but-not-black);
   padding: 10px;
   text-align: left;
diff --git a/ui/components/global-colors.js b/ui/components/global-colors.js
index 02a6b43..9ac9735 100644
--- a/ui/components/global-colors.js
+++ b/ui/components/global-colors.js
@@ -44,6 +44,10 @@ body {
 
 :root {
   ${() => getColors()}
+  --not-quite-black: #23272A;
+  --dark-but-not-black: #2C2F33;
+  --greyple: #99AAB5;
+  --blurple: var(--c-discord);
 }
 
 ::selection {