diff --git a/interface/src/SettingsContext.tsx b/interface/src/SettingsContext.tsx
index db7c216d..fc1758b7 100644
--- a/interface/src/SettingsContext.tsx
+++ b/interface/src/SettingsContext.tsx
@@ -23,6 +23,7 @@ export const SettingsContextProvider: React.FC<{ children: ReactNode }> = ({ chi
     betterSEQTAPlus: true,
     shortcuts: [],
     customshortcuts: [],
+    transparencyEffects: false,
   });
 
   const [showPicker, setShowPicker] = useState<boolean>(false);
diff --git a/interface/src/hooks/settingsState.ts b/interface/src/hooks/settingsState.ts
index d200abd5..2c5f6ffd 100644
--- a/interface/src/hooks/settingsState.ts
+++ b/interface/src/hooks/settingsState.ts
@@ -22,6 +22,7 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
         betterSEQTAPlus: result.onoff,
         shortcuts: result.shortcuts,
         customshortcuts: result.customshortcuts,
+        transparencyEffects: result.transparencyEffects
       });
       
       if (result.DarkMode) {
@@ -39,6 +40,7 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
     "onoff": "betterSEQTAPlus",
     "shortcuts": "shortcuts",
     "customshortcuts": "customshortcuts",
+    "transparencyEffects": "transparencyEffects"
   }), []);
   
   const storageChangeListener = (changes: chrome.storage.StorageChange) => {
diff --git a/interface/src/pages/Settings.tsx b/interface/src/pages/Settings.tsx
index 392921a0..08c7529e 100644
--- a/interface/src/pages/Settings.tsx
+++ b/interface/src/pages/Settings.tsx
@@ -53,11 +53,11 @@ const Settings: React.FC = () => {
       description: "Customise the sidebar layout.",
       modifyElement: <button onClick={() => chrome.runtime.sendMessage({ type: 'currentTab', info: 'EditSidebar' })} className='px-4 py-1 text-[0.75rem] bg-blue-500 rounded-md'>Edit</button>
     },
-    /* {
+    {
       title: "Transparency Effects",
       description: "Enables transparency effects on certain elements such as blur. (May impact battery life)",
-      modifyElement: <Switch state={settingsState.betterSEQTAPlus} onChange={(isOn: boolean) => switchChange('betterSEQTAPlus', isOn)} />
-    }, */
+      modifyElement: <Switch state={settingsState.transparencyEffects} onChange={(isOn: boolean) => switchChange('transparencyEffects', isOn)} />
+    },
     {
       title: "BetterSEQTA+",
       description: "Enables BetterSEQTA+ features",
diff --git a/interface/src/types/AppProps.ts b/interface/src/types/AppProps.ts
index c6ddfa24..263bf41e 100644
--- a/interface/src/types/AppProps.ts
+++ b/interface/src/types/AppProps.ts
@@ -7,6 +7,7 @@ export interface SettingsState {
   betterSEQTAPlus: boolean;
   shortcuts: Shortcut[];
   customshortcuts: CustomShortcut[];
+  transparencyEffects: boolean;
 }
 
 interface ToggleItem {
@@ -55,4 +56,5 @@ export interface MainConfig {
   selectedColor: string;
   shortcuts: Shortcut[];
   subjectfilters: Record<string, any>;
+  transparencyEffects: boolean;
 }
diff --git a/src/background.js b/src/background.js
index e94aaa2f..acf48ec2 100644
--- a/src/background.js
+++ b/src/background.js
@@ -161,6 +161,7 @@ const DefaultValues = {
   onoff: true,
   animatedbk: true,
   bksliderinput: 50,
+  transparencyEffects: false,
   lessonalert: true,
   notificationcollector: true,
   defaultmenuorder: [],
diff --git a/src/inject/injected.css b/src/inject/injected.css
index c495ab70..96f869aa 100644
--- a/src/inject/injected.css
+++ b/src/inject/injected.css
@@ -1,6 +1,7 @@
 @import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600");
 @import "./injected/popup.css";
 @import "./injected/sidebar-animation.css";
+@import "./injected/theme.css";
 
 :root {
   background: var(--better-main) !important;
diff --git a/src/inject/injected/theme.css b/src/inject/injected/theme.css
new file mode 100644
index 00000000..19315de1
--- /dev/null
+++ b/src/inject/injected/theme.css
@@ -0,0 +1,11 @@
+html.dark {
+  --background-primary: #232323;
+  --background-secondary: #1a1a1a;
+  --text-primary: white;
+}
+
+html:not(.dark) {
+  --background-primary: #ffffff;
+  --background-secondary: #e5e7eb;
+  --text-primary: black;
+}
\ No newline at end of file
diff --git a/src/seqta/ui/colors/Manager.js b/src/seqta/ui/colors/Manager.js
index 5ecf6e7e..1f2a0415 100644
--- a/src/seqta/ui/colors/Manager.js
+++ b/src/seqta/ui/colors/Manager.js
@@ -31,20 +31,17 @@ export function updateAllColors(storedSetting, newColor = null) {
   let modeProps = {};
   if (DarkMode !== null) {
     modeProps = DarkMode ? {
-      '--background-primary': '#232323',
-      '--background-secondary': '#1a1a1a',
-      '--text-primary': 'white',
       '--betterseqta-logo': `url(${getChromeURL('icons/betterseqta-light-full.png')})`
     } : {
-      '--background-primary': '#ffffff',
-      '--background-secondary': '#e5e7eb',
-      '--text-primary': 'black',
       '--better-pale': lightenAndPaleColor(selectedColor),
       '--betterseqta-logo': `url(${getChromeURL('icons/betterseqta-dark-full.png')})`
     };
 
     if (DarkMode) {
       document.documentElement.style.removeProperty('--better-pale');
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
     }
   }