diff --git a/stylesheets/_lightbox.scss b/stylesheets/_lightbox.scss
index 0e454af01..22a1af32c 100644
--- a/stylesheets/_lightbox.scss
+++ b/stylesheets/_lightbox.scss
@@ -33,18 +33,18 @@
   }
 
   &:hover {
-    background: var(--color-gray-color);
+    background: var(--gray-color);
   }
 
   &.save {
     &:before {
-      @include color-svg('../images/save.svg', white);
+      @include color-svg('../images/save.svg', var(--white-color));
     }
   }
 
   &.close {
     &:before {
-      @include color-svg('../images/x.svg', white);
+      @include color-svg('../images/x.svg', var(--white-color));
     }
   }
 }
diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx
index 03ab0bc63..a73ce0254 100644
--- a/ts/themes/SessionTheme.tsx
+++ b/ts/themes/SessionTheme.tsx
@@ -4,45 +4,12 @@ import { createGlobalStyle } from 'styled-components';
 import { classicLight } from './';
 import { declareCSSVariables, THEME_GLOBALS } from './globals';
 
-export const whiteColor = '#ffffff';
 const whiteColorRGB = '255, 255, 255'; // we need rgb values if we want css variables within rgba
-const blackColor = '#000000';
-const blackColorRGB = '0, 0, 0'; // we need rgb values if we want css variables within rgba
-const warning = '#e7b100';
-const destructive = '#ff453a';
-const destructiveAltColor = '#ff4538';
 const destructiveAltColorRGB = '255, 69, 56';
-const accentLightTheme = '#00e97b';
-const accentDarkTheme = '#00f782';
-const borderLightThemeColor = '#f1f1f1';
-const borderDarkThemeColor = '#ffffff0F';
 
 // THEME INDEPEDENT COLORS
 const avatarBorderColor = '#00000059';
 
-// Blacks
-
-// Blues
-const lightBlueColor = '#a2d2f4';
-const darkBlueColor = '#2090ea';
-
-// Greens
-const sessionGreenColor = accentDarkTheme;
-
-// Grays
-const grayColor = '#616161';
-const grayColorRBG = '97, 97, 97';
-const lightGrayColor = '#8b8e91';
-const lighterGrayColor = '#e9e9e9';
-const lightestGrayColor = '#f3f3f3';
-const darkGrayColor = '#414347';
-const darkGrayColorRGB = '65, 67, 71';
-const darkerGrayColor = '#2f2f2f';
-const darkestGrayColor = '#17191d';
-
-// Transparent
-const transparentColor = 'transparent';
-
 // default to classic light theme
 export const SessionGlobalStyles = createGlobalStyle`
   html {
@@ -83,37 +50,9 @@ export const SessionGlobalStyles = createGlobalStyle`
     --search-input-height: 34px;
 
     /* COLORS NOT CHANGING BETWEEN THEMES */
-    --color-black-color: ${blackColor};
-    --color-black-color-rgb: ${blackColorRGB};
-    --color-light-black-color: ${`rgba(${blackColorRGB}, 0.2)`};
-    --color-lighter-black-color: ${`rgba(${blackColorRGB}, 0.15)`};
-    --color-darkest-black-color: ${`rgba(${blackColorRGB}, 0.6)`};
-    --color-session-green-color: ${sessionGreenColor};
 
-    --color-white-color: ${whiteColor};
     --color-white-color-rgb: ${whiteColorRGB};
-    --color-lighter-white-color: ${`rgba(${whiteColorRGB}, 0.15)`};
-    --color-darkest-white-color: ${`rgba(${whiteColorRGB}, 0.85)`};
-
-    --color-gray-color: ${grayColor};
-    --color-gray-color-rgb: ${grayColorRBG};
-    --color-light-gray-color: ${lightGrayColor};
-    --color-lighter-gray-color: ${lighterGrayColor};
-    --color-lightest-gray-color: ${lightestGrayColor};
-    --color-dark-gray-color: ${darkGrayColor};
-    --color-dark-gray-color-rgb: ${darkGrayColorRGB};
-    --color-darker-gray-color: ${darkerGrayColor};
-    --color-darkest-gray-color: ${darkestGrayColor};
-    --color-light-blue-color: ${lightBlueColor};
-    --color-dark-blue-color: ${darkBlueColor};
-    --color-transparent-color: ${transparentColor};
-
-    --color-warning:  ${warning};
-    --color-destructive:  ${destructive};
-    --color-destructive-alt:  ${destructiveAltColor};
     --color-destructive-alt-rgb: ${destructiveAltColorRGB};
-    /* COLORS */
-
     --color-avatar-border-color: ${avatarBorderColor};
 
     /* New Theme */
diff --git a/ts/themes/constants/colors.tsx b/ts/themes/constants/colors.tsx
index fbafa6ebd..996637788 100644
--- a/ts/themes/constants/colors.tsx
+++ b/ts/themes/constants/colors.tsx
@@ -23,6 +23,7 @@ type Colors = {
   TRANSPARENT: string;
   WHITE: string;
   BLACK: string;
+  GREY: string;
 };
 
 // Session Brand Color
@@ -59,6 +60,9 @@ const white = '#FFFFFF';
 // Black
 const black = '#000000';
 
+// Grey
+const grey = '#616161';
+
 const COLORS: Colors = {
   PRIMARY: {
     GREEN: primaryGreen,
@@ -78,6 +82,7 @@ const COLORS: Colors = {
   TRANSPARENT: transparent,
   WHITE: white,
   BLACK: black,
+  GREY: grey,
 };
 
 export type PrimaryColorStateType =
diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx
index 001cc22c9..db9756900 100644
--- a/ts/themes/globals.tsx
+++ b/ts/themes/globals.tsx
@@ -14,6 +14,7 @@ export type ThemeGlobals = {
   '--transparent-color': string;
   '--white-color': string;
   '--black-color': string;
+  '--grey-color': string;
 
   /* Shadows */
   '--shadow-color': string;
@@ -47,6 +48,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--transparent-color': COLORS.TRANSPARENT,
   '--white-color': COLORS.WHITE,
   '--black-color': COLORS.BLACK,
+  '--grey-color': COLORS.GREY,
 
   '--shadow-color': 'var(--black-color)',
   '--drop-shadow': `0 0 4px 0 var(--shadow-color)`,
@@ -62,6 +64,9 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--lightbox-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.8)`,
   '--lightbox-caption-background-color': 'rgba(192, 192, 192, .40)',
   '--lightbox-icon-stroke-color': 'var(--white-color)',
+
+  // TODO Theming - Add selection colors for dark and light themes
+  // Current light uses #00000088 and dark uses #FFFFFF88
 };
 
 // These should only be needed for the global style (at root).