Add transparency effects toggle to settings

src/background.js

@@ -161,6 +161,7 @@ const DefaultValues = {
   onoff: true,
   animatedbk: true,
   bksliderinput: 50,
+  transparencyEffects: false,
   lessonalert: true,
   notificationcollector: true,
   defaultmenuorder: [],

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;

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;
+}

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');
     }
   }