Full refactor

Converted from setting everything as transparent to setting HSLA based on discord base dark mode colors but with low alpha to increase readability and contrast.

Removed some old unnecessary code.

src/index.css

@@ -1,20 +1,21 @@
-:root,
-.theme-dark,
-.theme-light {
+:root, .theme-dark, .theme-light, .theme-amoled, .theme-darker {
  /* Main */
  --background-primary: transparent;
- --background-secondary: transparent;
- --background-secondary-alt: transparent;
- --background-tertiary: transparent;
+ --background-secondary: hsla(220, calc(var(--saturation-factor, 1)*6.5%), 18%, 27%);
+ --background-secondary-alt: hsla(228, calc(var(--saturation-factor, 1)*6.7%), 14.7%, 30%);
+ --background-tertiary: hsla(225, calc(var(--saturation-factor, 1)*6.3%), 12.5%, 33%);
+ --background-floating: hsla(220, calc(var(--saturation-factor, 1)*8.1%), 7.3%, 33%);
+ --home-background: hsla(220, calc(var(--saturation-factor, 1)*7%), 16.9%, 33%);
+
  /* Scrollbars */
- --scrollbar-auto-thumb: #000d;
- --scrollbar-auto-track: #0007;
- /* User popout */
- --profile-body-background-color: transparent;
+ --scrollbar-auto-thumb: hsla(225, calc(var(--saturation-factor, 1)*7.1%), 11%, 50%);
+ --scrollbar-auto-track: var(--background-secondary);
 
  /* Misc */
- --modal-background: transparent;
- --modal-footer-background: transparent;
+ --modal-background: var(--background-secondary);
+ --modal-footer-background: var(--background-tertiary);
+ --deprecated-card-bg: var(--background-secondary);
+ --bg-overlay-3: var(--background-floating);
 }
 
 /* Background image & dim*/
@@ -31,21 +32,3 @@
 {
  background: transparent !important;
 }
-
-/* User popout roles */
-.role-2TIOKu {
- border: 1px solid;
- border-color: hsla(0, 0%, 100%, 0.2) !important;
-}
-
-/* Dim stuff */
-.layer-2BGhQ8:not(.disabledPointerEvents-cGr1My)>*>*, /* Popouts */
- .contentColumn-1C7as6, .background-2avFV1, /* Bunch of background */
- .connectionHeader-Ixbb1s, .connectionOptionsWrapper-3aVWcp, .integrationsWrapper-1V-5L9, .metadataContainer-35U-On, .connectContainer-1hylYM, /* Connection menu */
- .replugged-quickcss-wrapper, /* Quick CSS */
- .scrollableContainer-15eg7h, .autocomplete-3NRXG8, /* Message area */
- .expandedFolderBackground-1kSAf6:not(.collapsed-uGXEbi), /* Folder background */
- .grid-1aWVsE, .wrapper-1FP9YQ, /* Embeds */
- .scrollbarGhostHairline-2LpzZ9, .inline /* Code blocks */ {
- background-color: #0007 !important;
-}