diff --git a/packages/components/src/signature-settings.ts b/packages/components/src/signature-settings.ts
index 7a1391b..7984b69 100644
--- a/packages/components/src/signature-settings.ts
+++ b/packages/components/src/signature-settings.ts
@@ -22,6 +22,7 @@ export const StyledWebcamPicture = styled.img<{ pictureWidth: string }>`
   height: 100%;
   width: ${(props) => props.pictureWidth};
   object-fit: cover;
+  filter: ${(props) => (props.theme.mode === 'dark' ? 'invert(1)' : 'none')};
 `
 
 export const StyledWebcamLabel = styled.span`
diff --git a/packages/components/src/theme/dark-theme.ts b/packages/components/src/theme/dark-theme.ts
index 2bd75fb..ade519a 100644
--- a/packages/components/src/theme/dark-theme.ts
+++ b/packages/components/src/theme/dark-theme.ts
@@ -2,6 +2,7 @@ import { DefaultTheme } from 'styled-components'
 
 export const darkTheme: DefaultTheme = {
   // Basic
+  mode: 'dark',
   header: '#1D243C',
   surface: '#1D243C',
   background: '#111832',
diff --git a/packages/components/src/theme/index.ts b/packages/components/src/theme/index.ts
index 71f82bd..6a2954e 100644
--- a/packages/components/src/theme/index.ts
+++ b/packages/components/src/theme/index.ts
@@ -3,6 +3,7 @@ import 'styled-components'
 declare module 'styled-components' {
   export interface DefaultTheme {
     // Basics
+    mode: string
     header: string
     surface: string
     background: string
diff --git a/packages/components/src/theme/light-theme.ts b/packages/components/src/theme/light-theme.ts
index b47c58f..ae1cc1a 100644
--- a/packages/components/src/theme/light-theme.ts
+++ b/packages/components/src/theme/light-theme.ts
@@ -2,6 +2,7 @@ import { DefaultTheme } from 'styled-components'
 
 export const lightTheme: DefaultTheme = {
   // Basic
+  mode: 'light',
   header: '#4065FA',
   surface: '#FFFFFF',
   background: '#F5F5F5',