From c3803d070b7d46c76e3dac2b15d3d01265ddec00 Mon Sep 17 00:00:00 2001
From: GilbN <gilberg@gmail.com>
Date: Sat, 23 Apr 2022 01:14:15 +0200
Subject: [PATCH] feat: :lipstick: Adds transparency vars

---
 css/base/adguard/adguard-base.css             |  58 +++---
 css/base/bazarr/bazarr-base.css               |  81 ++++----
 css/base/bitwarden/bitwarden-base.css         |  39 ++--
 css/base/calibreweb/calibreweb-base.css       |   5 +-
 css/base/deluge/deluge-base.css               |  47 ++---
 css/base/dozzle/dozzle-base.css               |  21 ++-
 css/base/duplicacy/duplicacy-base.css         |  41 +++--
 css/base/duplicati/duplicati-base.css         |  15 +-
 css/base/emby/emby-base.css                   |  23 +--
 css/base/filebrowser/filebrowser-base.css     |  33 ++--
 css/base/flood/flood-base.css                 |  33 ++--
 css/base/gaps/gaps-base.css                   |  29 +--
 css/base/gitea/gitea-base.css                 | 139 +++++++-------
 css/base/grafana/grafana-base.css             | 174 +++++++++---------
 css/base/grafana/organizr-dashboard.css       |  72 ++++----
 css/base/guacamole/guacamole-base.css         |  51 ++---
 css/base/jackett/jackett-base.css             |  33 ++--
 css/base/jellyfin/jellyfin-base.css           |  29 +--
 css/base/kitana/kitana-base.css               |  25 +--
 css/base/lazylibrarian/lazylibrarian-base.css |  25 +--
 css/base/librespeed/librespeed-base.css       |   3 +-
 css/base/lidarr/lidarr-base.css               | 115 ++++++------
 css/base/logarr/logarr-base.css               |  56 +++---
 css/base/monitorr/monitorr-base.css           |  47 ++---
 css/base/monitorr/organizr-dashboard.css      |  14 +-
 css/base/moviematch/moviematch-base.css       |   7 +-
 css/base/mylar3/mylar3-base.css               |  33 ++--
 css/base/netdata/netdata-base.css             |  27 +--
 css/base/nzbget/nzbget-base.css               |  71 +++----
 css/base/nzbhydra2/nzbhydra2-base.css         |  43 ++---
 css/base/ombi/ombi-base.css                   |  35 ++--
 css/base/organizr/organizr-base.css           | 107 +++++------
 css/base/overseerr/overseerr-base.css         |  29 +--
 css/base/petio/petio-base.css                 |  23 +--
 css/base/pihole/pihole-base.css               |  59 +++---
 css/base/plex/plex-base.css                   |  21 ++-
 css/base/plpp/plpp-base.css                   |  20 +-
 css/base/portainer/portainer-base.css         |  83 ++++-----
 css/base/prowlarr/prowlarr-base.css           | 123 +++++++------
 css/base/qbittorrent/qbittorrent-base.css     |  63 +++----
 css/base/radarr/radarr-base.css               | 113 ++++++------
 css/base/readarr/readarr-base.css             | 129 ++++++-------
 css/base/requestrr/requestrr-base.css         |  39 ++--
 css/base/resilio-sync/resilio-sync-base.css   |  73 ++++----
 css/base/rutorrent/rutorrent-base.css         |  91 ++++-----
 css/base/sabnzbd/sabnzbd-base.css             |  75 ++++----
 css/base/sonarr/sonarr-base.css               | 101 +++++-----
 css/base/synclounge/synclounge-base.css       |   7 +-
 css/base/tautulli/tautulli-base.css           |  81 ++++----
 css/base/thelounge/thelounge-base.css         |  22 ++-
 css/base/transmission/transmission-base.css   |  47 ++---
 css/base/unraid/unraid-base.css               |  41 +++--
 css/base/uptime-kuma/uptime-kuma-base.css     |  23 +--
 css/base/vuetorrent/vuetorrent-base.css       |  25 +--
 css/base/webtools/webtools-base.css           |  45 ++---
 css/base/whisparr/whisparr-base.css           | 113 ++++++------
 css/base/xbackbone/xbackbone-base.css         |  27 +--
 css/defaults/transparent.css                  |  28 +++
 58 files changed, 1551 insertions(+), 1481 deletions(-)
 create mode 100644 css/defaults/transparent.css

diff --git a/css/base/adguard/adguard-base.css b/css/base/adguard/adguard-base.css
index 1fd3fc58..e87ce6bb 100644
--- a/css/base/adguard/adguard-base.css
+++ b/css/base/adguard/adguard-base.css
@@ -11,6 +11,7 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 body {
     background: var(--main-bg-color);
@@ -61,7 +62,7 @@ body *:hover::-webkit-scrollbar-thumb {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .2);
+    background: var(--transparency-dark-20);
     background-clip: padding-box;
 }
 
@@ -73,7 +74,7 @@ body *:hover::-webkit-scrollbar-thumb {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .5);
+    background: var(--transparency-light-50);
     background-clip: padding-box;
 }
 
@@ -113,7 +114,7 @@ h6,
 }
 
 .login__form .card {
-    background: rgba(0, 0, 0, 0.08);
+    background: var(--transparency-dark-10);
     border: 1px solid rgb(0 0 0 / 0.08);
 }
 
@@ -183,7 +184,7 @@ h6,
 
 /* FOOTER */
 .footer {
-    background: rgba(0, 0, 0, 0.08);
+    background: var(--transparency-dark-10);
     border-top: 1px solid rgba(255, 255, 255, 0.03);
     color: var(--text);
 }
@@ -235,7 +236,7 @@ h6,
 
 .tooltip-custom__container .button-action--arrow-option:not(:disabled):hover {
     cursor: pointer;
-    background: rgb(0 0 0 / 0.15);
+    background: var(--transparency-dark-15);
     overflow: hidden;
 }
 
@@ -245,7 +246,7 @@ h6,
 
 /* CARDS*/
 .card {
-    background-color: rgb(0 0 0 / 8%);
+    background-color: var(--transparency-dark-10);
     border: 1px solid rgba(255, 255, 255, 0.1);
     color: var(--text);
 }
@@ -331,7 +332,7 @@ h6,
 .dropdown-item:focus {
     color: var(--text-hover);
     text-decoration: none;
-    background-color: rgb(255 255 255 / 0.08);
+    background-color: var(--transparency-dark-10);
 }
 
 .select__menu {
@@ -347,7 +348,7 @@ h6,
 }
 
 .select__option:hover {
-    background: rgba(255, 255, 255, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 .select__option {
@@ -366,11 +367,11 @@ h6,
 
 /* INSTALL */
 .setup__container {
-    background-color: rgb(0 0 0 / 8%);
+    background-color: var(--transparency-dark-10);
 }
 
 .setup__progress-wrap {
-    background-color: rgb(0 0 0 / 50%);
+    background-color: var(--transparency-dark-50);
 }
 
 .setup__logo {
@@ -388,7 +389,7 @@ h6,
 
 .dropdown-item.active,
 .dropdown-item:active {
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
 }
 
 .service__icon {
@@ -397,7 +398,7 @@ h6,
 
 /* LOGS */
 .logs__table {
-    background-color: rgb(0 0 0 / 8%);
+    background-color: var(--transparency-dark-10);
 }
 
 .logs__text,
@@ -447,7 +448,7 @@ h6,
 
 .ReactTable .-loading,
 .ReactTable .-loading>div {
-    background: rgba(255, 255, 255, 0.5);
+    background: var(--transparency-light-50);
 }
 
 .ReactTable .rt-thead .rt-th,
@@ -461,7 +462,7 @@ h6,
 }
 
 .ReactTable .rt-thead.-header {
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
 }
 
 .ReactTable .rt-thead .rt-th.-sort-asc, .ReactTable .rt-thead .rt-td.-sort-asc {
@@ -495,7 +496,7 @@ h6,
 /* FORMS */
 .form-control {
     color: var(--text);
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--transparency-light-10);
     border: 1px solid rgba(255, 255, 255, .1)
 }
 
@@ -511,7 +512,7 @@ h6,
     border-color: transparent;
     -webkit-box-shadow: none;
     box-shadow: none;
-    background: rgba(255, 255, 255, 0.2);
+    background: var(--transparency-light-20);
     color: var(--text-hover);
 }
 
@@ -523,7 +524,7 @@ h6,
 
 .custom-select {
     color: var(--text);
-    background: rgba(255, 255, 255, 0.1) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center;
+    background: var(--transparency-light-10) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMCA1Jz48cGF0aCBmaWxsPScjOTk5JyBkPSdNMCAwTDEwIDBMNSA1TDAgMCcvPjwvc3ZnPg==") no-repeat right 0.75rem center;
     background-size: 8px 10px;
     border: 1px solid rgba(255, 255, 255, 0.1);
 
@@ -544,7 +545,7 @@ select:focus {
 }
 
 .icon--selected {
-    background-color: rgb(0 0 0 / 15%);
+    background-color: var(--transparency-dark-15);
     border: solid 1px transparent;
 }
 
@@ -581,7 +582,7 @@ select:focus {
 
 .btn-secondary {
     color: var(--button-text);
-    background-color: rgb(255 255 255 / 25%);
+    background-color: var(--transparency-light-25);
     border-color: rgb(255 255 255 / 0%);
     -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
     box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
@@ -623,7 +624,7 @@ select:focus {
 }
 
 .ReactModal__Overlay--after-open {
-    background-color: rgb(0 0 0 / 0.7) !important;
+    background-color: var(--transparency-dark-70) !important;
 }
 
 /* MOBILE */
@@ -657,21 +658,4 @@ select:focus {
     .dropdown-menu {
         background: #1f1f1f !important;
     }
-}
-
-/* PLACEHOLDER TEXT */
-::placeholder {
-    color: var(--text);
-}
-
-:-moz-placeholder {
-    color: var(--text);
-}
-
-:-ms-input-placeholder {
-    color: var(--text);
-}
-
-::-webkit-input-placeholder {
-    color: var(--text);
 }
\ No newline at end of file
diff --git a/css/base/bazarr/bazarr-base.css b/css/base/bazarr/bazarr-base.css
index 06720e1c..34dfa18f 100644
--- a/css/base/bazarr/bazarr-base.css
+++ b/css/base/bazarr/bazarr-base.css
@@ -11,6 +11,7 @@
 /*			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 * {
     outline: none;
@@ -30,7 +31,7 @@ body {
 
 /* scroller */
 ::-webkit-scrollbar-corner {
-    background-color: hsla(0, 0%, 100%, .08);
+    background-color: var(--transparency-dark-10);
 }
 
 ::-webkit-scrollbar {
@@ -42,7 +43,7 @@ body {
 ::-webkit-scrollbar-thumb {
     -webkit-border-radius: 5px;
     border-radius: 5px;
-    background-color: rgba(255, 255, 255, 0.35) !important;
+    background-color: var(--transparency-light-35) !important;
 }
 
 a,
@@ -63,21 +64,21 @@ a:hover {
 }
 
 .page-link {
-    background-color: rgba(255, 255, 255, .07);
-    border: 1px solid rgba(255, 255, 255, .1);
+    background-color: var(--transparency-light-10);
+    border: 1px solid var(--transparency-light-10);
 }
 
 .page-link:hover {
     color: var(--link-color-hover);
     text-decoration: none;
-    background-color: rgba(0, 0, 0, .15);
-    border: 1px solid rgba(255, 255, 255, .1);
+    background-color: var(--transparency-dark-15);
+    border: 1px solid var(--transparency-light-10);
 }
 
 .page-item.disabled .page-link {
     color: var(--link-color);
-    background-color: rgba(255, 255, 255, .07);
-    border: 1px solid rgba(255, 255, 255, .1);
+    background-color: var(--transparency-light-10);
+    border: 1px solid var(--transparency-light-10);
 }
 
 .page-link:focus { 
@@ -100,7 +101,7 @@ a:hover {
 }
 
 .table-striped tbody tr:nth-of-type(odd) {
-    background-color: rgb(0 0 0 / 15%);
+    background-color: var(--transparency-dark-15);
 }
 
 .text-dark {
@@ -149,13 +150,13 @@ label,
 
 .form-control {
     color: var(--text-hover);
-    background-color: rgba(255, 255, 255, 0.08);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background-color: var(--transparency-light-10);
+    border: 1px solid var(--transparency-light-10);
 }
 
 .form-control:focus {
-    background-color: rgba(255, 255, 255, 0.25) !important;
-    border-color: rgba(255, 255, 255, 0.25) !important;
+    background-color: var(--transparency-light-25) !important;
+    border-color: var(--transparency-light-25) !important;
     outline: 0;
     box-shadow: none;
     color: var(--text-hover);
@@ -163,10 +164,10 @@ label,
 
 .form-control:disabled,
 .form-control[readonly] {
-    background-color: rgb(255 255 255 / 15%);
+    background-color: var(--transparency-light-15);
     opacity: .7;
     color: var(--text-hover);
-    border: 1px solid rgb(255 255 255 / 15%);
+    border: 1px solid var(--transparency-light-15);
 }
 
 :root .form-control:focus {
@@ -180,7 +181,7 @@ label,
 
 .bootstrap-tagsinput {
     color: var(--text);
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
     border: 1px solid transparent !important;
 
 }
@@ -195,7 +196,7 @@ label,
 
 .input-group-text {
     color: var(--text);
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     border: 1px solid transparent;
 }
 
@@ -205,7 +206,7 @@ label,
 }
 
 .custom-chip-input:focus-within {
-    border-color: rgb(255 255 255 / 10%);
+    border-color: var(--transparency-light-10);
 }
 
 .custom-chip-input .custom-chip {
@@ -221,7 +222,7 @@ label,
 
 /* SIDEBAR */
 .sidebar-container {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 .sidebar-container .sidebar-button,
@@ -233,7 +234,7 @@ label,
 .sidebar-container .sidebar-button:active,
 .sidebar-container .sidebar-button:focus {
     color: rgb(var(--accent-color)) !important;
-    background-color: rgba(0, 0, 0, 0.15) !important;
+    background-color: var(--transparency-dark-15) !important;
 }
 
 .sidebar-container .sidebar-button:hover,
@@ -249,7 +250,7 @@ label,
 .sidebar-container .sidebar-button.sb-active,
 .sidebar-container .sidebar-button.sb-active:hover,
 .sidebar-container .button.active {
-    background-color: rgba(0, 0, 0, 0.15) !important;
+    background-color: var(--transparency-dark-15) !important;
     color: rgb(var(--accent-color)) !important;
 }
 
@@ -298,7 +299,7 @@ label,
 
 /* TOP NAV BAR */
 .header-container .bg-primary {
-    background-color: rgba(0, 0, 0, .35) !important;
+    background: var(--transparency-dark-35) !important;
 }
 
 .header-container .btn-primary {
@@ -333,7 +334,7 @@ label,
     -webkit-background-size: auto, cover !important;
     -moz-background-size: auto, cover !important;
     -o-background-size: auto, cover !important;
-    border-bottom: solid 1px rgba(255, 255, 255, .1);
+    border-bottom: solid 1px var(--transparency-light-10);
 
 }
 
@@ -355,21 +356,21 @@ label,
 
 .auth-card .card-footer {
     background-color: transparent;
-    border-top: 1px solid rgba(255, 255, 255, .1);
+    border-top: 1px solid var(--transparency-light-10);
 }
 
 hr {
-    border-top: 1px solid rgb(255 255 255 / 10%);
+    border-top: 1px solid var(--transparency-light-10);
 }
 
 
 .card {
-    background-color: rgba(0, 0, 0, .45);
+    background-color: var(--transparency-dark-45);
     box-shadow: 0 0 10px 1px #000000;
     color: var(--text);
 }
 .card-header {
-    border-bottom: 1px solid rgb(255 255 255 / 10%);
+    border-bottom: 1px solid var(--transparency-light-10);
 }
 
 .settings-card:hover,
@@ -380,8 +381,8 @@ hr {
 
 .alert-secondary {
     color: var(--text);
-    background-color: rgba(255, 255, 255, .15);
-    border-color: rgba(255, 255, 255, .15);
+    background-color: var(--transparency-light-15);
+    border-color: var(--transparency-light-15);
 }
 
 /* Series page */
@@ -391,7 +392,7 @@ hr {
 }
 
 .progress {
-    background-color: rgb(255 255 255 / 20%);
+    background-color: var(--transparency-light-20);
 }
 
 .progress-bar.bg-primary {
@@ -421,17 +422,17 @@ hr {
 
 .popover {
     background-color: #1f1f1f;
-    border: 1px solid rgba(255, 255, 255, .2);
+    border: 1px solid var(--transparency-light-20);
 }
 
 .bs-popover-auto[x-placement^=top]>.arrow:after,
 .bs-popover-top>.arrow:after {
-    border-top-color: rgba(255, 255, 255, .5);
+    border-top-color: var(--transparency-light-50);
 }
 
 .popover-header {
     background-color: #1f1f1f;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid var(--transparency-light-10);
 
 }
 
@@ -638,7 +639,7 @@ hr {
 }
 
 .custom-control-input:focus~.custom-control-label:before {
-    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, .07);
+    box-shadow: 0 0 0 0.2rem var(--transparency-light-10);
 }
 
 .custom-control-input:checked~.custom-control-label:before {
@@ -721,11 +722,11 @@ input {
 .dropdown-item:focus,
 .dropdown-item:hover {
     color: var(--text-hover);
-    background-color: hsla(0, 0%, 100%, .08);
+    background-color: var(--transparency-dark-10);
 }
 
 .custom-selector .selector__control {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-color: rgba(0, 0, 0, 0) !important;
     color: var(--text-hover);
 }
@@ -741,7 +742,7 @@ input {
 }
 
 .custom-selector .selector__control--is-focused {
-    border-color: rgba(255, 255, 255, .2) !important;
+    border-color: var(--transparency-light-20) !important;
 }
 
 .selector__menu {
@@ -757,7 +758,7 @@ input {
 }
 
 .custom-selector .selector__option--is-selected:active {
-    background-color: rgba(255, 255, 255, .07) !important;
+    background-color: var(--transparency-light-10) !important;
 }
 
 .custom-selector .selector__option--is-focused {
@@ -801,7 +802,7 @@ input {
 }
 
 .recharts-rectangle.recharts-tooltip-cursor {
-    fill: rgba(255, 255, 255, .15) !important;
+    fill: var(--transparency-light-15) !important;
 }
 
 text {
@@ -833,7 +834,7 @@ line {
 
 .toast-header {
     color: var(--text-hover);
-    background-color: hsla(0, 0%, 0%, .35);
+    background: var(--transparency-dark-35);
     border-bottom: 1px solid rgba(0, 0, 0, .05);
 }
 
diff --git a/css/base/bitwarden/bitwarden-base.css b/css/base/bitwarden/bitwarden-base.css
index 427bedc5..3a923b67 100644
--- a/css/base/bitwarden/bitwarden-base.css
+++ b/css/base/bitwarden/bitwarden-base.css
@@ -11,6 +11,7 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 * {
     outline: none;
@@ -93,7 +94,7 @@ html[class*="theme_"] .navbar .nav-item>.nav-link {
 
 .table-hover tbody tr:hover {
     color: var(--text-hover);
-    background-color: rgba(255, 255, 255, .08);
+    background-color: var(--transparency-light-10);
 }
 
 h1,
@@ -118,7 +119,7 @@ html[class*="theme_"] .card-header,
 
 /* NAVBAR */
 .navbar {
-    background-color: rgb(0 0 0 / 25%) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .navbar-dark .navbar-nav .show>.nav-link,
@@ -131,12 +132,12 @@ html[class*="theme_"] .card-header,
 /* CARDS */
 
 html[class*="theme_"] .card-header {
-    background-color: rgb(0 0 0 / 45%);
+    background-color: var(--transparency-dark-45);
     color: var(--text-hover);
 }
 
 .card {
-    background-color: rgba(255, 255, 255, 0.07) !important;
+    background-color: var(--transparency-dark-10) !important;
     border-color: rgba(255, 255, 255, 0.1) !important;
     color: var(--text) !important;
 }
@@ -158,7 +159,7 @@ app-vault-groupings .card li.active>div>.fa {
 
 body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator>div.card.card-password.bg-light.my-4,
 body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator>div.card.card-password.bg-light.my-4>div {
-    background-color: rgb(0 0 0 / 15%) !important;
+    background-color: var(--transparency-dark-15) !important;
 }
 
 html[class*="theme_"] .password-number {
@@ -279,19 +280,19 @@ html[class*="theme_"] .form-control-file {
 html[class*="theme_"] .form-control:focus {
     box-shadow: none;
     border-color: transparent;
-    background: rgb(253 253 253 / 15%);
+    background: var(--transparency-light-15);
 }
 
 html[class*="theme_"] .form-control {
     color: var(--text);
-    background-color: rgb(0 0 0 / 0.25);
+    background: var(--transparency-dark-25);
     border: 1px solid transparent;
 
 }
 
 html[class*="theme_"] .form-control:disabled,
 .form-control[readonly] {
-    background-color: rgb(255 255 255 / 25%);
+    background-color: var(--transparency-light-25);
     opacity: 1;
 }
 
@@ -332,13 +333,13 @@ html[class*="theme_"] .dropdown-item:hover,
 html[class*="theme_"] .dropdown-item:focus {
     color: var(--text-hover);
     text-decoration: none;
-    background-color: rgb(255 255 255 / 0.08);
+    background-color: var(--transparency-light-10);
 }
 
 a.text-danger:hover,
 a.text-danger:focus {
     color: #dd4b39 !important;
-    background-color: rgb(255 255 255 / 0.08) !important;
+    background-color: var(--transparency-light-10) !important;
 }
 
 .dropdown-menu .text-danger {
@@ -373,24 +374,24 @@ html[class*="theme_"] .footer {
 html[class*="theme_"] .list-group-item.active {
     border-color: rgba(255, 255, 255, 0.15);
     color: rgb(var(--accent-color));
-    background-color: rgb(255 255 255 / 10%);
+    background: var(--transparency-light-10);
     border-left: 3px solid rgb(var(--accent-color));
 }
 
 html[class*="theme_"] .callout {
-    background-color: rgb(255 255 255 / 15%);
+    background: var(--transparency-light-15);
     border: 1px solid rgba(255, 255, 255, 0.1);
     color: var(--text);
 }
 
 html[class*="theme_"] .list-group-item {
-    background-color: rgb(0 0 0 / 35%);
+    background: var(--transparency-dark-35);
     border: 1px solid rgb(255 255 255 / 8%);
     color: var(--text);
 }
 
 html[class*="theme_"] .progress {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 /* BUTTONS */
@@ -530,7 +531,7 @@ html[class*="theme_"] .org-nav .nav-tabs a.active {
 }
 
 html[class*="theme_"] .nav-tabs .nav-link.active {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-color: rgba(255, 255, 255, 0.15);
 }
 
@@ -558,7 +559,7 @@ html[class*="theme_"] .org-nav .nav-tabs a:not(.active) {
 .nav-tabs .nav-link.active,
 .nav-tabs .nav-item.show .nav-link {
     color: var(--text);
-    background-color: rgb(255 255 255 / 25%);
+    background-color: var(--transparency-light-25);
     border-color: transparent;
 }
 
@@ -607,11 +608,11 @@ html[class*="theme_"] .table td [class*="fa-"] {
 
 /* Cards */
 .bg-secondary {
-    background-color: rgb(255 255 255 / 10%) !important;
+    background: var(--transparency-light-10) !important;
 }
 
 .bg-white {
-    background-color: rgba(255, 255, 255, 0.1) !important;
+    background: var(--transparency-light-10) !important;
 }
 
 html[class*="theme_"] .groupings .card .card-body a {
@@ -631,7 +632,7 @@ html[class*="theme_"] .groupings .card .card-body a {
     color: var(--text);
     pointer-events: none;
     cursor: auto;
-    background-color: rgb(0 0 0 / 10%);
+    background: var(--transparency-dark-10);
     border-color: rgb(0 0 0 / 10%);
 }
 
diff --git a/css/base/calibreweb/calibreweb-base.css b/css/base/calibreweb/calibreweb-base.css
index bbcb5746..cf8f95b2 100644
--- a/css/base/calibreweb/calibreweb-base.css
+++ b/css/base/calibreweb/calibreweb-base.css
@@ -15,6 +15,7 @@
  /* APP VARS*/
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
  :root {
     --color-background: var(--main-bg-color);
@@ -203,7 +204,7 @@
  .dropdown-menu>li>a:focus,
  .dropdown-menu>li>a:hover {
      color: var(--text-hover);
-     background: hsla(0, 0%, 100%, .08);
+     background: var(--transparency-dark-10);
  }
 
  /* SIDEMENU */
@@ -225,7 +226,7 @@
      -webkit-transition: color .2s;
      -o-transition: color .2s;
      transition: color .2s;
-     background-color: rgba(0, 0, 0, .55) !important;
+     background: var(--transparency-dark-55) !important;
  }
 
  /* NAVBAR */
diff --git a/css/base/deluge/deluge-base.css b/css/base/deluge/deluge-base.css
index 53538ad7..09e9de18 100644
--- a/css/base/deluge/deluge-base.css
+++ b/css/base/deluge/deluge-base.css
@@ -14,6 +14,7 @@
 
  @import url('https://fonts.googleapis.com/css?family=Roboto');
  @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
  html {
      background: var(--main-bg-color);
@@ -34,20 +35,20 @@
 
  /* scroller */
  ::-webkit-scrollbar-corner {
-     background-color: hsla(0, 0%, 100%, .08);
+     background: var(--transparency-dark-10);
  }
 
  ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
-     background: rgba(0, 0, 0, .25);
+     background: var(--transparency-dark-25);
 
  }
 
  ::-webkit-scrollbar-thumb {
      -webkit-border-radius: 2px;
      border-radius: 2px;
-     background-color: hsla(0, 0%, 100%, .08);
+     background: var(--transparency-dark-10);
  }
 
  .x-grid3-header table,
@@ -56,7 +57,7 @@
  }
 
  .ext-el-mask {
-     background-color: rgba(0, 0, 0, 0.25);
+     background: var(--transparency-dark-25);
  }
 
  .ext-el-mask-msg {
@@ -304,13 +305,13 @@
  }
 
  ul.x-tab-strip-top {
-     background-color: rgba(0, 0, 0, 0.25);
+     background: var(--transparency-dark-25);
      background-image: none;
      border-bottom-color: transparent;
  }
 
  ul.x-tab-strip-bottom {
-     background-color: rgba(0, 0, 0, 0.25);
+     background: var(--transparency-dark-25);
      //background-image: url(../images/gray/tabs/tab-strip-btm-bg.gif);
      border-top-color: transparent;
  }
@@ -349,7 +350,7 @@
  ul.x-tab-strip li {
      float: left;
      margin-left: 2px;
-     background: rgba(0, 0, 0, 0.25);
+     background: var(--transparency-dark-25)
  }
 
  #torrentDetails dl dt,
@@ -435,7 +436,7 @@
 
  .x-form-text,
  textarea.x-form-field {
-     background-color: rgba(255, 255, 255, 0.08);
+     background: var(--transparency-light-10);
      background-image: none;
      border-color: transparent;
  }
@@ -1034,7 +1035,7 @@
  }
 
  .x-grid3 {
-     background: rgba(0, 0, 0, 0.25);
+     background: var(--transparency-dark-25);
  }
 
  .x-grid-panel .x-panel-mc .x-panel-body {
@@ -1066,12 +1067,12 @@
  }
 
  .x-grid3-row-alt {
-     background-color: rgba(0, 0, 0, 0.25);
+     background: var(--transparency-dark-25);
  }
 
  .x-grid3-row-over {
      border-color: transparent;
-     background-color: rgba(255, 255, 255, 0.08);
+     background: var(--transparency-light-10);
      background-image: none;
  }
 
@@ -1084,7 +1085,7 @@
  }
 
  .x-grid3-header {
-     background-color: rgba(0, 0, 0, 0.25);
+     background: var(--transparency-dark-25);
      background-image: none;
      color: var(--text-hover) !important;
  }
@@ -1110,7 +1111,7 @@
  td.sort-desc .x-grid3-hd-inner,
  td.sort-asc .x-grid3-hd-inner,
  td.x-grid3-hd-menu-open .x-grid3-hd-inner {
-     background-color: rgba(0, 0, 0, 0.25);
+     background: var(--transparency-dark-25);
      background-image: none;
 
  }
@@ -1151,7 +1152,7 @@
  }
 
  .x-grid3-row-selected {
-     background-color: rgba(255, 255, 255, 0.08) !important;
+     background: var(--transparency-light-10) !important;
      background-image: none;
      border-color: transparent;
      color: var(--text-hover) !important;
@@ -1512,11 +1513,11 @@
  }
 
  .x-tree-node .x-tree-node-over {
-     background-color: rgba(255, 255, 255, 0.08);
+     background: var(--transparency-light-10);
  }
 
  .x-tree-node .x-tree-selected {
-     background-color: rgba(0, 0, 0, 0.45);
+     background: var(--transparency-dark-45);
  }
 
  .x-tree-drop-ok-append .x-dd-drop-icon {
@@ -1778,7 +1779,7 @@
 
  .x-menu-item-active {
      background-image: none;
-     background-color: rgba(255, 255, 255, 0.08);
+     background: var(--transparency-light-10);
      border-color: transparent;
      color: var(--text-hover) !important;
  }
@@ -1956,7 +1957,7 @@
      font-family: 'Roboto', tahoma, arial, verdana, sans-serif;
      border-color: transparent;
      background-image: none;
-     background-color: rgba(0, 0, 0, 0.25);
+     background: var(--transparency-dark-25);
  }
 
  .x-panel-body {
@@ -2304,12 +2305,12 @@
  }
 
  .x-layout-collapsed {
-     background-color: rgba(0, 0, 0, 0.25);
+     background: var(--transparency-dark-25);
      border-color: transparent;
  }
 
  .x-layout-collapsed-over {
-     background-color: rgba(0, 0, 0, 0.45);
+     background: var(--transparency-dark-45);
  }
 
  .x-layout-split-west .x-layout-mini {
@@ -2374,7 +2375,7 @@
  }
 
  .x-list-header {
-     background-color: rgba(0, 0, 0, 0.25);
+     background: var(--transparency-dark-25);
      background-image: none;
      color: var(--text-hover) !important;
  }
@@ -2389,11 +2390,11 @@
  }
 
  .x-list-over {
-     background-color: rgba(255, 255, 255, 0.08);
+     background: var(--transparency-light-10);
  }
 
  .x-list-selected {
-     background-color: rgba(255, 255, 255, 0.08);
+     background: var(--transparency-light-10);
      color: var(--text-hover) !important;
  }
 
diff --git a/css/base/dozzle/dozzle-base.css b/css/base/dozzle/dozzle-base.css
index 1ec59533..def06c96 100644
--- a/css/base/dozzle/dozzle-base.css
+++ b/css/base/dozzle/dozzle-base.css
@@ -11,11 +11,12 @@
 /*			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 :root {
     --scheme-main-ter: var(--main-bg-color);
     --text-strong-color: var(--button-text-hover);
-    --border-color: rgb(255 255 255 / 25%);
+    --border-color: var(--transparency-light-25);
     --logo-color: rgb(var(--accent-color));
     --body-background-color: var(--main-bg-color);
     --border-hover-color: rgb(var(--accent-color));
@@ -53,14 +54,14 @@ section header,
 /* Scrollbar */
 
 html.has-custom-scrollbars ::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, .25);
+    background: var(--transparency-light-25);
     outline: 1px solid #0000;
     border-radius: 4px;
 }
 
 html.has-custom-scrollbars ::-webkit-scrollbar-thumb:active,
 html.has-custom-scrollbars ::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, .45);
+    background: var(--transparency-light-45);
 
 }
 
@@ -110,13 +111,13 @@ p,
 
 a.panel-block:hover,
 label.panel-block:hover {
-    background-color: rgba(255, 255, 255, .08);
+    background-color: var(--transparency-light-10);
     color: var(--text-strong-color);
 }
 
 /* Side Menu*/
 .menu-list a:hover {
-    background-color: rgba(255, 255, 255, .08);
+    background-color: var(--transparency-light-10);
     color: var(--text-hover) !important;
 }
 
@@ -154,7 +155,7 @@ li.exited a {
 .autocomplete .dropdown-item.is-hovered,
 a.dropdown-item:hover,
 button.dropdown-item:hover {
-    background: rgba(255, 255, 255, .25);
+    background: var(--transparency-light-25);
     color: var(--text-strong-color);
 }
 
@@ -234,7 +235,7 @@ section .is-scrollbar-notification button {
 }
 
 code {
-    background: rgba(0, 0, 0, .35) !important;
+    background: var(--transparency-dark-35) !important;
 }
 
 .switch input[type=checkbox]:checked+.check {
@@ -253,7 +254,7 @@ code {
 /* Events */
 
 .events {
-    background: rgba(0, 0, 0, .35);
+    background: var(--transparency-dark-35);
 }
 
 .scroll-progress svg circle {
@@ -270,10 +271,10 @@ code {
 }
 
 .events.medium {
-    background: rgba(0, 0, 0, .45);
+    background: var(--transparency-dark-45);
 }
 
 .date {
     color: rgb(var(--accent-color)) !important;
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
\ No newline at end of file
diff --git a/css/base/duplicacy/duplicacy-base.css b/css/base/duplicacy/duplicacy-base.css
index b16b369a..b86d7ca3 100644
--- a/css/base/duplicacy/duplicacy-base.css
+++ b/css/base/duplicacy/duplicacy-base.css
@@ -11,6 +11,7 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 body {
     background: var(--main-bg-color);
@@ -65,7 +66,7 @@ a.disabled-link {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .2);
+    background: var(--transparency-dark-20);
     background-clip: padding-box;
 }
 
@@ -77,7 +78,7 @@ a.disabled-link {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .5);
+    background: var(--transparency-light-50);
     background-clip: padding-box;
 }
 
@@ -161,7 +162,7 @@ label {
 .col-xs-4 .card,
 .col-xs-12 .card,
 .col-xs-8 .card {
-    background: rgb(0 0 0 / 8%) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 #schedule-0,
@@ -186,7 +187,7 @@ label {
 #schedule-19,
 #schedule-20,
 [id*="#schedule-"] {
-    background-color: rgb(0 0 0 / 8%);
+    background: var(--transparency-dark-10);
 }
 
 /* TIMELINE */
@@ -218,7 +219,7 @@ label {
 .card .nav-tabs>li.active>a:hover {
     color: var(--text);
     cursor: default;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     border: 1px solid rgba(255, 255, 255, .25);
     border-bottom-color: var(--text);
     border-radius: 6px 6px 0 0;
@@ -226,7 +227,7 @@ label {
 
 .card .nav>li>a:hover,
 .card .nav>li>a:focus {
-    background-color: rgba(255, 255, 255, .07);
+    background: var(--transparency-light-10);
     border: 1px solid transparent;
 }
 
@@ -236,8 +237,8 @@ label {
 }
 
 .navbar-default {
-    background-color: rgb(0 0 0 / 26%);
-    border-bottom: 1px solid rgb(255 255 255 / 25%);
+    background: var(--transparency-dark-25);
+    border-bottom: 1px solid var(--transparency-light-25);
 }
 
 /* SIDEBAR */
@@ -245,7 +246,7 @@ label {
 .sidebar[data-background-color="black"]:before,
 .off-canvas-sidebar[data-background-color="black"]:after,
 .off-canvas-sidebar[data-background-color="black"]:before {
-    background: rgb(0 0 0 / 10%);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar[data-background-color="black"] .logo,
@@ -321,7 +322,7 @@ label {
 .nav-tabs>li.active>a:hover {
     color: var(--text);
     cursor: default;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     border: 1px solid transparent;
     border-bottom-color: transparent;
 }
@@ -332,7 +333,7 @@ label {
 }
 
 .modal-body .nav-tabs>li.active>a:hover {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     border: 1px solid transparent;
 }
 
@@ -352,7 +353,7 @@ label {
 .modal-body .nav .open>a,
 .nav .open>a:focus,
 .nav .open>a:hover {
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     border-color: transparent;
 }
 
@@ -383,18 +384,18 @@ label {
 
 .form-control,
 textarea {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text);
 }
 
 .form-control:focus {
-    background-color: rgb(0 0 0 / 50%);
+    background: var(--transparency-dark-50);
 }
 
 .form-control[disabled],
 .form-control[readonly],
 fieldset[disabled] .form-control {
-    background-color: rgba(0, 0, 0, .15);
+    background: var(--transparency-dark-15);
 }
 
 #input_s3_provider:focus,
@@ -428,7 +429,7 @@ fieldset[disabled] .form-control {
 
 .timepicker-spinner .btn:hover,
 .timepicker-spinner .btn:focus {
-    background-color: rgba(255, 255, 255, .08);
+    background-color: var(--transparency-light-10);
     color: var(--text-hover);
     border: 1px solid transparent;
 }
@@ -521,7 +522,7 @@ div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.bt
 }
 
 .close {
-    var(--text-hover);
+    color: var(--text-hover);
 }
 
 .navbar .navbar-nav>li>a.btn-success,
@@ -588,7 +589,7 @@ div.bootbox.modal.fade.bootbox-confirm.in>div>div>div.modal-footer>button.btn.bt
 .table>thead>tr>td.active,
 .table>thead>tr>th.active,
 .row-clickable.active {
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
@@ -629,7 +630,7 @@ hr {
 
 /* PROGRESS BARS */
 .progress {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .progress-bar {
@@ -642,7 +643,7 @@ hr {
 
 /* FOOTER */
 .main-panel>.footer {
-    background: rgb(0 0 0 / 0.25);
+    background: var(--transparency-dark-25);
 }
 
 /* MOBILE */
diff --git a/css/base/duplicati/duplicati-base.css b/css/base/duplicati/duplicati-base.css
index d91b8cc1..3bc31a39 100644
--- a/css/base/duplicati/duplicati-base.css
+++ b/css/base/duplicati/duplicati-base.css
@@ -1,4 +1,5 @@
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 * {
     outline: none !important;
@@ -153,14 +154,14 @@ form.styled select,
 form.styled .input.select select {
     color: var(--text);
     border: none;
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 form.styled input:focus,
 form.styled textarea:focus {
     color: var(--text-hover);
     border: none;
-    background: rgba(0, 0, 0, .45);
+    background: var(--transparency-dark-45);
 }
 
 select:focus,
@@ -204,7 +205,7 @@ body .container .body .contextmenu {
 }
 
 body .container .body .contextmenu li a:hover {
-    background: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
     color: var(--text-hover);
 }
 
@@ -310,7 +311,7 @@ ul.tabs>li {
 /* FOLDER TREE*/
 .tree-view li div.selected {
     border-color: rgba(255, 255, 255, .1);
-    background-color: rgba(252, 252, 252, .25);
+    background: var(--transparency-light-25);
 }
 
 
@@ -321,7 +322,7 @@ body .container .header .state .progress-bar {
 
 /* LOGIN */
 #login h2 {
-    background: rgba(255, 255, 255, .15);
+    background: var(--transparency-light-15);
     color: var(--text);
 }
 
@@ -330,7 +331,7 @@ body .container .header .state .progress-bar {
 }
 
 #login fieldset {
-    background-color: rgba(255, 255, 255, .15);
+    background: var(--transparency-light-15);
 }
 
 #login fieldset input[type="submit"] {
@@ -345,6 +346,6 @@ body .container .header .state .progress-bar {
 
 #login fieldset input[type="email"],
 #login fieldset input[type="password"] {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text);
 }
\ No newline at end of file
diff --git a/css/base/emby/emby-base.css b/css/base/emby/emby-base.css
index 37e4c163..9463def3 100644
--- a/css/base/emby/emby-base.css
+++ b/css/base/emby/emby-base.css
@@ -1,4 +1,5 @@
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 :root {
     --theme-primary-color: var(--accent-color);
@@ -11,15 +12,15 @@
     --theme-background: var(--main-bg-color);
     --header-blur-background: rgba(20,20,20,0.66);
     --drawer-background: #2C2C2E;
-    --docked-drawer-background: rgba(0, 0, 0, 0.25);
+    --docked-drawer-background: var(--transparency-dark-25);
     --button-background: var(--button-color);
-    --card-background: rgba(0, 0, 0, 0.15);
+    --card-background: var(--transparency-dark-15);
     --footer-background: var(--modal-footer-color);
     --footer-blur-background: rgba(29,29,31,0.66);
     
     --header-background: var(--theme-background);
     --theme-body-secondary-text-color: rgba(255, 255, 255, .6);
-    --line-background: rgba(255, 255, 255, .08);
+    --line-background: var(--transparency-light-10);
     --line-size: .08em;
     --scrollbar-thumb-background: rgba(255,255,255,.3);
 }
@@ -29,9 +30,9 @@
         --theme-background: var(--main-bg-color);
         --header-blur-background: rgba(20,20,20,0.66);
         --drawer-background: #2C2C2E;
-        --docked-drawer-background: rgba(0, 0, 0, 0.25);
+        --docked-drawer-background: var(--transparency-dark-25);
         --button-background: #1f1f1f;
-        --card-background: rgba(0, 0, 0, 0.15);
+        --card-background: var(--transparency-dark-15);
         --footer-background: var(--modal-footer-color);
         --footer-blur-background: rgba(29,29,31,0.66);
     }
@@ -41,9 +42,9 @@
     --theme-background: var(--main-bg-color);
     --header-blur-background: rgba(20,20,20,0.66);
     --drawer-background: #2C2C2E;
-    --docked-drawer-background: rgba(0, 0, 0, 0.25);
+    --docked-drawer-background: var(--transparency-dark-25);
     --button-background: #1f1f1f;
-    --card-background: rgba(0, 0, 0, 0.15);
+    --card-background: var(--transparency-dark-15);
     --footer-background: var(--modal-footer-color);
     --footer-blur-background: rgba(29,29,31,0.66);
 }
@@ -175,7 +176,7 @@ html {
 }
 
 .backgroundContainer.withBackdrop {
-    background-color: rgba(0, 0, 0, .83)
+    background: var(--transparency-dark-80)
 }
 
 @media not all and (min-width: 50em) {
@@ -217,7 +218,7 @@ html {
 
 .emby-select-withcolor {
     color: inherit;
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border: var(--line-size) solid transparent
 }
 
@@ -334,7 +335,7 @@ html {
 
 @media(hover: hover) and (pointer:fine) {
     .actionSheetMenuItem:hover {
-        background-color: rgba(255, 255, 255, .2)
+        background: var(--transparency-light-20)
     }
 }
 
@@ -398,7 +399,7 @@ html {
 .emby-input,
 .emby-textarea {
     color: inherit;
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     border: var(--line-size) solid rgba(255, 255, 255, 0.1)
 }
 
diff --git a/css/base/filebrowser/filebrowser-base.css b/css/base/filebrowser/filebrowser-base.css
index 67f64a40..336962d8 100644
--- a/css/base/filebrowser/filebrowser-base.css
+++ b/css/base/filebrowser/filebrowser-base.css
@@ -11,6 +11,7 @@
 /*			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 .message {
     color: var(--text-hover);
@@ -48,7 +49,7 @@ th {
 #login input[type=password],
 #login input[type=text] {
     color: var(--text-hover) !important;
-    background-color: rgba(0, 0, 0, 0.15) !important;
+    background: var(--transparency-dark-15) !important;
     border: none;
 }
 
@@ -103,7 +104,7 @@ body {
 }
 
 nav {
-    background: rgba(0, 0, 0, .45);
+    background: var(--transparency-dark-45);
     height: 100%;
     top: 64px;
     width: 240px;
@@ -124,7 +125,7 @@ nav .action {
 }
 
 nav .action:hover {
-    background-color: rgba(255, 255, 255, 0.05);
+    background: var(--transparency-light-05);
     color: rgb(var(--accent-color));
 }
 
@@ -133,7 +134,7 @@ nav>div {
 }
 
 header {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     background-repeat: repeat, no-repeat;
     background-attachment: fixed, fixed;
     background-position: center center, center center;
@@ -174,20 +175,20 @@ body {
 }
 
 #listing.list .item {
-    background-color: rgba(0, 0, 0, .15);
+    background: var(--transparency-dark-15);
     color: var(--text);
     border: none;
 }
 
 #listing.list .item:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
     border: none;
     transition: .4s;
 }
 
 #listing.list .item.header {
-    background-color: rgba(0, 0, 0, .45);
+    background: var(--transparency-dark-45);
     color: var(--text-hover);
     border-bottom: none;
     right: auto;
@@ -213,7 +214,7 @@ body {
 }
 
 .share__box__info {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .share__box__download {
@@ -271,13 +272,13 @@ svg {
 }
 
 #listing .item {
-    background-color: rgba(0, 0, 0, .15);
+    background: var(--transparency-dark-15);
     color: var(--text);
     border: none;
 }
 
 .input {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
@@ -304,7 +305,7 @@ select>option {
 }
 
 #search .boxes {
-    background-color: rgba(0, 0, 0, .15);
+    background: var(--transparency-dark-15);
     padding: 15px;
 }
 
@@ -313,11 +314,11 @@ select>option {
 }
 
 #search .boxes>div>div {
-    background-color: rgba(0, 0, 0, .10);
+    background: var(--transparency-dark-10);
 }
 
 #search .boxes>div>div:hover {
-    background-color: rgba(255, 255, 255, .08);
+    background-color: var(--transparency-light-10);
 }
 
 #search.active #input {
@@ -343,7 +344,7 @@ select>option {
 }
 
 .card {
-    background-color: rgba(0, 0, 0, .15);
+    background: var(--transparency-dark-15);
 }
 
 .card h3 {
@@ -404,7 +405,7 @@ table th {
 }
 
 #search #input {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 #listing.mosaic .item {
@@ -413,7 +414,7 @@ table th {
 
 #listing.mosaic .item:hover {
     box-shadow: none !important;
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 .dashboard p label {
diff --git a/css/base/flood/flood-base.css b/css/base/flood/flood-base.css
index c6452e1f..329a38aa 100644
--- a/css/base/flood/flood-base.css
+++ b/css/base/flood/flood-base.css
@@ -13,6 +13,7 @@
 /* MOBILE */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 @media (max-width: 720px) {
 
@@ -87,7 +88,7 @@ p,
 
 
 .panel--light {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 .panel {
@@ -101,7 +102,7 @@ p,
 
 .input,
 .inverse .input {
-    background: rgba(255, 255, 255, .05);
+    background: var(--transparency-light-05);
     color: var(--text-hover);
     border: 1px solid #0000;
     box-shadow: 0 1px 1px rgba(210, 216, 222, 0), 0 1px 3px 1px rgba(210, 216, 222, 0);
@@ -125,7 +126,7 @@ p,
 
 .button--quaternary,
 .inverse .button--quaternary {
-    background: rgba(255, 255, 255, .05);
+    background: var(--transparency-light-05);
     border-color: transparent;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0), 0 1px 3px 1px rgba(0, 0, 0, 0);
     color: var(--text);
@@ -150,7 +151,7 @@ p,
 
 .context-menu__items .select__item:focus-visible,
 .context-menu__items .select__item:hover {
-    background: rgba(255, 255, 255, .15);
+    background: var(--transparency-light-15);
 }
 
 .inverse .form__element__addon {
@@ -177,7 +178,7 @@ p,
 }
 
 .sortable-list__item {
-    background: rgb(255 255 255 / 10%);
+    background: var(--transparency-light-10);
     border: 1px solid rgb(255 255 255 / 10%);
 
 }
@@ -188,7 +189,7 @@ p,
 
 .css-q5wzhq:hover {
     color: var(--text-hover);
-    background: rgba(255, 255, 255, .1);
+    background: var(--transparency-light-10);
 }
 
 .css-m5tpeq:hover {
@@ -210,14 +211,14 @@ p,
 
 .inverse .button--tertiary:focus,
 .inverse .button--tertiary:hover {
-    background: rgba(255, 255, 255, .35);
+    background: var(--transparency-light-35);
     border-color: #0000;
     box-shadow: 0 1px 1px rgb(136 153 168 / 0%), 0 1px 3px 1px rgb(0 0 0 / 0%);
     text-shadow: 0 1px 0 #00000000, 0 1px 2px rgb(0 0 0 / 0%);
 }
 
 .inverse .button--tertiary:active {
-    background: rgba(255, 255, 255, .35);
+    background: var(--transparency-light-35);
     border-color: #0000;
     box-shadow: 0 1px 1px rgb(136 153 168 / 0%), 0 1px 3px 1px rgb(0 0 0 / 0%);
     text-shadow: 0 1px 0 #00000000, 0 1px 2px rgb(0 0 0 / 0%);
@@ -225,7 +226,7 @@ p,
 
 .inverse .button--tertiary:focus,
 .inverse .button--tertiary:hover {
-    background: rgba(255, 255, 255, .35);
+    background: var(--transparency-light-35);
     border-color: #0000;
     box-shadow: 0 1px 1px rgb(136 153 168 / 0%), 0 1px 3px 1px rgb(0 0 0 / 0%);
     text-shadow: 0 1px 0 #00000000, 0 1px 2px rgb(0 0 0 / 0%);
@@ -264,7 +265,7 @@ p,
 
 .menu__item.is-selectable:focus-within,
 .menu__item.is-selectable:hover {
-    background: rgba(255, 255, 255, .1);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -315,7 +316,7 @@ p,
 
 .dark .table__row--heading,
 .table__row--heading {
-    background: rgba(255, 255, 255, .15);
+    background: var(--transparency-light-15);
     box-shadow: 0 1px 0 hsl(0deg 0% 100% / 12%);
     color: var(--text-hover);
 }
@@ -455,7 +456,7 @@ p,
 .dark .action:hover,
 .action:focus-visible,
 .action:hover {
-    background: rgba(255, 255, 255, .1);
+    background: var(--transparency-light-10);
     box-shadow: none;
 }
 
@@ -474,7 +475,7 @@ p,
 /* SIDE MENU */
 .dark .application__sidebar,
 .application__sidebar {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     box-shadow: 1px 0 hsl(0deg 0% 100% / 12%);
     color: var(--text);
 }
@@ -625,7 +626,7 @@ p,
 .modal--vertical.modal--tabs-in-header .modal__header,
 .modal--vertical.modal--tabs-in-body .modal__tabs {
     /* Modal side menu*/
-    background: rgb(0 0 0 / 45%) !important;
+    background: var(--transparency-dark-45) !important;
     color: var(--text-hover);
 }
 
@@ -644,7 +645,7 @@ p,
 
 .modal__tabs .modal__tab.is-active {
     color: var(--text-hover);
-    background: rgb(255 255 255 / 15%);
+    background: var(--transparency-light-15);
     border-radius: 3px 3px 0px 0px;
 }
 
@@ -693,7 +694,7 @@ p,
 }
 
 .interactive-list {
-    background: rgb(255 255 255 / 10%);
+    background: var(--transparency-light-10);
     border: 1px solid rgb(255 255 255 / 10%);
     box-shadow: 0 1px 1px rgb(0 0 0 / 15%), 0 1px 3px 1px rgb(0 0 0 / 20%);
     color: var(--text);
diff --git a/css/base/gaps/gaps-base.css b/css/base/gaps/gaps-base.css
index 6fc97d17..e6c788ce 100644
--- a/css/base/gaps/gaps-base.css
+++ b/css/base/gaps/gaps-base.css
@@ -11,6 +11,7 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 body {
     background: var(--main-bg-color);
@@ -54,7 +55,7 @@ body {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .2);
+    background: var(--transparency-dark-20);
     background-clip: padding-box;
 }
 
@@ -66,7 +67,7 @@ body {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .5);
+    background: var(--transparency-light-50);
     background-clip: padding-box;
 }
 
@@ -112,7 +113,7 @@ label {
 /* Header */
 .bg-primary {
     background-color: transparent !important;
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .navbar .list-ul-active,
@@ -152,12 +153,12 @@ label {
 table.dataTable.stripe tbody tr.odd,
 table.dataTable.display tbody tr.odd,
 table.dataTable tbody tr {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 table.dataTable.hover tbody tr:hover,
 table.dataTable.display tbody tr:hover {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 table.dataTable thead th,
@@ -177,14 +178,14 @@ table.dataTable.display tbody td {
 .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
     color: var(--text) !important;
     border: 1px solid transparent;
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25)
 }
 
 .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
 .dataTables_wrapper .dataTables_paginate .paginate_button:active {
     color: var(--text-hover) !important;
     border: 1px solid transparent;
-    background: rgba(255, 255, 255, .08);
+    background: var(--transparency-light-10)
 }
 
 .dataTables_wrapper .dataTables_paginate .paginate_button:active {
@@ -281,7 +282,7 @@ table.dataTable.display tbody td {
 .nav-pills .nav-item.open .nav-link:focus,
 .nav-tabs .nav-item.show .nav-link {
     color: rgb(var(--accent-color));
-    background-color: rgba(255, 255, 255, .1);
+    background: var(--transparency-light-10);
     border-color: transparent;
 }
 
@@ -298,13 +299,13 @@ table.dataTable.display tbody td {
 .nav-tabs .nav-link:focus,
 .nav-tabs .nav-item.open .nav-link:hover,
 .nav-pills .nav-item.open .nav-link:hover {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     border-color: transparent;
     color: var(--text-hover);
 }
 
 .nav-tabs .nav-link.active:hover {
-    background-color: rgba(255, 255, 255, .1);
+    background: var(--transparency-light-10);
 }
 
 .badge-primary {
@@ -313,7 +314,7 @@ table.dataTable.display tbody td {
 }
 
 #plexServers .card-header {
-    background-color: rgba(255, 255, 255, .1);
+    background: var(--transparency-light-10);
     color: var(--text-hover)
 }
 
@@ -322,12 +323,12 @@ table.dataTable.display tbody td {
 }
 
 #plexServers .list-group-item {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     border: none;
 }
 
 #plexServers .card-footer {
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
 }
 
 .dropdown-menu {
@@ -352,7 +353,7 @@ table.dataTable.display tbody td {
 .dropdown-item:focus {
     color: var(--text-hover);
     text-decoration: none;
-    background-color: rgba(255, 255, 255, .08);
+    background-color: var(--transparency-light-10)
 }
 
 /* Input */
diff --git a/css/base/gitea/gitea-base.css b/css/base/gitea/gitea-base.css
index 94837f8b..9f43e61c 100644
--- a/css/base/gitea/gitea-base.css
+++ b/css/base/gitea/gitea-base.css
@@ -13,6 +13,7 @@
 @import url("/css/base/gitea/chroma.css");
 @import url("/css/base/gitea/monaco_vs_dark.css");
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 :root {
     --color-text: var(--text);
@@ -119,7 +120,7 @@ a:hover,
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px !important;
-    background-color: hsla(0, 0%, 100%, .2);
+    background: var(--transparency-dark-20);
     background-clip: padding-box;
     box-shadow: none !important;
 }
@@ -132,7 +133,7 @@ a:hover,
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px !important;
-    background-color: hsla(0, 0%, 100%, .5);
+    background: var(--transparency-light-50);
     background-clip: padding-box;
 }
 
@@ -224,21 +225,21 @@ b:hover,
 .following.bar.light.ui.secondary.menu .active.item,
 .following.bar.lightui.secondary.menu .active.item:hover {
     box-shadow: none;
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
     color: rgb(var(--accent-color));
 }
 
 .ui.secondary.menu .dropdown.item:hover,
 .ui.secondary.menu .link.item:hover,
 .ui.secondary.menu a.item:hover {
-    background: rgb(255 255 255 / 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
 .ui.secondary.menu .active.item,
 .ui.secondary.menu .active.item:hover {
     box-shadow: none;
-    background: rgba(0, 0, 0, .05);
+    background: var(--transparency-dark-05);
     color: var(--text-hover);
 }
 
@@ -249,7 +250,7 @@ b:hover,
 }
 
 .organization.settings .ui.menu {
-    background: rgb(0 0 0 / 10%);
+    background: var(--transparency-dark-10);
     border: 1px solid rgba(255, 255, 255, .1);
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
 }
@@ -257,7 +258,7 @@ b:hover,
 .organization.settings .ui.vertical.menu {
     display: block;
     flex-direction: column;
-    background: rgb(0 0 0 / 15%);
+    background: var(--transparency-dark-15);
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
 }
 
@@ -270,7 +271,7 @@ b:hover,
 }
 
 .ui.segment {
-    background: rgb(0 0 0 / 15%) !important;
+    background: var(--transparency-dark-15) !important;
 }
 
 .ui.attached.segment,
@@ -282,7 +283,7 @@ b:hover,
 }
 
 .ui .info.segment.top {
-    background-color: rgb(0 0 0 / 15%) !important;
+    background-color: var(--transparency-dark-15) !important;
     color: var(--text);
 }
 
@@ -292,17 +293,17 @@ b:hover,
 }
 
 .ui.info.message {
-    background-color: rgb(0 0 0 / 15%);
+    background-color: var(--transparency-dark-15);
     color: #276f86;
 }
 
 .ui.attached.header {
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     border: 1px solid transparent;
 }
 
 .explore .navbar {
-    background-color: rgb(0 0 0 / 25%) !important;
+    background: var(--transparency-dark-25) !important;
 
 }
 
@@ -317,7 +318,7 @@ b:hover,
 }
 
 .ui.progress {
-    background: rgb(255 255 255 / 10%);
+    background: var(--transparency-light-10);
 }
 
 .ui.progress[data-percent="0"] .bar .progress {
@@ -330,11 +331,11 @@ b:hover,
 }
 
 .pagination.menu {
-    background: rgba(255, 255, 255, .08) !important;
+    background: var(--transparency-light-10) !important;
 }
 
 .ui.pagination.menu .active.item {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
     box-shadow: none;
 }
@@ -344,7 +345,7 @@ b:hover,
 }
 
 .feeds .list ul li.private {
-    background-color: rgb(255 255 255 / 10%);
+    background: var(--transparency-light-10);
 }
 
 .ui.secondary.pointing.menu {
@@ -356,7 +357,7 @@ b:hover,
 }
 
 .ui.repository.list .item:not(:first-child) {
-    border-top: 1px solid rgb(255 255 255 / 25%);
+    border-top: 1px solid var(--transparency-light-25);
 
 }
 
@@ -441,7 +442,7 @@ b:hover,
 
 /* SIGN IN NAV BAR*/
 .ui.menu.new-menu {
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
 }
 
 .ui.menu.new-menu::after {
@@ -492,13 +493,13 @@ b:hover,
 }
 
 .ui.menu .ui.dropdown .menu>.active.item {
-    background: rgb(0 0 0 / 10%) !important;
+    background: var(--transparency-dark-10) !important;
     color: rgb(var(--accent-color)) !important;
 }
 
 .ui.menu .ui.dropdown .menu>.item:hover,
 .ui.menu .ui.dropdown .menu>.selected.item {
-    background: rgb(255 255 255 / 0.07) !important;
+    background: var(--transparency-light-10) !important;
     color: var(--text-hover) !important;
 }
 
@@ -529,12 +530,12 @@ b:hover,
 }
 
 .ui.dropdown .menu>.item:hover {
-    background: rgb(255 255 255 / 0.07);
+    background: var(--transparency-light-10);
 }
 
 .ui.dropdown .menu .selected.item,
 .ui.dropdown.selected {
-    background: rgb(0 0 0 / 0.25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
@@ -547,7 +548,7 @@ b:hover,
 input:hover,
 textarea:hover {
     border-color: rgb(255 255 255 / 20%);
-    background: rgb(0 0 0 / .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
@@ -564,14 +565,14 @@ textarea:hover {
 }
 
 .ui.selection.dropdown {
-    background: rgb(0 0 0 / .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
     border-color: rgb(255 255 255 / 10%);
 }
 
 .ui.selection.dropdown:focus {
     border-color: rgba(255, 255, 255, .08);
-    background: rgb(0 0 0 / 50%);
+    background: var(--transparency-dark-50);
     box-shadow: none;
 }
 
@@ -640,7 +641,7 @@ svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9c
 
 #app .ui.item.menu,
 .ui.item.menu .item {
-    background: rgb(0 0 0 / 15%);
+    background: var(--transparency-dark-15);
     border-color: rgb(255 255 255 / 10%);
 }
 
@@ -649,7 +650,7 @@ svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9c
 }
 
 .ui.menu .active.item {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text);
     font-weight: 400;
     box-shadow: none;
@@ -657,25 +658,25 @@ svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label[data-v-a9c
 
 .ui.menu .active.item:hover,
 .ui.vertical.menu .active.item:hover {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
 .ui.menu a.item:hover {
     color: var(--text-hover);
-    background: rgb(0 0 0 / 15%);
+    background: var(--transparency-dark-15);
 }
 
 #app .ui.link.menu .item:hover,
 .ui.menu .dropdown.item:hover,
 .ui.menu .link.item:hover {
     cursor: pointer;
-    background: rgba(0, 0, 0, .03);
+    background: var(--transparency-dark-05);
     color: var(--text-hover);
 }
 
 #app .ui.secondary.segment {
-    background: rgb(0 0 0 / 15%);
+    background: var(--transparency-dark-15);
     color: rgba(0, 0, 0, .6);
 }
 
@@ -686,7 +687,7 @@ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover {
 }
 
 .heatmap-color-0 {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 .activity-bar-graph {
@@ -716,7 +717,7 @@ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover {
 
 /* REPOSITORY */
 .repository .header-wrapper {
-    background-color: rgb(0 0 0 / 24%);
+    background: var(--transparency-dark-25);
 }
 
 .repository .diff-detail-box {
@@ -805,7 +806,7 @@ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover {
 
 .tag-code,
 .tag-code td {
-    background: rgba(255, 255, 255, .1) !important;
+    background: var(--transparency-light-10) !important;
 }
 
 .tag-code td.lines-num {
@@ -814,11 +815,11 @@ svg.vch__wrapper rect.vch__day__square[data-v-a9cfea66]:hover {
 
 a.blob-excerpt {
     color: var(--text);
-    background: rgba(255, 255, 255, .1) !important;
+    background: var(--transparency-light-10) !important;
 }
 
 td.blob-excerpt {
-    background-color: rgba(0, 0, 0, .15);
+    background: var(--transparency-dark-15);
 }
 
 .repo-header .ui.breadcrumb a {
@@ -863,7 +864,7 @@ td.blob-excerpt {
 
 .ui.card,
 .ui.cards>.card {
-    background: rgb(0 0 0 / 15%);
+    background: var(--transparency-dark-15);
     box-shadow: none;
 }
 
@@ -872,7 +873,7 @@ td.blob-excerpt {
 .ui.link.cards .card:not(.icon):hover,
 a.ui.card:hover {
     border: 1px solid rgb(255 255 255 / 20%);
-    background: rgb(255 255 255 / 15%);
+    background: var(--transparency-light-15);
 }
 
 .repository .ui.menu {
@@ -902,7 +903,7 @@ a.ui.card:hover {
     margin-bottom: 10px;
     border: 1px solid rgb(255 255 255 / .1);
     border-radius: 3px;
-    background: rgb(255 255 255 / 10%);
+    background: var(--transparency-light-10);
 }
 
 .repository.release #release-list {
@@ -932,7 +933,7 @@ a.ui.card:hover {
     /* WIKI */
 .repository.wiki.pages .ui.ui.table td.grey:not(.marked),
 .repository.wiki.pages .ui.ui.ui.ui.table tr.grey:not(.marked) {
-    background: rgb(255 255 255 / 0.08);
+    background: var(--transparency-light-10);
     ;
 }
 
@@ -959,11 +960,11 @@ a.ui.card:hover {
 
 #git-graph-container #rev-list li.highlight,
 #git-graph-container #rev-list li.hover {
-    background-color: rgba(255, 255, 255, .05);
+    background: var(--transparency-light-05);
 }
 
 #git-graph-container #rev-list li.highlight.hover {
-    background-color: rgba(255, 255, 255, .05);
+    background: var(--transparency-light-05);
 }
 
 #git-graph-container li .author {
@@ -1005,7 +1006,7 @@ a.ui.card:hover {
 }
 
 .repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) {
-    background-color: rgba(0, 0, 0, 0.15) !important;
+    background: var(--transparency-dark-15) !important;
 }
 
 .repository #commits-table.ui.table>tbody {
@@ -1020,7 +1021,7 @@ a.ui.card:hover {
 .CodeMirror,
 .EasyMDEContainer .CodeMirror {
     border: 1px solid rgb(255 255 255 / .1);
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25)
 }
 
 .CodeMirror-focused {
@@ -1042,14 +1043,14 @@ a.ui.card:hover {
 .editor-toolbar a:hover,
 .editor-toolbar button.active,
 .editor-toolbar button:hover {
-    background: rgb(255 255 255 / 25%);
-    border-color: rgb(255 255 255 / 25%);
+    background: var(--transparency-light-25);
+    border-color: var(--transparency-light-25);
 }
 
 .dropzone {
     min-height: 150px;
     border: 2px solid rgba(0, 0, 0, .3);
-    background: rgb(255 255 255 / 25%) !important;
+    background: var(--transparency-light-25) !important;
     padding: 20px;
 }
 
@@ -1078,7 +1079,7 @@ a.ui.card:hover {
 }
 
 .repository.view.issue .comment-list .comment .content>.header {
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
 }
 
 .repository.view.issue .comment-list .comment .content>.header .actions a {
@@ -1114,7 +1115,7 @@ a.ui.card:hover {
 
 /* TABLE */
 .ui.table>thead>tr>th {
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     color: var(--text);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
@@ -1145,19 +1146,19 @@ w .ui.table>tr>td {
 }
 
 .repository.file.list #repo-files-table tr:hover {
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 .ui.table tbody tr td.selectable:hover,
 .ui.ui.selectable.table>tbody>tr:hover {
-    background: rgb(255 255 255 / 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
 /* FOOTER */
 footer {
-    background-color: rgb(0 0 0 / 25%);
-    border-top: 1px solid rgb(255 255 255 / 25%);
+    background: var(--transparency-dark-25);
+    border-top: 1px solid var(--transparency-light-25);
 }
 
 /* BUTTONS / CHECKBOXES */
@@ -1172,7 +1173,7 @@ footer {
 }
 
 .ui.toggle.checkbox input:checked~label:before {
-    background-color: rgb(0 0 0 / 25%) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .ui.toggle.checkbox input:checked~label,
@@ -1182,8 +1183,8 @@ footer {
 
 .ui.toggle.checkbox label:before,
 .ui.toggle.checkbox input:focus:checked~label:before {
-    background: rgb(255 255 255 / 10%) !important;
-    background-color: rgb(255 255 255 / 10%) !important;
+    background: var(--transparency-light-10) !important;
+    background: var(--transparency-light-10) !important;
 }
 
 .ui.toggle.checkbox input:focus:checked~label,
@@ -1319,7 +1320,7 @@ footer {
 
 .ui.basic.buttons .button:focus,
 .ui.basic.buttons .button:hover {
-    background: rgb(0 0 0 / 15%);
+    background: var(--transparency-dark-15);
     color: var(--button-text);
 }
 
@@ -1416,7 +1417,7 @@ a.ui.labels .label:hover {
 .repository #commits-table td.sha .sha.label .detail.icon,
 .repository #repo-files-table .sha.label .detail.icon,
 .repository .timeline-item.commits-list .singular-commit .sha.label .detail.icon {
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     margin: -6px -10px -4px 0;
     padding: 5px 4px 5px 6px;
     border: 0;
@@ -1448,7 +1449,7 @@ input {
 .ui.form input[type=time],
 .ui.form input[type=url],
 .ui.form input {
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     border: 1px solid transparent;
     color: var(--text);
     border-radius: .28571429rem;
@@ -1472,7 +1473,7 @@ input {
     color: var(--text);
     border-color: rgb(0 0 0 / 15%);
     border-radius: .28571429rem;
-    background: rgb(0 0 0 / 50%);
+    background: var(--transparency-dark-50);
     box-shadow: inset 0 0 0 0 rgba(34, 36, 38, .35);
     caret-color: var(--text) !important;
 }
@@ -1481,7 +1482,7 @@ input {
 .ui.form textarea:focus:hover,
 input:focus:hover,
 textarea:focus:hover {
-    background: rgb(0 0 0 / 50%) !important;
+    background: var(--transparency-dark-50) !important;
     border-color: rgb(255 255 255 / .1) !important;
     color: var(--text-hover) !important;
 }
@@ -1490,7 +1491,7 @@ textarea:focus:hover {
 .ui.form textarea:hover,
 input:hover,
 textarea:hover {
-    background: rgb(0 0 0 / 25%) !important;
+    background: var(--transparency-dark-25) !important;
     border-color: rgb(255 255 255 / .1) !important;
     color: var(--text-hover) !important;
 }
@@ -1498,7 +1499,7 @@ textarea:hover {
 .ui.form textarea:focus {
     color: var(--text);
     border-color: transparent;
-    background: rgba(0, 0, 0, .5);
+    background: var(--transparency-dark-50);
     box-shadow: inset 0 0 0 0 rgba(34, 36, 38, .35);
     -webkit-appearance: none;
     caret-color: var(--text) !important;
@@ -1506,7 +1507,7 @@ textarea:hover {
 
 .ui.form textarea,
 .ui.input textarea {
-    background: rgb(0 0 0 / .25);
+    background: var(--transparency-dark-25);
     border: 1px solid rgba(34, 36, 38, .15);
     color: var(--text);
     caret-color: var(--text) !important;
@@ -1516,14 +1517,14 @@ textarea:hover {
 .ui.input.focus>input,
 .ui.input>input:focus {
     border-color: transparent;
-    background: rgb(0 0 0 / 50%);
+    background: var(--transparency-dark-50);
     color: var(--text);
     box-shadow: none;
     caret-color: var(--text) !important;
 }
 
 .ui.input>input {
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     border: 1px solid rgba(34, 36, 38, .15);
     color: var(--text);
 }
@@ -1542,17 +1543,17 @@ textarea:hover {
 }
 
 .markdown:not(code) table tr {
-    background-color: rgba(0, 0, 0, .26);
+    background: var(--transparency-dark-25);
     border-top: 1px solid #ccc;
 }
 
 .markdown:not(code) table tr:nth-child(2n) {
-    background-color: rgba(0, 0, 0, .45);
+    background: var(--transparency-dark-45);
 }
 
 .markdown:not(code) code,
 .markdown:not(code) tt {
-    background-color: rgb(0 0 0 / 0.25);
+    background: var(--transparency-dark-25);
 }
 
 /* HIGHLIGHTING */
diff --git a/css/base/grafana/grafana-base.css b/css/base/grafana/grafana-base.css
index a26fb18f..d22c958e 100644
--- a/css/base/grafana/grafana-base.css
+++ b/css/base/grafana/grafana-base.css
@@ -10,6 +10,8 @@
 /*		   		        Made by @gilbN					 */
 /*			      https://github.com/gilbN/theme.park			 */
 
+@import url("/css/defaults/transparent.css");
+
 body {
     color: var(--text) !important;
     background: var(--main-bg-color) !important;
@@ -57,7 +59,7 @@ p {
 
 .page-header-canvas,
 .page-toolbar[class*="css-"] {
-    background: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     box-shadow: none !important;
     border-bottom: none !important;
 }
@@ -88,7 +90,7 @@ p {
 }
 
 .variable-value-dropdown.single .selected {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .css-0.gf-form-select-box__menu {
@@ -109,28 +111,28 @@ p {
 .time-picker-calendar .react-calendar__navigation,
 .time-picker-calendar .react-calendar__navigation__arrow,
 .time-picker-calendar .react-calendar__navigation__label {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .time-picker-calendar .react-calendar__month-view__weekdays {
-    background-color: rgba(0, 0, 0, 0.6);
+    background: var(--transparency-dark-60);
 }
 
 .time-picker-calendar .react-calendar__tile--active,
 .time-picker-calendar .react-calendar__tile--active:hover {
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     border: 1px solid rgba(0, 0, 0, 0);
 }
 
 .time-picker-calendar .time-picker-calendar-tile:hover {
     -webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.08);
     box-shadow: 0 0 4px #ffffff00;
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .time-picker-calendar .react-calendar__month-view__days {
-    background-color: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15);
 }
 
 .time-picker-calendar .time-picker-calendar-tile {
@@ -161,11 +163,11 @@ p {
 
 /* Configuration menu */
 .card-item {
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .card-item:hover {
-    background: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 .card-item-sub-name,
@@ -180,53 +182,53 @@ p {
 .gf-tabs-link.active,
 .gf-tabs-link.active:focus,
 .gf-tabs-link.active:hover {
-    background: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .filter-table tbody tr:nth-child(odd) {
-    background: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 .cta-form {
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .empty-list-cta {
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .layout-selector button {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
 .layout-selector button.active {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
     color: var(--text-hover);
 }
 
 /* Configuration menu - Teams */
 .css-1ph0cdx-call-to-action-card {
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .grafana-info-box {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
 }
 
 /* sidemenu */
 .sidemenu-open,
 .sidemenu {
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .sidemenu__logo:hover {
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .sidemenu-item.active,
 .sidemenu-item:hover {
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
     color: rgb(var(--accent-color)) !important;
     border-image: none;
     border-color: rgb(var(--accent-color));
@@ -279,7 +281,7 @@ p {
 .dropdown-menu--menu>li>a:hover,
 .dropdown-menu--navbar>li>a:hover,
 .dropdown-menu--sidemenu>li>a:hover {
-    background: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     color: var(--text-hover) !important;
 }
 
@@ -296,7 +298,7 @@ p {
 }
 
 .dropdown-submenu:hover>a {
-    Background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .icon-circle:hover .fa:hover,
@@ -356,21 +358,21 @@ p {
 
 /* Dashboard row  */
 .dashboard-row--collapsed {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 .search-section {
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     border: none;
 }
 
 .search-item {
-    background: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15)
 }
 
 .search-item.selected,
 .search-item:hover {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 .search-section__header {
@@ -393,7 +395,7 @@ p {
 
 /* Dashboard settings menu */
 .dashboard-settings__aside {
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .dashboard-page--settings-open .navbar {
@@ -421,15 +423,15 @@ p {
 }
 
 .gf-form-select-wrapper {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 .dashboard-settings__nav-item.active {
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 .gf-form-checkbox {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border: none;
 }
 
@@ -468,7 +470,7 @@ p {
 
 /* Variable label box */
 .gf-form-label {
-    background: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     border: none !important;
 }
 
@@ -477,7 +479,7 @@ p {
 }
 
 .gf-form-label--btn:hover {
-    background: rgba(0, 0, 0, 0.45) !important;
+    background: var(--transparency-dark-45) !important;
 }
 
 .variable-option.highlighted,
@@ -488,7 +490,7 @@ p {
 /* Variable dashboard dropdown */
 .variable-value-link {
     padding: 7.4px 10px !important;
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     border: none !important;
     color: var(--text-hover) !important;
 }
@@ -521,7 +523,7 @@ p {
 /* NAVBAR BUTTONS */
 .navbar-button {
     color: var(--text-hover) !important;
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)) !important;
     border: none !important;
 }
@@ -533,7 +535,7 @@ p {
 
 /* PANEL BACKGROUND COLOR*/
 .panel-container {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     border: transparent;
     box-shadow: none !important;
 }
@@ -545,7 +547,7 @@ p {
 }
 
 .panel-header:hover {
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .panel-title-text:hover {
@@ -577,7 +579,7 @@ div.flot-text {
 
 /* table panel background color */
 .table-panel-container {
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 /* table panel border size */
@@ -588,7 +590,7 @@ div.flot-text {
 }
 
 .table-panel-header-bg {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-top: 2px solid transparent;
     border-bottom: 2px solid transparent;
 
@@ -596,7 +598,7 @@ div.flot-text {
 
 /* Panel tables */
 .css-58bavm-thead {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 .css-sq6g4h-row {
@@ -608,15 +610,15 @@ div.flot-text {
 }
 
 .css-2n373z {
-    border-right: 1px solid rgb(255 255 255 / 25%);
+    border-right: 1px solid var(--transparency-light-25);
 }
 
 .css-sq6g4h-row:hover {
-    background-color: rgb(255 255 255 / 0.08);
+    background-color: var(--transparency-light-10);
 }
 
 .css-3o5ryu {
-    background: rgb(0 0 0 / 45%);
+    background: var(--transparency-dark-45);
 }
 
 .css-1n8kpcb-activeTabStyle,
@@ -638,12 +640,12 @@ div>.scrollbar-view>div>[class*="css-"],
 #reactRoot>div>div.main-view>div.css-1mwktlb>div[class*="css-"]>div[class*="css-"]>div>div.Pane.vertical.Pane1>div>div.Pane.horizontal.Pane2>div>div>div[class*="css-"],
 .css-v2fjpc,
 .css-ld7ft6 {
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .tabbed-view-header {
     box-shadow: none;
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-bottom: none;
 }
 
@@ -654,28 +656,28 @@ div>.scrollbar-view>div>[class*="css-"],
 /* panel query settings  */
 .panel-editor__right,
 .toolbar {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .query-editor-row__header {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .query-editor-row__body {
-    background: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15);
 }
 
 .panel-options-group {
-    background: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15);
 }
 
 .gf-form-switch {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border: transparent;
 }
 
 .viz-picker__item {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border: transparent;
 }
 
@@ -687,12 +689,12 @@ div>.scrollbar-view>div>[class*="css-"],
 
 .viz-picker__item:hover {
     box-shadow: 0 0 6px #eb7b18 !important;
-    background: rgba(0, 0, 0, 0.4);
+    background: var(--transparency-dark-40);
     border: 1px solid #eb7b18 !important;
 }
 
 .panel-options-group__header {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .custom-scrollbar .thumb-vertical,
@@ -706,7 +708,7 @@ div>.scrollbar-view>div>[class*="css-"],
 
 .toolbar__main {
     color: var(--text-hover);
-    background-color: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15);
     border: transparent;
 }
 
@@ -743,15 +745,15 @@ border-color: #b56d16 !important;
 }*/
 
 .btn-inverse {
-    background: rgba(0, 0, 0, 0.25);
-    -webkit-box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0, 0, 0, .3);
-    box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0, 0, 0, .3);
+    background: var(--transparency-dark-25);
+    -webkit-box-shadow: 0px 0px 5px 1px var(--transparency-dark-45), 1px 1px 0 0 rgba(0, 0, 0, .3);
+    box-shadow: 0px 0px 5px 1px var(--transparency-dark-45), 1px 1px 0 0 rgba(0, 0, 0, .3);
 }
 
 .btn-primary,
 .btn-success {
-    -webkit-box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0, 0, 0, .3);
-    box-shadow: 0px 0px 5px 1px hsla(0, 0%, 0%, 0.45), 1px 1px 0 0 rgba(0, 0, 0, .3);
+    -webkit-box-shadow: 0px 0px 5px 1px var(--transparency-dark-45), 1px 1px 0 0 rgba(0, 0, 0, .3);
+    box-shadow: 0px 0px 5px 1px var(--transparency-dark-45), 1px 1px 0 0 rgba(0, 0, 0, .3);
 }
 
 .btn-inverse.active,
@@ -760,7 +762,7 @@ border-color: #b56d16 !important;
 .btn-inverse:focus,
 .btn-inverse:hover,
 .btn-inverse[disabled] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 /* New Dashboard */
@@ -775,7 +777,7 @@ border-color: #b56d16 !important;
 }
 
 .add-panel__header {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     box-shadow: none;
     border-bottom: 0px;
 }
@@ -786,13 +788,13 @@ border-color: #b56d16 !important;
 }
 
 .query-type-toggle .btn.active {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
     border: none;
     border-radius: 3px;
 }
 
 .toggle-button-group .btn {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     background-image: none;
     border-color: #00000000;
     border-radius: 3px !important;
@@ -800,7 +802,7 @@ border-color: #b56d16 !important;
 }
 
 .toggle-button-group .btn:hover {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
 }
 
 .logs-panel-options {
@@ -810,7 +812,7 @@ border-color: #b56d16 !important;
 
 /* JSON Model */
 .gf-code-dark {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: #e0e0e0;
 }
 
@@ -929,7 +931,7 @@ input:focus {
 }
 
 .css-1bjepp-input-input {
-    background-color: hsla(0, 0%, 100%, .25);
+    background: var(--transparency-dark-25);
     border-radius: 3px;
     border-color: transparent;
     -webkit-transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
@@ -956,7 +958,7 @@ input:focus {
 
 /*Disabled input*/
 .css-1bjepp-input-input:disabled {
-    background-color: rgba(0, 0, 0, .5);
+    background: var(--transparency-dark-50);
     color: rgb(159, 167, 179);
 }
 
@@ -1013,7 +1015,7 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
 }
 
 .css-y0yg3l {
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
     border-color: transparent;
 }
 
@@ -1024,18 +1026,18 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
 
 /*Folder bars*/
 .css-1umfglk {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25)
 }
 
 .css-1umfglk:hover {
-    background: rgba(0, 0, 0, .35);
+    background: var(--transparency-dark-35)
 }
 
 /* Login Error message*/
 .css-1ow9mne-input-input {
     line-height: 1.5;
     height: 38px;
-    background-color: hsla(0, 0%, 100%, .25);
+    background: var(--transparency-dark-25);
     border-radius: 3px;
     border-color: transparent;
     -webkit-transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
@@ -1059,12 +1061,12 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
 /*Welcome to Grafana*/
 .css-15xxblz,
 .css-1ld19yb {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25)
 }
 
 .css-1as70ku,
 .css-u5zjuh {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25)
 }
 
 .css-17abkeq,
@@ -1088,7 +1090,7 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
 
 .css-10pj50r,
 .css-15rfc12 {
-    background: rgb(0 0 0 / 50%);
+    background: var(--transparency-dark-50);
 }
 
 /*Header*/
@@ -1115,7 +1117,7 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
 
 /*Query box*/
 .css-hz0utb {
-    background: rgba(0, 0, 0, .35);
+    background: var(--transparency-dark-35);
     border-right: 1px solid rgba(0, 0, 0, 0);
 }
 
@@ -1127,7 +1129,7 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
 }
 
 .css-lvafs5 {
-    background: rgba(0, 0, 0, .5);
+    background: var(--transparency-dark-50);
 }
 
 .css-ui3sz4-activeTabStyle {
@@ -1143,31 +1145,31 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
     border-width: 0px 1px 1px;
     border-radius: 3px 3px 0px 0px;
     border-color: transparent !important;
-    background: rgba(0, 0, 0, .5);
+    background: var(--transparency-dark-50);
     overflow: hidden;
 }
 
 .css-1awj6q7-counter {
-    background-color: rgba(0, 0, 0, .5);
+    background: var(--transparency-dark-50);
     color: rgb(255, 255, 255);
 }
 
 /*Transform tab*/
 .css-y2f54e {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 .css-y2f54e:hover {
-    background: rgba(0, 0, 0, .35);
+    background: var(--transparency-dark-35);
 }
 
 .css-1e8invk::before {
-    background: rgba(0, 0, 0, .35) !important;
+    background: var(--transparency-dark-35) !important;
 }
 
 /* Right side menu*/
 .css-1xj5tuf {
-    background: rgba(0, 0, 0, .35);
+    background: var(--transparency-dark-35);
     border-left: 1px solid transparent;
 }
 
@@ -1192,7 +1194,7 @@ body>grafana-app>div>div>react-container>div>div>div.view>div>div.page-container
 
 /*Visualization*/
 .css-1lemfi9 {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     border-color: transparent;
 }
 
@@ -1235,7 +1237,7 @@ body>grafana-app>div>div>react-container>div>div.css-azp59k>div.css-1bd2u9>div>d
     border-style: solid;
     border-color: rgba(255, 255, 255, 0);
     border-image: initial;
-    background: rgba(255, 255, 255, .08)
+    background: var(--transparency-light-10)
 }
 
 input:checked+.gf-form-switch__slider {
@@ -1258,7 +1260,7 @@ input:checked+.gf-form-switch__slider {
 /*SETTINGS*/
 /*Teams*/
 .css-1w9m9al-call-to-action-card {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 /*DASHBOARD SETINGS*/
@@ -1275,14 +1277,14 @@ input:checked+.gf-form-switch__slider {
 }
 
 .navbar--edit {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     border-bottom: 1px solid transparent;
     -webkit-box-shadow: 0 0 10px transparent;
     box-shadow: 0 0 10px transparent;
 }
 
 .grafana-info-box {
-    background-color: rgba(0, 0, 0, .5);
+    background: var(--transparency-dark-50);
     border-top: 3px solid rgb(var(--accent-color));
 }
 
diff --git a/css/base/grafana/organizr-dashboard.css b/css/base/grafana/organizr-dashboard.css
index c7eeaea0..a175678b 100644
--- a/css/base/grafana/organizr-dashboard.css
+++ b/css/base/grafana/organizr-dashboard.css
@@ -34,13 +34,13 @@ div.flot-text {
 
 /* sidemenu */
 .sidemenu-open .sidemenu {
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 .sidemenu__logo:hover {
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 .sidemenu-item.active, .sidemenu-item:hover {
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 @media (max-width: 768px) {
 .sidemenu .sidemenu__logo_small_breakpoint {
@@ -71,15 +71,15 @@ div.flot-text {
 }
 .search-field-wrapper>input {
 	height: 55px !important;
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 .search-field-icon {
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 /* Dashboard settings menu */
 .dashboard-settings__aside {
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 .dashboard-page--settings-open .navbar {
     background: linear-gradient(90deg,rgba(0, 0, 0, .15),rgba(0, 0, 0, 0.25)) !important;
@@ -103,14 +103,14 @@ div.flot-text {
 /*Datasources Menu*/
 
 .add-data-source-item {
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     -webkit-box-shadow: none;
     box-shadow: none;
 }
 .add-data-source-item:hover {
     -webkit-box-shadow: none;
     box-shadow: none;
-    background: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
     border: 1px solid #00000000;
     color: var(--text-hover);
 }
@@ -121,7 +121,7 @@ div.flot-text {
 
 /* Variable label box */
 .gf-form-label {
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 	   border: none !important;
      color: var(--text-hover);
 }
@@ -138,7 +138,7 @@ div.flot-text {
 /* Variable dashboard dropdown */
 .variable-value-link {
     padding: 7.4px 10px !important;
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     border: none !important;
     color: #FFFFFF !important;
 }
@@ -146,7 +146,7 @@ div.flot-text {
 /* Variable input box */
 .gf-form-input {
 	color: #FFFFFF !important;
-    background-color: rgba(255, 255, 255, 0.15) !important;
+    background: var(--transparency-light-15) !important;
     border: 0px solid #262628 !important;
 
 }
@@ -154,7 +154,7 @@ div.flot-text {
 /* NAVBAR BUTTONS */
 .navbar-button {
     color: var(--text-hover) !important;
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     background-image: linear-gradient(180deg,rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25)) !important;
     border: none !important;
 }
@@ -166,7 +166,7 @@ div.flot-text {
 
 /* PANEL BACKGROUND COLOR*/
 .panel-container {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     border: transparent;
     box-shadow: none !important;
 }
@@ -175,7 +175,7 @@ background-color: transparent;
   border: transparent;
 }
 .panel-header:hover {
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 .panel-loading {
     color: transparent;
@@ -204,7 +204,7 @@ div.flot-text {
 
 /* table panel background color */
 .table-panel-container {
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 /* table panel border size */
 .table-panel-table td {
@@ -215,7 +215,7 @@ div.flot-text {
 /* Edit panel tabs  */
 .tabbed-view-header {
     box-shadow: none;
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-bottom: none;
 }
 .tabbed-view-panel-title {
@@ -242,7 +242,7 @@ div.flot-text {
     background: linear-gradient(135deg,rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25));
 }
 .add-panel__header {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     box-shadow: none;
     border-bottom: 0px;
 }
@@ -351,7 +351,7 @@ box-shadow: none !important;
 }
 /*Disabled input*/
 .css-1bjepp-input-input:disabled {
-    background-color: rgba(0, 0, 0, .5);
+    background: var(--transparency-dark-50);
     color: rgb(159, 167, 179);
 }
 .css-1bjepp-input-input:hover {border-color: transparent;}
@@ -372,7 +372,7 @@ transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
 .css-1m6pigl:checked + label {
 color: var(--accent-color) !important;
 border-color: rgba(255, 255, 255, .1);
-background: rgba(0, 0, 0, .5);
+background: var(--transparency-dark-50)
 }
 .css-b40tk8:focus + label {
 box-shadow: rgba(20, 22, 25, 0) 0px 0px 0px 2px, rgba(31, 97, 196, 0) 0px 0px 0px 4px !important;
@@ -383,7 +383,7 @@ background: var(--main-bg-color);
 border-color: transparent;
 }
 .css-y0yg3l {
-background: rgba(0, 0, 0, .25) !important;
+background: var(--transparency-dark-25) !important;
 border-color: transparent;
 }
 
@@ -394,10 +394,10 @@ border-bottom: 1px solid rgba(0, 0, 0, 0);
 
 /*Folder bars*/
 .css-1umfglk {
-background: rgba(0, 0, 0, .25);
+background: var(--transparency-dark-25)
 }
 .css-1umfglk:hover {
-background: rgba(0, 0, 0, .35);
+background: var(--transparency-dark-35)
 }
 
 /* Login Error message*/
@@ -424,10 +424,10 @@ margin: 10px 0px 0px;
 }
 
 /*Welcome to Grafana*/
-.css-15xxblz,.css-1ld19yb {background: rgba(0, 0, 0, .25);}
+.css-15xxblz,.css-1ld19yb {background: var(--transparency-dark-25)}
 
 .css-1as70ku, .css-u5zjuh {
-background: rgba(0, 0, 0, .25);}
+background: var(--transparency-dark-25)}
 .css-17abkeq, .css-5ak73y  {
 color: var(--text-hover);
 }
@@ -454,7 +454,7 @@ background: var(--main-bg-color);
 }
 /*Query box*/
 .css-hz0utb {
-background: rgba(0, 0, 0, .35);
+background: var(--transparency-dark-35);
 border-right: 1px solid rgba(0, 0, 0, 0);
 }
 .query-keyword, .css-wvxxxy, .css-fpnw35   {
@@ -462,7 +462,7 @@ border-right: 1px solid rgba(0, 0, 0, 0);
     color: var(--accent-color);
 }
 .css-lvafs5 {
-    background: rgba(0, 0, 0, .5);
+    background: var(--transparency-dark-50);
 }
 
 .css-ui3sz4-activeTabStyle {
@@ -478,19 +478,19 @@ border-image: initial;
 border-width: 0px 1px 1px;
 border-radius: 3px 3px 0px 0px;
 border-color: transparent !important;
-background: rgba(0, 0, 0, .5);
+background: var(--transparency-dark-50);
 overflow: hidden;
 }
 .css-1awj6q7-counter {
-background-color: rgba(0, 0, 0, .5);
+background: var(--transparency-dark-50);
 color: rgb(255, 255, 255);
 }
 /*Transform tab*/
 .css-y2f54e {
-background: rgba(0, 0, 0, .25);
+background: var(--transparency-dark-25);
 }
 .css-y2f54e:hover {
-background: rgba(0, 0, 0, .35);
+background: var(--transparency-dark-35);
 }
 .css-1e8invk::before {
 background:rgba(0, 0, 0, .35) !important;
@@ -498,7 +498,7 @@ background:rgba(0, 0, 0, .35) !important;
 
 /* Right side menu*/
 .css-1xj5tuf {
-background: rgba(0, 0, 0, .35);
+background: var(--transparency-dark-35);
 border-left: 1px solid transparent;
 }
 /*Dropdown bottom borders*/
@@ -517,7 +517,7 @@ background: var(--accent-color);
 }
 /*Visualization*/
 .css-1lemfi9 {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     border-color: transparent;
 }
 .css-1fsv7gr:hover > div:first-child {
@@ -548,7 +548,7 @@ height: 100%;
     border-style: solid;
     border-color: rgba(255, 255, 255, 0);
     border-image: initial;
-    background: rgba(255, 255, 255, .08)
+    background: var(--transparency-light-10)
 }
 input:checked+.gf-form-switch__slider {
 background: var(--accent-color);
@@ -568,7 +568,7 @@ border-color: rgba(255, 255, 255, .09);
 /*SETTINGS*/
 /*Teams*/
 .css-1w9m9al-call-to-action-card {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25)
     }
 
 
@@ -577,13 +577,13 @@ border-color: rgba(255, 255, 255, .09);
     background: var(--main-bg-color);
 }
 .navbar--edit {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     border-bottom: 1px solid transparent;
     -webkit-box-shadow: 0 0 10px transparent;
     box-shadow: 0 0 10px transparent;
 }
 .grafana-info-box {
-background-color: rgba(0, 0, 0, .5);
+background: var(--transparency-dark-50);
 border-top: 3px solid var(--accent-color);
 }
 /* Variables*/
diff --git a/css/base/guacamole/guacamole-base.css b/css/base/guacamole/guacamole-base.css
index 1c13fbe0..e6cb2db3 100644
--- a/css/base/guacamole/guacamole-base.css
+++ b/css/base/guacamole/guacamole-base.css
@@ -11,6 +11,7 @@
 /*			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 * {
     outline: none !important;
@@ -78,7 +79,7 @@ div.displayMiddle {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .2);
+    background: var(--transparency-dark-20);
     background-clip: padding-box;
 }
 
@@ -90,7 +91,7 @@ div.displayMiddle {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .5);
+    background: var(--transparency-light-50);
     background-clip: padding-box;
 }
 
@@ -100,7 +101,7 @@ div.login-ui {
 }
 
 .login-ui div.login-dialog {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     border: none;
 }
 
@@ -121,22 +122,22 @@ a.button:hover {
 }
 
 .login-ui .login-fields .labeled-field input:focus {
-    background: rgba(0, 0, 0, 0.45) !important;
+    background: var(--transparency-dark-45) !important;
     outline: none;
 }
 
 .login-ui .login-fields .labeled-field.empty input {
-    background: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     outline: none;
 }
 
 .login-ui .login-fields .labeled-field.empty input:focus {
-    background: rgba(0, 0, 0, 0.45) !important;
+    background: var(--transparency-dark-45) !important;
     outline: none;
 }
 
 .login-ui .login-dialog .login-fields input {
-    background-color: rgba(0, 0, 0, 0.45) !important;
+    background: var(--transparency-dark-45) !important;
 }
 
 div.location,
@@ -146,7 +147,7 @@ input[type=number],
 input[type=password],
 textarea {
     color: var(--text-hover) !important;
-    background: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 input[type=checkbox],
@@ -162,7 +163,7 @@ textarea {
 /* HOME MENU */
 .header h2 {
     color: var(--text-hover);
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .connection .icon.vnc,
@@ -246,17 +247,17 @@ table.sorted td {
 }
 
 .settings table.session-list tr.session:hover {
-    background: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 .menu-dropdown.open,
 .menu-dropdown.open:hover {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 .menu-dropdown {
     border-left: none;
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 .menu-dropdown .menu-contents li a {
@@ -269,17 +270,17 @@ table.sorted td {
 
 .menu-dropdown .menu-contents li a.current,
 .menu-dropdown .menu-contents li a.current:hover {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover)
 }
 
 .menu-dropdown .menu-contents li a:hover {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
 .menu-dropdown:hover {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
@@ -300,7 +301,7 @@ table.sorted td {
 }
 
 .header .filter {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .filter .search-string {
@@ -312,7 +313,7 @@ table.sorted td {
     padding-left: 2.25em !important;
     width: 100%;
     max-width: none;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border: 0;
 }
 
@@ -334,12 +335,12 @@ textarea {
 }
 
 .recent-connections .connection:hover {
-    background: hsla(0, 0%, 100%, 0.08);
+    background: var(--transparency-dark-10);
     color: var(--link-color-hover);
 }
 
 .list-item:not(.selected) .caption:hover {
-    background: hsla(0, 0%, 100%, 0.07);
+    background: var(--transparency-dark-10);
     color: var(--link-color-hover);
 }
 
@@ -380,7 +381,7 @@ textarea {
 
 .clipboard,
 .clipboard-service-target {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
@@ -419,7 +420,7 @@ textarea {
 }
 
 .page-tabs .page-list li a[href]:hover {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .user a:visited,
@@ -452,7 +453,7 @@ input[type=number],
 input[type=password],
 textarea {
     border: 0;
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25)
 }
 
 .location-chooser .dropdown {
@@ -469,14 +470,14 @@ textarea {
 .page-tabs .page-list li a[href].current:hover,
 .section-tabs li a.current,
 .section-tabs li a.current:hover {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     cursor: default;
     color: rgb(var(--accent-color)) !important;
 }
 
 .page-tabs .page-list li a[href]:hover,
 .section-tabs li a:hover {
-    background-color: hsla(0, 0%, 100%, 0.07);
+    background: var(--transparency-dark-10);
     color: var(--text-hover) !important;
 }
 
@@ -489,7 +490,7 @@ textarea {
 }
 
 .manage-user .notice.read-only {
-    background: hsla(0, 0%, 100%, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 /* DUA 2FA PAGE */
diff --git a/css/base/jackett/jackett-base.css b/css/base/jackett/jackett-base.css
index 2dde7f32..bc8f42eb 100644
--- a/css/base/jackett/jackett-base.css
+++ b/css/base/jackett/jackett-base.css
@@ -11,6 +11,7 @@
 /*			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 * {
     outline: none !important;
@@ -73,7 +74,7 @@ hr {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .2);
+    background: var(--transparency-dark-20);
     background-clip: padding-box;
 }
 
@@ -85,7 +86,7 @@ hr {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .5);
+    background: var(--transparency-light-50);
     background-clip: padding-box;
 }
 
@@ -104,7 +105,7 @@ hr {
 .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
 .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
     color: var(--text-hover) !important;
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 
@@ -122,7 +123,7 @@ hr {
 .dataTables_wrapper .dataTables_paginate .paginate_button {
     color: var(--button-text) !important;
     border: 1px solid transparent;
-    background: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
@@ -143,7 +144,7 @@ a:hover {
 }
 
 .dataTables_wrapper .dataTables_filter input {
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     border: none;
     outline: none;
     color: var(--text-hover);
@@ -168,14 +169,14 @@ table.dataTable.cell-border tbody td {
 button,
 input,
 textarea {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border: none;
     outline: none;
 }
 
 
 #page {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 table.dataTable.stripe tbody tr.odd,
@@ -185,7 +186,7 @@ table.dataTable.display tbody tr.odd {
 
 table.dataTable.hover tbody tr:hover,
 table.dataTable.display tbody tr:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 table.dataTable tbody tr {
@@ -204,13 +205,13 @@ table.dataTable thead td {
 
 .form-control {
     color: var(--text-hover);
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border: 1px solid #ccc0;
 
 }
 
 select {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: var(--text) !important;
     border: 1px solid rgba(0, 0, 0, 0) !important;
     -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
@@ -237,13 +238,13 @@ select:focus {
 .form-control[disabled],
 .form-control[readonly],
 fieldset[disabled] .form-control {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .dataTables_length select,
 .dataTables_filter input,
 .dataTable.compact tfoot td select {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border: 1px solid rgba(204, 204, 204, 0);
 }
 
@@ -304,7 +305,7 @@ fieldset[disabled] .form-control {
 .dropdown-menu>li>a:focus,
 .dropdown-menu>li>a:hover {
     color: var(--text-hover);
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 .dropdown-menu>.active>a,
@@ -312,7 +313,7 @@ fieldset[disabled] .form-control {
 .dropdown-menu>.active>a:hover {
     color: var(--text-hover);
     text-decoration: none;
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
     outline: 0;
 }
 
@@ -378,7 +379,7 @@ fieldset[disabled] .btn-primary.focus,
 fieldset[disabled] .btn-primary:active,
 fieldset[disabled] .btn-primary:focus,
 fieldset[disabled] .btn-primary:hover {
-    background-color: hsla(0, 0%, 100%, 0.35);
+    background: var(--transparency-light-35);
     border-color: hsla(0, 0%, 100%, 0.35);
 }
 
@@ -406,7 +407,7 @@ fieldset[disabled] .btn-primary:hover {
 
 .input-group-addon {
     color: var(--text-hover);
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border: 1px solid #0000;
 
 }
diff --git a/css/base/jellyfin/jellyfin-base.css b/css/base/jellyfin/jellyfin-base.css
index 8dc1bcd2..628ac1d7 100644
--- a/css/base/jellyfin/jellyfin-base.css
+++ b/css/base/jellyfin/jellyfin-base.css
@@ -1,4 +1,5 @@
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 :root {
     --theme-primary-color: var(--accent-color);
@@ -11,15 +12,15 @@
     --theme-background: var(--main-bg-color);
     --header-blur-background: rgba(20, 20, 20, 0.66);
     --drawer-background: #2C2C2E;
-    --docked-drawer-background: rgba(0, 0, 0, 0.25);
+    --docked-drawer-background: var(--transparency-dark-25);
     --button-background: var(--button-color);
-    --card-background: rgba(0, 0, 0, 0.15);
+    --card-background: var(--transparency-dark-15);
     --footer-background: var(--modal-footer-color);
     --footer-blur-background: rgba(29, 29, 31, 0.66);
 
     --header-background: var(--theme-background);
     --theme-body-secondary-text-color: rgba(255, 255, 255, .6);
-    --line-background: rgba(255, 255, 255, .08);
+    --line-background: var(--transparency-light-10);
     --line-size: .08em;
     --scrollbar-thumb-background: rgba(255, 255, 255, .3);
 }
@@ -29,9 +30,9 @@
         --theme-background: var(--main-bg-color);
         --header-blur-background: rgba(20, 20, 20, 0.66);
         --drawer-background: #2C2C2E;
-        --docked-drawer-background: rgba(0, 0, 0, 0.25);
+        --docked-drawer-background: var(--transparency-dark-25);
         --button-background: #1f1f1f;
-        --card-background: rgba(0, 0, 0, 0.15);
+        --card-background: var(--transparency-dark-15);
         --footer-background: var(--modal-footer-color);
         --footer-blur-background: rgba(29, 29, 31, 0.66);
     }
@@ -41,9 +42,9 @@
     --theme-background: var(--main-bg-color);
     --header-blur-background: rgba(20, 20, 20, 0.66);
     --drawer-background: #2C2C2E;
-    --docked-drawer-background: rgba(0, 0, 0, 0.25);
+    --docked-drawer-background: var(--transparency-dark-25);
     --button-background: #1f1f1f;
-    --card-background: rgba(0, 0, 0, 0.15);
+    --card-background: var(--transparency-dark-15);
     --footer-background: var(--modal-footer-color);
     --footer-blur-background: rgba(29, 29, 31, 0.66);
 }
@@ -173,7 +174,7 @@ html {
 }
 
 .backgroundContainer.withBackdrop {
-    background-color: rgba(0, 0, 0, .83)
+    background: var(--transparency-dark-80)
 }
 
 @media not all and (min-width: 50em) {
@@ -215,7 +216,7 @@ html {
 
 .emby-select-withcolor {
     color: inherit;
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border: var(--line-size) solid transparent
 }
 
@@ -341,7 +342,7 @@ html {
 
 @media(hover: hover) and (pointer:fine) {
     .actionSheetMenuItem:hover {
-        background-color: rgba(255, 255, 255, .2);
+        background: var(--transparency-light-20);
         color: var(--text-hover);
     }
 }
@@ -376,7 +377,7 @@ html {
 
 .detailTableBodyRow-shaded:nth-child(even) {
     background: #1c1c1c;
-    background: rgba(30, 30, 30, .9)
+    background: var(--transparency-dark-90)
 }
 
 .listItem-border {
@@ -384,7 +385,7 @@ html {
 }
 
 .listItem-focusscale:focus {
-    background: rgba(54, 54, 54, .8)
+    background: var(--transparency-dark-80)
 }
 
 .listItemIcon:not(.listItemIcon-transparent) {
@@ -411,7 +412,7 @@ html {
 .emby-input,
 .emby-textarea {
     color: inherit;
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     border: var(--line-size) solid rgba(255, 255, 255, 0.1)
 }
 
@@ -705,7 +706,7 @@ html {
 
 .scrollbuttoncontainer {
     color: var(--text-hover);
-    background: rgba(20, 20, 20, .5)
+    background: var(--transparency-dark-50)
 }
 
 .recordingIcon-active {
diff --git a/css/base/kitana/kitana-base.css b/css/base/kitana/kitana-base.css
index 9bcade69..49c84b0b 100644
--- a/css/base/kitana/kitana-base.css
+++ b/css/base/kitana/kitana-base.css
@@ -11,6 +11,7 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 body {
     background: var(--main-bg-color);
@@ -76,7 +77,7 @@ label {
 
 /* NAVBAR */
 #nav .bg-dark {
-    background: hsla(0, 0%, 0%, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .navbar-dark .navbar-nav .nav-link {
@@ -111,7 +112,7 @@ label {
 .dropdown-item:active,
 .dropdown:active:hover {
     color: var(--text-hover);
-    background-color: rgb(0 0 0 / 25%) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .dropdown-item {
@@ -122,29 +123,29 @@ label {
 .dropdown-item:focus {
     color: var(--text-hover);
     text-decoration: none;
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
 }
 
 
 /* CARDS */
 .card {
-    background: rgb(255 255 255 / 8%) !important;
+    background: var(--transparency-light-10) !important;
     border: 1px solid transparent;
 }
 
 .card-header {
     color: var(--text-hover);
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     border-bottom: 1px solid rgba(255, 255, 255, .125) !important;
 }
 
 ul li {
-    background-color: rgb(255 255 255 / 8%) !important;
+    background: var(--transparency-light-10) !important;
     border: none !important;
 }
 
 ul li:hover {
-    background-color: rgb(255 255 255 / 16%) !important;
+    background: var(--transparency-light-15) !important;
     border: none;
 }
 
@@ -152,7 +153,7 @@ ul li:hover {
 .plugin_content .nav-tabs .nav-link.active,
 .nav-tabs .nav-item.show .nav-link {
     color: var(--text-hover) !important;
-    background-color: rgb(0 0 0 / 25%) !important;
+    background: var(--transparency-dark-25) !important;
     border-color: #4440 #4440 transparent;
 }
 
@@ -161,7 +162,7 @@ ul li:hover {
 }
 
 .alert-secondary {
-    background-color: rgb(255 255 255 / 20%);
+    background: var(--transparency-light-20);
 }
 
 /* BUTTONS */
@@ -191,20 +192,20 @@ ul li:hover {
 
 .badge-secondary {
     color: var(--button-text);
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
 }
 
 /* FORMS */
 .form-control {
     color: var(--text) !important;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
     border: 1px solid transparent !important;
     box-shadow: none !important;
     transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
 .form-control:focus {
-    background-color: rgb(0 0 0 / 50%) !important;
+    background: var(--transparency-dark-50) !important;
     color: var(--text-hover) !important;
 }
 
diff --git a/css/base/lazylibrarian/lazylibrarian-base.css b/css/base/lazylibrarian/lazylibrarian-base.css
index 54ca6b27..813b1d16 100644
--- a/css/base/lazylibrarian/lazylibrarian-base.css
+++ b/css/base/lazylibrarian/lazylibrarian-base.css
@@ -11,6 +11,7 @@
 /*			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 * {
     outline: none !important;
@@ -88,7 +89,7 @@ a:hover,
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .2);
+    background: var(--transparency-dark-20);
     background-clip: padding-box;
 }
 
@@ -100,7 +101,7 @@ a:hover,
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .5);
+    background: var(--transparency-light-50);
     background-clip: padding-box;
 }
 
@@ -135,7 +136,7 @@ a:hover,
 .navbar-default .navbar-nav>li>a:focus {
     color: var(--text-hover);
     background-image: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 /* BUTTONS */
@@ -307,7 +308,7 @@ button.close {
 
 .form-control {
     color: var(--text);
-    background-color: rgba(255, 255, 255, 0.1);
+    background: var(--transparency-light-10);
     background-image: none;
     border: 1px solid transparent;
 }
@@ -326,7 +327,7 @@ select.form-control:active,
 .configtable .input-group .form-control:active,
 .configtable .input-group .form-control:focus {
     color: var(--text-hover);
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     background-image: none;
     border: 1px solid transparent;
 }
@@ -335,7 +336,7 @@ select.form-control:active,
 /* TABLE */
 
 table {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 thead {
@@ -343,11 +344,11 @@ thead {
 }
 
 .table-striped>tbody>tr:nth-of-type(odd) {
-    background-color: rgba(0, 0, 0, 0.08);
+    background: var(--transparency-dark-10);
 }
 
 .table-hover>tbody>tr:hover {
-    background-color: rgba(255, 255, 255, 0.08) !important;
+    background: var(--transparency-light-10) !important;
 }
 
 .table-bordered {
@@ -366,7 +367,7 @@ thead {
 /* BOOKWALL */
 
 .table-responsive>.table {
-    background-color: rgba(255, 255, 255, .08);
+    background-color: var(--transparency-light-10)
 }
 
 /* SETTINGS */
@@ -375,7 +376,7 @@ thead {
 .nav-tabs>li.active>a:hover,
 .nav-tabs>li.active>a:focus {
     color: rgb(var(--accent-color));
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     border: 1px solid TRANSPARENT;
     border-bottom-color: transparent;
     cursor: default;
@@ -392,7 +393,7 @@ thead {
 .nav>li>a:hover,
 .nav>li>a:focus {
     text-decoration: none;
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 .input-group-addon {
@@ -451,6 +452,6 @@ legend {
 
 pre {
     color: var(--text);
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border: 1px solid transparent;
 }
\ No newline at end of file
diff --git a/css/base/librespeed/librespeed-base.css b/css/base/librespeed/librespeed-base.css
index 2401ba74..2c38406d 100644
--- a/css/base/librespeed/librespeed-base.css
+++ b/css/base/librespeed/librespeed-base.css
@@ -11,6 +11,7 @@
 /*			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 html,
 body {
@@ -104,7 +105,7 @@ a:-webkit-any-link:hover {
 input {
     font-family: "Roboto", sans-serif;
     color: var(--text-hover);
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     -webkit-rtl-ordering: logical;
     Font-size: 16px;
     padding: 10px;
diff --git a/css/base/lidarr/lidarr-base.css b/css/base/lidarr/lidarr-base.css
index d9dae3ef..0012a8cf 100644
--- a/css/base/lidarr/lidarr-base.css
+++ b/css/base/lidarr/lidarr-base.css
@@ -11,6 +11,7 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 :root {
     --calendar-downloading: 122 67 182;
@@ -169,7 +170,7 @@ a:hover {
 }
 
 [class*="SelectInput-select-"] {
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="SelectInput-select-"]:active,
@@ -186,7 +187,7 @@ a:hover {
 }
 
 [class*="AutoSuggestInput-suggestionHighlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 [class*="CheckInput-primaryIsChecked-"] {
@@ -202,7 +203,7 @@ a:hover {
 /* HEADER */
 
 [class*="PageHeader-header-"] {
-    background-color: rgba(0, 0, 0, .35);
+    background: var(--transparency-dark-35);
     color: var(--text);
 }
 
@@ -232,25 +233,25 @@ a:hover {
 }
 
 [class*="ArtistSearchInput-highlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08)
+    background: var(--transparency-dark-10)
 }
 
 [class*"=ArtistSearchInput-artistContainer-"]::-webkit-scrollbar-thumb,
 [class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 /* MINI RIGHT SCROLL BAR */
 [class*="OverlayScroller-thumb-"],
 [class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb,
 [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="OverlayScroller-thumb-"]:hover,
 [class*="ImportArtistSelectArtist-results-"]::-webkit-scrollbar-thumb:hover,
 [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.25) !important;
+    background: var(--transparency-light-25) !important;
 }
 
 /* ADD NEW */
@@ -273,12 +274,12 @@ a:hover {
 
 [class*="EnhancedSelectInputOption-isSelected-"],
 [class*="EnhancedSelectInputOption-isSelected-"]:hover {
-    background-color: rgba(255, 255, 255, 0.20) !important;
+    background: var(--transparency-light-20) !important;
     color: var(--text-hover);
 }
 
 [class*="EnhancedSelectInputOption-option-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 [class*="HintedSelectInputOption-hintText-"] {
@@ -314,7 +315,7 @@ a:hover {
 
 /* SIDE MENU */
 [class*="PageSidebar-sidebarContainer-"] {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="PageSidebar-sidebar-"] {
@@ -337,7 +338,7 @@ a:hover {
 }
 
 [class*="PageSidebarItem-isActiveParentLink-"] {
-    background-color: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15);
 }
 
 @media only screen and (max-width: 768px) {
@@ -385,7 +386,7 @@ a:hover {
 }
 
 [class*="ArtistIndexOverview-content-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="ArtistIndexOverview-link-"]:hover {
@@ -393,7 +394,7 @@ a:hover {
 }
 
 [class*="ProgressBar-container-"] {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 [class*=".ProgressBar-purple-"] {
@@ -405,7 +406,7 @@ a:hover {
 [class*="ArtistDetailsSeason-albumType-"],
 [class*="ArtistDetailsSeason-collapseButtonContainer-"] {
     border: none !important;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="ArtistDetailsSeason-header-"],
@@ -456,12 +457,12 @@ a:hover {
 
 [class*="AlbumDetailsMedium-medium-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="ExtraFileTable-container-"] {
     border: 1px solid transparent;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="AlbumDetails-selectedTab-"] {
@@ -470,16 +471,16 @@ a:hover {
 
 [class*="AlbumDetailsMedium-collapseButtonContainer-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="ArtistIndexProgressBar-progress-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 [class*="ArtistIndexBanner-title-"],
 [class*="ArtistIndexBannerInfo-info-"] {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
@@ -580,7 +581,7 @@ a:hover {
 
 /* Table options*/
 [class*="TableOptionsColumn-column-"] {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
     border: none;
 }
@@ -594,17 +595,17 @@ a:hover {
 }
 
 [class*="TableRow-row-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: var(--text-hover);
 }
 
 [class*="TableRowCell-cell-"] {
-    border-top: 1px solid rgb(255 255 255 / 25%);
+    border-top: 1px solid var(--transparency-light-25);
 }
 
 /* TOP MENU SERIES */
 [class*="PageToolbar-toolbar-"] {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text);
 }
 
@@ -637,7 +638,7 @@ a:hover {
 /* POSTERS */
 [class*="ArtistIndexPoster-title-"],
 [class*="ArtistIndexPosterInfo-info-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -665,13 +666,13 @@ a:hover {
 
 [class*="MenuItem-menuItem-"]:hover,
 [class*="MenuItem-menuItem-"]:focus {
-    background: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
     color: var(--text-hover);
     text-decoration: none;
 }
 
 [class*="MenuItemSeparator-separator-"] {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 /* ALPHABET JUMP BAR */
@@ -685,7 +686,7 @@ a:hover {
 [class*="AddNewItem-searchIconContainer-"],
 [class*="CheckInput-isIndeterminate-"] {
     border: none;
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -708,7 +709,7 @@ a:hover {
     outline: 0;
     border-color: var(--text-hover);
     box-shadow: none;
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 [class*="TagInput-input-"][class*="TagInput-isFocused-"] {
@@ -741,7 +742,7 @@ a:hover {
 [class*="AddNewArtistSearchResult-searchResult-"]:hover,
 [class*="AddNewArtistSearchResult-underlay-"]:hover,
 [class*="AddNewAlbumSearchResult-underlay-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: inherit;
     text-decoration: none;
 }
@@ -775,7 +776,7 @@ a:hover {
 }
 
 [class*="ImportArtistSearchResult-artist-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 /* IMPORT */
@@ -786,14 +787,14 @@ a:hover {
 
 [class*="ExpandingFileDetails-fileDetails-"] {
     border: 1px solid rgb(255 255 255 / .1);
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
 }
 
 /* IMPORT NEW ARTIST */
 /* Drop down menu/button*/
 [class*="ImportArtistSelectArtist-button-"] {
     border: none;
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     color: var(--text-hover);
 }
 
@@ -806,14 +807,14 @@ a:hover {
 }
 
 [class*="VirtualTableRow-row-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 /*Title*/
 
 [class*="PageJumpBarItem-jumpBarItem-"]:hover {
     color: var(--text-hover);
-    background: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 /*Posters*/
@@ -824,7 +825,7 @@ a:hover {
 /* FOOTER */
 [class*="PageContentFooter-contentFooter-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
@@ -886,18 +887,18 @@ a:hover {
 }
 
 [class*="DayOfWeek-dayOfWeek-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: var(--text-hover);
 }
 
 [class*="CalendarDay-dayOfMonth-"] {
     border-bottom: 1px solid hsla(0, 0%, 100%, .08);
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="CalendarDay-isToday-"],
 [class*="DayOfWeek-isToday-"] {
-    background-color: hsla(0, 0%, 100%, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="CalendarDay-day-"],
@@ -923,7 +924,7 @@ a:hover {
 
 /* calendar agenda */
 [class*="AgendaEvent-event-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 /* SETTINGS */
@@ -950,15 +951,15 @@ a:hover {
 }
 
 [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 [class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 [class*="NamingOption-option-"] {
@@ -966,17 +967,17 @@ a:hover {
 }
 
 [class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 2550, 0.25);
+    background: var(--transparency-light-25);
 }
 
 [class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 2550, 0.35);
+    background: var(--transparency-light-35);
 }
 
 /* PROFILES */
 [class*="Card-card-"],
 [class*="QualityProfiles-addQualityProfile-"] {
-    background-color: rgba(0, 0, 0, .45);
+    background: var(--transparency-dark-45);
     box-shadow: 0 0 10px 1px #000000;
     color: var(--text);
 }
@@ -1001,12 +1002,12 @@ a:hover {
 [class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
 [class*="LanguageProfileItem-languageProfileItem-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
 [class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 [class*="KeyValueListInputItem-keyInput-"],
@@ -1018,7 +1019,7 @@ a:hover {
 
 [class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
     border: 1px solid transparent;
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25)
 }
 
 [class*="QualityDefinitions-sizeLimitHelpText-"] {
@@ -1033,7 +1034,7 @@ a:hover {
 
 [class*="Card-card-"],
 [class*="QualityProfiles-addQualityProfile-"] {
-    background-color: rgba(0, 0, 0, .45);
+    background: var(--transparency-dark-45);
     box-shadow: 0 0 10px 1px #000000;
     color: var(--text);
 }
@@ -1077,7 +1078,7 @@ a:hover {
 /* LOG */
 [class*="Alert-info-"] {
     border-color: transparent;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: #FFC107;
 }
 
@@ -1103,12 +1104,12 @@ a:hover {
 /* Login Page */
 
 .panel-body {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: var(--text);
 }
 
 .panel-header {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
 }
 
 .forgot-password {
@@ -1118,7 +1119,7 @@ a:hover {
 input[type=email],
 input[type=password] {
     border: none;
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -1139,7 +1140,7 @@ input[type=password] {
     outline: 0;
     border-color: var(--text-hover);
     box-shadow: none;
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 /* Custom filter */
@@ -1148,7 +1149,7 @@ input[type=password] {
 }
 
 [class*="CustomFilter-customFilter-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 /* -------------------------LIDARR STUFF------------------------------*/
@@ -1167,7 +1168,7 @@ input[type=password] {
 [class*="ArtistIndexHeader-trackProgress-"]:hover,
 [class*="ArtistIndexHeader-latestAlbum-"]:hover,
 [class*="ArtistIndexHeader-actions-"]:hover {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
@@ -1181,7 +1182,7 @@ input[type=password] {
 [class*="AlbumStudioAlbum-album-"],
 [class*="AlbumStudioAlbum-tracks-"] {
     border: none;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
diff --git a/css/base/logarr/logarr-base.css b/css/base/logarr/logarr-base.css
index a78c502b..a6974bd9 100644
--- a/css/base/logarr/logarr-base.css
+++ b/css/base/logarr/logarr-base.css
@@ -10,6 +10,8 @@
 /*		   		        Made by @gilbN					 */
 /*			      https://github.com/gilbN/theme.park			 */
 
+@import url("/css/defaults/transparent.css");
+
 body {
     font-family: Open Sans Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
     background: var(--main-bg-color) !important;
@@ -56,13 +58,13 @@ body {
 }
 
 .expand::-webkit-scrollbar-thumb {
-    background-color: hsla(0, 0%, 100%, .2) !important;
+    background: var(--transparency-dark-20) !important;
     -webkit-box-shadow: none !important;
     box-shadow: none !important;
 }
 
 .expand::-webkit-scrollbar-thumb:hover {
-    background-color: hsla(0, 0%, 100%, .5) !important;
+    background: var(--transparency-light-50) !important;
 }
 
 body::-webkit-scrollbar-track {
@@ -76,18 +78,18 @@ body::-webkit-scrollbar {
 }
 
 body::-webkit-scrollbar-thumb {
-    background-color: hsla(0, 0%, 100%, .2) !important;
+    background: var(--transparency-dark-20) !important;
     -webkit-box-shadow: none !important;
     box-shadow: none !important;
 }
 
 body::-webkit-scrollbar-thumb:hover {
-    background-color: hsla(0, 0%, 100%, .5) !important;
+    background: var(--transparency-light-50) !important;
 }
 
 .flex-child {
     border-radius: 0px;
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
 }
 
@@ -158,7 +160,7 @@ body.fade-out {
 }
 
 .expandtoggle:hover {
-    background-color: rgba(255, 255, 255, 0.08) !important;
+    background: var(--transparency-light-10) !important;
 }
 
 .expandtoggle:checked~.expandtoggle::before {
@@ -190,7 +192,7 @@ body.fade-out {
     overflow: auto;
     transition: height 0.5s;
     color: rgb(255, 255, 255);
-    background-color: rgba(0, 0, 0, 0.3);
+    background: var(--transparency-dark-30);
     word-wrap: break-word;
     padding: 0 10px 0 10px;
 }
@@ -263,55 +265,55 @@ input:valid {
 /* Sidebar */
 #sidebar-wrapper {
     box-shadow: none !important;
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:hover:before {
     -webkit-transition: none !important;
     transition: none !important;
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:before {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
     transition: none !important;
     -webkit-transition: none !important;
 }
 
 .sidebar-nav li:first-child a {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:nth-child(2):before {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:nth-child(3):before {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:nth-child(4):before {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:nth-child(5):before {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:nth-child(6):before {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:nth-child(7):before {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:nth-child(8):before {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:nth-child(9):before {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 #modalloading {
@@ -339,7 +341,7 @@ input:valid {
 }
 
 #stats {
-    background-color: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
     padding-left: .0rem !important;
     padding-right: 1.11rem !important;
     box-shadow: none;
@@ -403,13 +405,13 @@ input:valid {
 }
 
 #time {
-    background-color: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
     color: var(--text-hover) !important;
     box-shadow: none;
 }
 
 #slidertable {
-    background-color: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
     box-shadow: none;
 }
 
@@ -432,14 +434,14 @@ input:valid {
 
 /*Service tile*/
 .col-lg-4 {
-    background-color: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
     margin: 1rem .1rem 1.5rem 1rem !important;
     width: 9rem !important;
     box-shadow: none;
 }
 
 .col-lg-4:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
     margin: 1rem .1rem 1.5rem 1rem !important;
     width: 9rem !important;
     box-shadow: none;
@@ -480,7 +482,7 @@ input:valid {
 }
 
 #clock {
-    background-color: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
     color: var(--text-hover) !important;
     box-shadow: none;
 }
@@ -497,7 +499,7 @@ input:valid {
 
 .pace,
 .pace-progress {
-    background: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
 }
 
 .pace,
@@ -574,7 +576,7 @@ input:valid {
 
 @media only screen and (max-width: 768px) {
     #dateRight {
-        background-color: rgba(0, 0, 0, .15) !important;
+        background: var(--transparency-dark-15) !important;
         color: var(--text-hover) !important;
         box-shadow: none;
     }
diff --git a/css/base/monitorr/monitorr-base.css b/css/base/monitorr/monitorr-base.css
index 78a7868f..b7a5e1a9 100644
--- a/css/base/monitorr/monitorr-base.css
+++ b/css/base/monitorr/monitorr-base.css
@@ -10,6 +10,7 @@
 /*		   		        Made by @gilbN					 */
 /*			      https://github.com/gilbN/theme.park			 */
 
+@import url("/css/defaults/transparent.css");
 
 #footer:after {
     color: var(--text-hover);
@@ -41,13 +42,13 @@ body::-webkit-scrollbar {
 }
 
 body::-webkit-scrollbar-thumb {
-    background-color: hsla(0, 0%, 100%, .2) !important;
+    background: var(--transparency-dark-20) !important;
     -webkit-box-shadow: none !important;
     box-shadow: none !important;
 }
 
 body::-webkit-scrollbar-thumb:hover {
-    background-color: hsla(0, 0%, 100%, .5) !important;
+    background: var(--transparency-light-50) !important;
 }
 
 
@@ -63,13 +64,13 @@ body::-webkit-scrollbar-thumb:hover {
 }
 
 #myModal3::-webkit-scrollbar-thumb {
-    background-color: hsla(0, 0%, 100%, .2) !important;
+    background: var(--transparency-dark-20) !important;
     -webkit-box-shadow: none !important;
     box-shadow: none !important;
 }
 
 #myModal3::-webkit-scrollbar-thumb:hover {
-    background-color: hsla(0, 0%, 100%, .5) !important;
+    background: var(--transparency-light-50) !important;
 }
 
 #includedContent {
@@ -125,55 +126,55 @@ body::-webkit-scrollbar-thumb:hover {
 /* Sidebar */
 #sidebar-wrapper {
     box-shadow: none !important;
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:hover:before {
     -webkit-transition: none !important;
     transition: none !important;
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:before {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
     transition: none !important;
     -webkit-transition: none !important;
 }
 
 .sidebar-nav li:first-child a {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:nth-child(2):before {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:nth-child(3):before {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:nth-child(4):before {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:nth-child(5):before {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:nth-child(6):before {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:nth-child(7):before {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:nth-child(8):before {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 .sidebar-nav li:nth-child(9):before {
-    background-color: rgba(0, 0, 0, 0.07);
+    background: var(--transparency-dark-10);
 }
 
 #modalloading {
@@ -201,7 +202,7 @@ body::-webkit-scrollbar-thumb:hover {
 }
 
 #stats {
-    background-color: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
     padding-left: .0rem !important;
     padding-right: 1.11rem !important;
     box-shadow: none;
@@ -263,13 +264,13 @@ body::-webkit-scrollbar-thumb:hover {
 }
 
 #time {
-    background-color: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
     color: var(--text-hover) !important;
     box-shadow: none;
 }
 
 #slidertable {
-    background-color: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
     box-shadow: none;
 }
 
@@ -292,14 +293,14 @@ body::-webkit-scrollbar-thumb:hover {
 
 /*Service tile*/
 .col-lg-4 {
-    background-color: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
     margin: 1rem .1rem 1.5rem 1rem !important;
     width: 9rem !important;
     box-shadow: none;
 }
 
 .col-lg-4:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
     margin: 1rem .1rem 1.5rem 1rem !important;
     width: 9rem !important;
     box-shadow: none;
@@ -340,7 +341,7 @@ body::-webkit-scrollbar-thumb:hover {
 }
 
 #clock {
-    background-color: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
     color: var(--text-hover) !important;
     box-shadow: none;
 }
@@ -357,7 +358,7 @@ body::-webkit-scrollbar-thumb:hover {
 
 .pace,
 .pace-progress {
-    background: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
 }
 
 .pace,
diff --git a/css/base/monitorr/organizr-dashboard.css b/css/base/monitorr/organizr-dashboard.css
index 766cbee3..207e7e6f 100644
--- a/css/base/monitorr/organizr-dashboard.css
+++ b/css/base/monitorr/organizr-dashboard.css
@@ -20,7 +20,7 @@ body {
 }
 
 #stats {
-    background-color: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
     padding-left: .0rem !important;
     padding-right: 1.11rem !important;
     box-shadow: none;
@@ -60,13 +60,13 @@ body {
 }
 
 #time {
-    background-color: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
     color: var(--text-hover) !important;
     box-shadow: none;
 }
 
 #slidertable {
-    background-color: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
     box-shadow: none;
 }
 
@@ -89,14 +89,14 @@ body {
 
 /*Service tile*/
 .col-lg-4 {
-    background-color: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
     margin: 1rem .1rem 1.5rem 1rem !important;
     width: 9rem !important;
     box-shadow: none;
 }
 
 .col-lg-4:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
     margin: 1rem .1rem 1.5rem 1rem !important;
     width: 9rem !important;
     box-shadow: none;
@@ -137,7 +137,7 @@ body {
 }
 
 #clock {
-    background-color: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
     color: var(--text-hover) !important;
     box-shadow: none;
 }
@@ -154,7 +154,7 @@ body {
 
 .pace,
 .pace-progress {
-    background: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
 }
 
 .pace,
diff --git a/css/base/moviematch/moviematch-base.css b/css/base/moviematch/moviematch-base.css
index 5beaf4f1..8fab2422 100644
--- a/css/base/moviematch/moviematch-base.css
+++ b/css/base/moviematch/moviematch-base.css
@@ -11,6 +11,7 @@
 /*			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 * {
     outline: none;
@@ -59,7 +60,7 @@ footer,
 .login-form input,
 input,
 .TextInput {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     border: 1px solid transparent;
     color: var(--text)
 }
@@ -139,11 +140,11 @@ input:focus {
 }
 
 .RoomInfoBar {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 /* MENUS POPOVER */
 .PopoverMenuButton:hover {
-    background: rgb(255 255 255 / 15%) !important;
+    background: var(--transparency-light-15) !important;
     color: var(--mm-white);
 }
\ No newline at end of file
diff --git a/css/base/mylar3/mylar3-base.css b/css/base/mylar3/mylar3-base.css
index 6b3ba80e..bbf5687b 100644
--- a/css/base/mylar3/mylar3-base.css
+++ b/css/base/mylar3/mylar3-base.css
@@ -1,4 +1,5 @@
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 * {
     outline: none !important;
@@ -240,7 +241,7 @@ table {
     border-collapse: collapse;
     border-spacing: 0;
     border: 1px solid rgba(255, 255, 255, 0.1) !important;
-    background: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 table th {
@@ -322,8 +323,8 @@ table td a {
 
 
 .dataTables_filter input {
-    background: none repeat scroll 0 0 rgb(255 255 255 / 10%);
-    border: 1px solid rgb(255 255 255 / 10%);
+    background: none repeat scroll 0 0 var(--transparency-light-10);
+    border: 1px solid var(--transparency-light-10);
     font-size: 15px;
     padding: 2px 4px;
     color: var(--text);
@@ -340,20 +341,20 @@ table.display thead th {
 }
 
 /* table.display tr.odd {
-	background-color: rgba(255, 255, 255, 0.15) !important;
+	background: var(--transparency-light-15) !important;
 }
 
 table.display tr.even {
-	background-color: rgba(255, 255, 255, 0.05) !important;
+	background: var(--transparency-light-05) !important;
 } */
 
 /* DataTables row classes */
 table.display tr.odd.gradeA {
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 table.display tr.even.gradeA {
-    background-color: rgba(255, 255, 255, 0.05);
+    background: var(--transparency-light-05);
 }
 
 table.display tr.odd.gradeB {
@@ -528,7 +529,7 @@ table.display_no_select tr.gradeZ td {
 
 table.display_no_select thead th {
     padding: 3px 18px 3px 10px;
-    background-color: rgba(0, 0, 0, 0.1);
+    background: var(--transparency-dark-10);
     font-weight: bold;
     font-size: 16px;
 }
@@ -545,7 +546,7 @@ button {
 }
 
 select {
-    background: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
     color: var(--text);
 }
 
@@ -567,7 +568,7 @@ input {
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
-    background: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
     border: none;
     color: var(--text);
     padding: 2px 4px;
@@ -723,12 +724,12 @@ form .row input[type=password] {
     max-width: 230px;
     margin-right: 5px;
     padding: 3px 5px;
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--transparency-light-10);
 }
 
 form .row input[type=text]:focus,
 form .row input[type=password]:focus {
-    background: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 form .row small {
@@ -1167,7 +1168,7 @@ div#searchbar input[type=text] {
     margin-right: 10px;
     padding: 4px 5px 4px 25px;
     width: 150px;
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--transparency-light-10);
 }
 
 div#searchbar .mini-icon {
@@ -3234,7 +3235,7 @@ div.alphabetInfo {
 
 /* JQUERY UI */
 .ui-tabs .ui-tabs-panel {
-    background: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
@@ -3249,7 +3250,7 @@ div.alphabetInfo {
 }
 
 .ui-tabs .ui-tabs-nav li {
-    background: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
     color: var(--text);
 }
 
@@ -3318,7 +3319,7 @@ body>div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-res
 }
 
 .wrap input {
-    background: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15);
     border-radius: 7px !important;
     margin-bottom: 10px;
 }
diff --git a/css/base/netdata/netdata-base.css b/css/base/netdata/netdata-base.css
index ff8714a2..11414476 100644
--- a/css/base/netdata/netdata-base.css
+++ b/css/base/netdata/netdata-base.css
@@ -11,6 +11,7 @@
 /*			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 body,
 [class*="styled__SocialMediaContainer-"] {
@@ -82,14 +83,14 @@ a:hover,
 
 .navbar-default .navbar-nav>li>a:hover,
 .navbar-default .navbar-nav>li>a:focus {
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
     color: var(--text-hover) !important;
 }
 
 .navbar-default .navbar-nav>.open>a,
 .navbar-default .navbar-nav>.open>a:hover,
 .navbar-default .navbar-nav>.open>a:focus {
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .navbar-default,
@@ -105,7 +106,7 @@ a:hover,
 .navbar-default .navbar-brand:hover,
 .navbar-default .navbar-brand:focus {
     color: var(--text-hover) !important;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .navbar-default .navbar-nav>li>a,
@@ -118,7 +119,7 @@ a:hover,
 .nav-tabs>li.active>a,
 .nav-tabs>li.active>a:hover,
 .nav-tabs>li.active>a:focus {
-    background-color: rgba(0, 0, 0, 0.15) !important;
+    background: var(--transparency-dark-15) !important;
     border: 1px solid #00000000 !important;
     color: rgb(var(--accent-color));
 }
@@ -131,7 +132,7 @@ a:hover,
 
 .nav>li>a:hover,
 .nav>li>a:focus {
-    background-color: rgba(255, 255, 255, 0.08) !important;
+    background: var(--transparency-light-10) !important;
 }
 
 .nav-tabs>li>a:hover {
@@ -143,7 +144,7 @@ a:hover,
 }
 
 #my-netdata-dropdown-content .agent-item:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 .sign-in-btn {
@@ -200,14 +201,14 @@ a:hover,
 }
 
 [class*="item__PanelRowContainer-"]:hover {
-    background: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 
 
 .dropdown-menu>li>a:hover,
 .dropdown-menu>li>a:focus {
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .modal-content {
@@ -250,7 +251,7 @@ a:hover,
 }
 
 .panel {
-    background: rgba(0, 0, 0, 0.45) !important;
+    background: var(--transparency-dark-45) !important;
 }
 
 .panel-default>.panel-heading {
@@ -262,7 +263,7 @@ table {
 }
 
 .table-hover>tbody>tr:hover {
-    background-color: rgba(255, 255, 255, 0.08) !important;
+    background: var(--transparency-light-10) !important;
 }
 
 .table>thead>tr>th {
@@ -316,7 +317,7 @@ table {
 }
 
 [class*="sidebar__Wrapper-"] {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="sidebar__Wrapper-"] [class*="flex-sc-"]:not([class*="collapsible__Animated-"]) {
@@ -403,12 +404,12 @@ hr {
 
 .pagination>li>a,
 .pagination>li>span {
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     border: 1px solid transparent !important;
 }
 
 .pagination>li>a:hover {
-    background-color: rgba(255, 255, 255, 0.08) !important;
+    background: var(--transparency-light-10) !important;
 }
 
 /* Buttons */
diff --git a/css/base/nzbget/nzbget-base.css b/css/base/nzbget/nzbget-base.css
index ae02ea89..c983419f 100644
--- a/css/base/nzbget/nzbget-base.css
+++ b/css/base/nzbget/nzbget-base.css
@@ -11,6 +11,7 @@
 /*			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 body {
     background: var(--main-bg-color);
@@ -26,7 +27,7 @@ body {
 
 /* scroller */
 ::-webkit-scrollbar-corner {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 ::-webkit-scrollbar {
@@ -39,7 +40,7 @@ body {
 ::-webkit-scrollbar-thumb {
     -webkit-border-radius: 2px;
     border-radius: 2px;
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 .modal-header {
@@ -101,7 +102,7 @@ h6 {
 }
 
 .table-striped tbody tr:nth-child(odd) {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .table-striped tbody tr:nth-child(odd) td,
@@ -110,40 +111,40 @@ h6 {
 }
 
 .table-striped tbody tr:nth-child(even) {
-    background-color: rgba(0, 0, 0, 0.08);
+    background: var(--transparency-dark-10);
 }
 
 .table tbody tr:hover,
 .table tbody tr:hover td,
 .table tbody tr:hover a {
     color: var(--text-hover);
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 .table-striped tbody tr.checked:nth-child(2n+1) td,
 .checked .progress {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 tr.checked,
 tr.checked td,
 tr.checked:nth-child(odd) .progress {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 .table tbody tr.checked:hover,
 .table tbody tr.checked:hover td {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 .table tbody tr.checked:hover,
 .table tbody tr.checked:hover td {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 .table.check-simple tbody tr.checked:hover,
 .table.check-simple tbody tr.checked:hover td {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 .table th,
@@ -158,12 +159,12 @@ tr.checked:nth-child(odd) .progress {
 
 .pagination a {
     border: none;
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25)
 }
 
 .pagination a:hover,
 .pagination .active a {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 .pagination .active a {
@@ -172,7 +173,7 @@ tr.checked:nth-child(odd) .progress {
 
 /* PROGRESS BAR */
 .progress {
-    background: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 .progress-warning.progress-striped .bar {
@@ -185,7 +186,7 @@ tr.checked:nth-child(odd) .progress {
 
 .bar-text-left,
 .bar-text-right {
-    var(--text-hover);
+    color: var(--text-hover);
 }
 
 /* NAVBAR */
@@ -211,16 +212,16 @@ tr.checked:nth-child(odd) .progress {
 
 .navbar .nav>li>a:hover {
     color: rgb(var(--accent-color)) !important;
-    background: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 .navbar .nav .active>a {
-    background: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: rgb(var(--accent-color));
 }
 
 .navbar .nav .active>a:hover {
-    background: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: var(--accent-color-hover) !important;
 }
 
@@ -241,7 +242,7 @@ div.check:hover {
 
 .navbar-search .search-query {
     color: var(--text);
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 
 
 }
@@ -250,7 +251,7 @@ div.check:hover {
 .navbar-search .search-query.focused {
     color: var(--text-hover) !important;
     text-shadow: none;
-    background-color: rgba(0, 0, 0, 0.45) !important;
+    background: var(--transparency-dark-45) !important;
 }
 
 .focused .search-caret-button .caret {
@@ -287,7 +288,7 @@ div.check:hover {
 .dropdown-menu .active>a,
 .dropdown-menu .active>a:hover {
     color: var(--text-hover);
-    background-color: hsla(0, 0%, 100%, .05);
+    background: var(--transparency-dark-05);
 }
 
 .dropdown-menu .divider {
@@ -383,7 +384,7 @@ div.check:hover {
 #ConfigData>div:nth-child(4)>div>button,
 #ConfigData>div:nth-child(5)>div>button {
     text-shadow: unset;
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
@@ -391,7 +392,7 @@ div.check:hover {
 #ConfigData>div:nth-child(4)>div>button:hover,
 #ConfigData>div:nth-child(5)>div>button:hover {
     text-shadow: unset;
-    background: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: var(--text-hover);
 }
 
@@ -403,18 +404,18 @@ div.check:hover {
 }
 
 #ConfigData input.btn {
-    background: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     text-shadow: unset;
     color: #a8a8a8;
 }
 
 #Config_ViewButton {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
 #Config_ViewButton:hover {
-    background: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: var(--text-hover);
 }
 
@@ -450,7 +451,7 @@ div.check:hover {
 }
 
 .config-header .btn {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .btn-group.open .btn.dropdown-toggle {
@@ -472,7 +473,7 @@ div.check:hover {
 input,
 textarea,
 .uneditable-input {
-    background: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     color: var(--text) !important;
     border: transparent;
 }
@@ -480,13 +481,13 @@ textarea,
 input:focus:not(.btn),
 textarea:focus,
 .uneditable-input:focus {
-    background: rgba(255, 255, 255, 0.10) !important;
+    background: var(--transparency-light-10) !important;
     color: var(--text-hover) !important;
     border: transparent;
 }
 
 select {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border: 1px solid #00000000;
     color: var(--text)
 }
@@ -521,7 +522,7 @@ textarea:focus {
     border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
     border: 0px;
-    background-color: hsla(0, 0%, 100%, .05);
+    background: var(--transparency-dark-05);
     text-shadow: unset;
     color: var(--text-hover);
     text-transform: capitalize;
@@ -566,12 +567,12 @@ label {
     text-shadow: 0 -1px 0 rgb(0 0 0 / 25%);
     white-space: nowrap;
     vertical-align: baseline;
-    background-color: rgb(255 255 255 / 25%);
+    background-color: var(--transparency-light-25);
 }
 
 #ConfigNav {
     border: 1px solid rgba(0, 0, 0, .25);
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 #ConfigNav.nav-list a {
@@ -598,7 +599,7 @@ label {
 }
 
 .nav>li>a:hover {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: var(--text-hover) !important;
 }
 
@@ -625,7 +626,7 @@ span.help-option-title {
 
 .input-prepend .add-on,
 .input-append .add-on {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     background-image: var(--main-bg-color) !important;
     background-repeat: repeat, no-repeat;
     background-attachment: fixed, fixed;
@@ -640,7 +641,7 @@ span.help-option-title {
 }
 
 .config-settitle {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-bottom: none;
 }
 
diff --git a/css/base/nzbhydra2/nzbhydra2-base.css b/css/base/nzbhydra2/nzbhydra2-base.css
index 5ba98cb9..2dc21f09 100644
--- a/css/base/nzbhydra2/nzbhydra2-base.css
+++ b/css/base/nzbhydra2/nzbhydra2-base.css
@@ -11,6 +11,7 @@
 /*			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 body,
 html {
@@ -40,7 +41,7 @@ a:hover {
 }
 
 .navbar-default {
-    background-color: rgba(0, 0, 0, 0.6);
+    background: var(--transparency-dark-60);
     border-color: transparent;
 }
 
@@ -48,13 +49,13 @@ a:hover {
 .navbar-default .navbar-nav>.active>a:focus,
 .navbar-default .navbar-nav>.active>a:hover {
     color: rgb(var(--accent-color));
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .navbar-default .navbar-nav>li>a:focus,
 .navbar-default .navbar-nav>li>a:hover {
     color: var(--text-hover);
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 .navbar-default .navbar-nav>li>a {
@@ -87,7 +88,7 @@ a:hover {
 .nav-tabs>li.active>a:focus,
 .nav-tabs>li.active>a:hover {
     color: rgb(var(--accent-color));
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border: 1px solid #1a1f2000;
     border-bottom-color: transparent;
 }
@@ -99,7 +100,7 @@ a:hover {
 
 .nav>li>a:focus,
 .nav>li>a:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 .nav-tabs>li>a {
@@ -284,7 +285,7 @@ h6 {
 .dropdown-menu>li>a:hover {
     text-decoration: none;
     color: var(--text-hover);
-    background-color: rgba(255, 255, 255, 0.1);
+    background: var(--transparency-light-10);
 }
 
 .history-title {
@@ -299,7 +300,7 @@ h6 {
 .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
     color: var(--text-muted);
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
@@ -334,13 +335,13 @@ h6 {
 
 .form-control {
     border: 1px solid transparent;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 
 }
 
 .form-control:focus {
     border-color: rgba(255, 255, 255, 0);
-    background: rgba(0, 0, 0, 0.35);
+    background: var(--transparency-dark-35);
     outline: 0;
     -webkit-box-shadow: none;
     box-shadow: none;
@@ -353,19 +354,19 @@ select.form-control:focus {
 
 /* .input-group-addon {
     outline: none;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border: 1px solid transparent;
 
 } */
 
 /* Categories */
 .panel {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border: 1px solid transparent;
 }
 
 .repeatsection {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     box-shadow: 0 0 4px 1px transparent;
 }
 
@@ -416,19 +417,19 @@ hr {
 }
 
 .well {
-    background-color: hsla(0, 0%, 0%, 0.45);
+    background-color: var(--transparency-dark-45);
     border: 1px solid #00000000;
 }
 
 /* Updates */
 .alert-warning {
-    background: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
     border-color: transparent;
     color: var(--text-hover);
 }
 
 .panel-default>.panel-heading {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .panel-default>.panel-heading {
@@ -437,13 +438,13 @@ hr {
 }
 
 .list-group-item {
-    background-color: rgba(0, 0, 0, 0.08);
+    background: var(--transparency-dark-10);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 /* Table */
 table {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .table>thead>tr>th {
@@ -461,7 +462,7 @@ table {
 }
 
 .table-hover>tbody>tr:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 .search-result-tbody {
@@ -469,7 +470,7 @@ table {
 }
 
 pre {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
     border: 1px solid transparent;
 }
 
@@ -492,7 +493,7 @@ body>div>div.center-form.panel.col-md-8>div>form>button:active {
 
 /* SEARCH */
 .search-results-table {
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
@@ -547,7 +548,7 @@ body>div>div.center-form.panel.col-md-8>div>form>button:active {
 .pagination>.disabled>span:focus,
 .pagination>.disabled>span:hover {
     color: var(--text-muted);
-    background-color: rgba(255, 255, 255, .1);
+    background: var(--transparency-light-10);
     border-color: rgba(255, 255, 255, .1);
     cursor: not-allowed
 }
diff --git a/css/base/ombi/ombi-base.css b/css/base/ombi/ombi-base.css
index fb0a7c7d..2a3be240 100644
--- a/css/base/ombi/ombi-base.css
+++ b/css/base/ombi/ombi-base.css
@@ -11,6 +11,7 @@
 /*			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 * {
     outline: none !important;
@@ -39,7 +40,7 @@ html, body, .wizard-background, .content-container, #main-container\ dark > mat-
 
 .container-alert {
     color: var(--text-hover);
-    background-color: rgb(0 0 0 / 50%) !important;
+    background: var(--transparency-dark-50) !important;
     border-color: rgb(var(--accent-color)) !important;
 }
 
@@ -83,7 +84,7 @@ a:hover {
 /* TOP NAV */
 .top-search-bar .mat-form-field-flex {
     border: 1px solid rgba(255, 255, 255, 0.10);
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
 }
 
 /* Drop down menu */
@@ -104,7 +105,7 @@ a:hover {
 }
 
 .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {
-    background: hsl(0deg 0% 0% / 25%);
+    background: var(--transparency-dark-25);
 }
 #main-container\ dark > mat-sidenav-container > mat-sidenav-content > mat-toolbar > button {
     color: rgb(var(--accent-color));
@@ -125,7 +126,7 @@ a:hover {
 
 @media (min-width: 768px) {
     .sidenav-container .sidenav {
-        background: hsla(0, 0%, 0%, 0.438) !important;
+        background: var(--transparency-dark-45) !important;
     }
 }
 
@@ -143,7 +144,7 @@ a:hover {
 }
 
 .mat-drawer-backdrop.mat-drawer-shown {
-    background-color: hsl(0deg 0% 0% / 50%);
+    background: var(--transparency-dark-50);
     backdrop-filter: blur(10px) !important;
     -webkit-backdrop-filter: blur(10px) !important;
 }
@@ -163,7 +164,7 @@ a:hover {
 .sidenav-container .sidenav .active-list-item,
 .sidenav-container .sidenav .active-list-item:hover {
     color: rgb(var(--accent-color)) !important;
-    background: rgb(255 255 255 / 15%) !important;
+    background: var(--transparency-light-15) !important;
     border-radius: .375rem !important;
     padding: 10px 20px;
     height: auto;
@@ -229,7 +230,7 @@ a:hover {
 
 /* DISCOVER PAGE */
 .discover-filter-buttons-group {
-    background: rgb(255 255 255 / 8%) !important;
+    background: var(--transparency-light-10) !important;
     border: 1px solid rgb(255 255 255 / 10%) !important;
     border-radius: 30px;
     color: var(--text-hover);
@@ -238,7 +239,7 @@ a:hover {
 }
 
 .discover-filter-buttons-group .button-active {
-    background: rgba(0, 0, 0, 0.45) !important;
+    background: var(--transparency-dark-45) !important;
 }
 
 #search-filter{
@@ -273,7 +274,7 @@ a:hover {
 /* MOBILE */
 @media (min-width: 768px) {
     .sidenav-container .sidenav {
-        background: hsla(0, 0%, 0%, 0.438) !important;
+        background: var(--transparency-dark-45) !important;
     }
 }
 
@@ -339,7 +340,7 @@ a:hover {
     top: -1px !important;
     position: absolute;
     border-radius: .75rem .75rem 0 0 !important;
-    background-color: rgba(0, 0, 0, 0.7) !important;
+    background-color: var(--transparency-dark-70) !important;
     backdrop-filter: blur(10px) !important;
     -webkit-backdrop-filter: blur(10px) !important;
     transition: 0s -webkit-filter linear;
@@ -378,7 +379,7 @@ a:hover {
 }
 
 .btn-ombi {
-    background-color: rgba(0, 0, 0, 0.85) !important;
+    background-color: var(--transparency-dark-85) !important;
     /* backdrop-filter: blur(10px) !important;
     -webkit-backdrop-filter: blur(10px) !important; */
     border-radius: .375rem !important;
@@ -439,7 +440,7 @@ a:hover {
 
 small.important {
     color: red;
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     border-radius: 5px;
     padding: 5px;
 }
@@ -645,17 +646,17 @@ mat-row {
 
 .mat-paginator,
 .mat-table {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 tr.mat-header-row {
-    background: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45)
 }
 
 .table thead th {
     vertical-align: bottom;
-    border-bottom: 2px solid rgb(255 255 255 / 25%);
-    border-top: 1px solid rgb(255 255 255 / 25%);
+    border-bottom: 2px solid var(--transparency-light-25);
+    border-top: 1px solid var(--transparency-light-25);
 }
 
 /* Details page */
@@ -735,7 +736,7 @@ hr {
 
 /* ADVANCED SEARCH MODAL */
 .alert-info {
-    background: rgba(255, 255, 255, .25) !important;
+    background: var(--transparency-light-25) !important;
     border-color: rgba(255, 255, 255, .1) !important;
     color: var(--text-hover) !important;
 }
\ No newline at end of file
diff --git a/css/base/organizr/organizr-base.css b/css/base/organizr/organizr-base.css
index 9458395a..40449ba2 100644
--- a/css/base/organizr/organizr-base.css
+++ b/css/base/organizr/organizr-base.css
@@ -1,5 +1,6 @@
 @import url(https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900);
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 /*Theme Colors*/
 /*bootstrap Color*/
 /*Normal Color*/
@@ -258,10 +259,10 @@ h6 {
 /* settings */
 /* header*/
 [id*="settings-"]>div>div.panel-heading:not(form > div > div.panel-heading) {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 [id*="settings-"]>div>div.panel-heading .bg-org:not(form > div > div.panel-heading) {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 #account-area > div > div > div > div,
@@ -279,7 +280,7 @@ h6 {
 
 
 #homepage-Deluge-form > fieldset > div > div.panel-wrapper.collapse.in > div > div > div > div.tab-pane.fade.in.active > div > div > div > div > div > div > div {
-    background: rgba(0, 0, 0, .1);
+    background: var(--transparency-dark-10)
 }
 
 /* Homepage Item Modals*/
@@ -289,15 +290,15 @@ h6 {
 [id$="FYI"] > div > div > div > div > div > div > div,
 #\39 w59f92rirFYI > div > div > div > div > div > div > div,
 [id$="Setup"] > div > div > div > div > div {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 [id*="settings-"] .panel {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 #customize-appearance-form>ul>li.active>a {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 #settings-main-system-settings {
@@ -320,33 +321,33 @@ select.form-control:focus {
 
 .form-material .form-control:focus,
 .form-control:focus {
-    background: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
     border: 1px solid rgba(255, 255, 255, 0.1);
 
 }
 
 .form-material .form-control,
 .form-control {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-radius: 3px;
 }
 
 #githubVersions .bg-org {
-    background: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 /* Ace editor stuff */
 .ace-idle-fingers {
-    background-color: rgb(0 0 0 / 25%) !important;
+    background: var(--transparency-dark-25) !important;
     color: var(--text-hover) !important;
 }
 
 .ace-idle-fingers .ace_marker-layer .ace_active-line {
-    background: rgba(255, 255, 255, 0.15) !important;
+    background: var(--transparency-light-15) !important;
 }
 
 .ace-idle-fingers .ace_gutter {
-    background: rgb(255 255 255 / 10%) !important;
+    background: var(--transparency-light-10) !important;
     color: var(--text-hover) !important;
 }
 
@@ -381,7 +382,7 @@ pre {
 
 #loginLogTable>tbody>.even,
 #organizrLogTable>tbody>.even {
-    background: rgba(255, 255, 255, 0.10);
+    background: var(--transparency-light-10);
 }
 
 .dataTables_wrapper .dataTables_paginate .paginate_button.current,
@@ -431,7 +432,7 @@ pre {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .2);
+    background: var(--transparency-dark-20);
     background-clip: padding-box;
 }
 
@@ -443,7 +444,7 @@ pre {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .5);
+    background: var(--transparency-light-50);
     background-clip: padding-box;
 }
 
@@ -478,7 +479,7 @@ th.jsgrid-control-field.jsgrid-align-center {
 .jsGrid-Users,
 .jsgrid-header-sort-desc,
 .jsgrid-header-sort-asc {
-    background: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 tr.jsgrid-header-row th {
@@ -494,14 +495,14 @@ tr.jsgrid-header-row th {
 
 .jsgrid-filter-row>td,
 .jsgrid-header-sortable:hover {
-    background: rgba(0, 0, 0, 0.45) !important;
+    background: var(--transparency-dark-45) !important;
     color: var(--text-hover) !important;
 }
 
 /* Calendar */
 
 #calendar .fc-content-skeleton>table>thead>tr {
-    background: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15)
 }
 
 .fc-event:not(.homepage-drag),
@@ -526,12 +527,12 @@ tr.jsgrid-header-row th {
 .fc-unthemed .fc-row,
 .fc-unthemed .fc-popover {
     border-color: transparent;
-    background: rgba(0, 0, 0, 0.05);
+    background: var(--transparency-dark-05)
 }
 
 .bg-theme,
 .fc-day-header {
-    background: rgba(0, 0, 0, .3) !important;
+    background: var(--transparency-dark-30) !important;
 }
 
 .bg-theme,
@@ -543,15 +544,15 @@ tr.jsgrid-header-row th {
 .fc th.fc-wed,
 .fc th.fc-fri,
 .fc-button {
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 th.fc-day-header.fc-widget-header.fc-today {
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .fc-widget-content.fc-today {
-    background-color: rgba(255, 255, 255, 0.25) !important;
+    background: var(--transparency-light-25) !important;
 }
 
 .fc-popover {
@@ -609,7 +610,7 @@ th.fc-day-header.fc-widget-header.fc-today {
     #lockScreen .white-box {
         width: 100% !important;
         height: 100% !important;
-        background: rgb(0 0 0 / 45%) !important;
+        background: var(--transparency-dark-45) !important;
         margin-top: auto !important;
         border-radius: 0px !important;
     }
@@ -651,7 +652,7 @@ th.fc-day-header.fc-widget-header.fc-today {
 }
 
 .blockMsg {
-    background: rgba(0, 0, 0, 0.9) !important;
+    background: var(--transparency-dark-90) !important;
     border: none !important;
 }
 
@@ -682,7 +683,7 @@ label[for="checkbox-login"]:hover {
 #recoverform>div:nth-child(3)>div>button,
 #leave-recover,
 #form-lockscreen>div.form-group.text-center>div>button {
-    background: rgb(255 255 255 / 15%) !important;
+    background: var(--transparency-light-15) !important;
     color: var(--text)  !important;
     border-radius: 25px;
     border: none;
@@ -693,7 +694,7 @@ label[for="checkbox-login"]:hover {
         -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
         border-radius: 15px;
-        background-color: rgba(0, 0, 0, 0.45) !important;
+        background: var(--transparency-dark-45) !important;
         -webkit-backdrop-filter: blur(10px);
         backdrop-filter: blur(10px);
         color: var(--text-hover)  !important;
@@ -729,7 +730,7 @@ label[for="checkbox-login"]:hover {
 /*2FA login button*/
 .panel-wrapper .panel-body>.btn-warning,
 .btn-warning.disabled {
-    background: hsla(0, 0%, 0%, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     border: 1px solid #ffc36d00 !important;
 }
 
@@ -738,7 +739,7 @@ label[for="checkbox-login"]:hover {
 .panel-yellow .panel-heading {
     color: var(--text-hover);
     border-radius: 3px;
-    background-color: rgba(0, 0, 0, 0.3);
+    background: var(--transparency-dark-30);
     border-color: #00000000;
 }
 
@@ -790,7 +791,7 @@ label[for="checkbox-login"]:hover {
         -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
         border-radius: 15px;
-        background-color: rgba(0, 0, 0, 0.45);
+        background: var(--transparency-dark-45);
         -webkit-backdrop-filter: blur(10px);
         backdrop-filter: blur(10px);
     }
@@ -813,7 +814,7 @@ label[for="checkbox-login"]:hover {
 @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
     #splashScreen {
         overflow-y: scroll;
-        background: rgb(0 0 0 / 80%) !important;
+        background: var(--transparency-dark-80) !important;
         -webkit-backdrop-filter: blur(10px);
         backdrop-filter: blur(10px);
     }
@@ -824,7 +825,7 @@ label[for="checkbox-login"]:hover {
 @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
     #splashScreen {
         overflow-y: scroll;
-        background: rgb(0 0 0 / 90%) !important;
+        background: var(--transparency-dark-90) !important;
     }
 }
 
@@ -979,7 +980,7 @@ label[for="checkbox-login"]:hover {
 }
 
 .bg-success.text-inverse {
-    background-color: rgba(255, 255, 255, 0.15) !important;
+    background: var(--transparency-light-15) !important;
     color: var(--text-hover);
 }
 
@@ -1062,7 +1063,7 @@ label[for="checkbox-login"]:hover {
 
 /* Homepage Now playing card */
 .nowPlayingItem>.white-box>.el-card-item {
-    background: rgba(0, 0, 0, 0.15) !important;
+    background: var(--transparency-dark-15) !important;
     -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
 }
@@ -1156,7 +1157,7 @@ label[for="checkbox-login"]:hover {
 
 #homepageOrderdownloader .nav-tabs>li.active>a:hover,
 #homepageOrderdownloader .nav-tabs>li.active:hover {
-    background: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     opacity: 1;
 }
 
@@ -1191,7 +1192,7 @@ label[for="checkbox-login"]:hover {
 }
 
 .fc-button:hover {
-    background: rgba(255, 255, 255, .08) !important;
+    background: var(--transparency-light-10) !important;
 }
 
 .fc-button {
@@ -1413,13 +1414,13 @@ a:hover,
 
 .progress-bar-inverse,
 .progress {
-    background: rgba(255, 255, 255, 0.25) !important;
+    background: var(--transparency-light-25) !important;
 }
 
 /* Homepage health checks */
 @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
     .bg-inverse .healthPosition {
-        background: rgba(255, 255, 255, 0.2) !important;
+        background: var(--transparency-light-20) !important;
         -webkit-backdrop-filter: saturate(180%) blur(30px);
         backdrop-filter: saturate(180%) blur(30px);
         border-radius: 3px;
@@ -1447,7 +1448,7 @@ a:hover,
 }
 
 #homepageOrderhealthchecks .card-body {
-    background: rgba(255, 255, 255, 0.2);
+    background: var(--transparency-light-20);
 }
 
 .card,
@@ -1466,7 +1467,7 @@ a:hover,
 /* Homepage Tautulli Cards*/
 #homepageOrdertautulli .library-card .card-body,
 #homepageOrdertautulli div:nth-child(8) .card-body {
-    background: rgba(255, 255, 255, .2);
+    background: var(--transparency-light-20)
 }
 
 .homepage-tautulli-card .cardCountType {
@@ -1493,12 +1494,12 @@ a:hover,
 }
 
 .unifiCards .panel-wrapper.collapse.in {
-    background: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15)
 }
 
 /* Homepage Monitor Cards */
 #homepageOrderMonitorr .card-body {
-    background: rgba(255, 255, 255, 0.2);
+    background: var(--transparency-light-20);
 }
 
 #homepageOrderMonitorr .col-lg-2 {
@@ -1519,11 +1520,11 @@ a:hover,
 
 /*Homepage WeatherAndAir Cards*/
 #homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li.tab-current a {
-    background: rgba(0, 0, 0, .2);
+    background: var(--transparency-dark-20);
 }
 
 .health-and-pollutant-section .content-current {
-    background: rgba(255, 255, 255, .2);
+    background: var(--transparency-light-20)
 }
 
 #homepageOrderWeatherAndAir .tabs-style-iconbox nav ul li.tab-current a::after {
@@ -1539,13 +1540,13 @@ a:hover,
 }
 
 #homepageOrderWeatherAndAir .white-box {
-    background: rgba(255, 255, 255, .1);
+    background: var(--transparency-light-10);
     border-radius: 3px;
 }
 
 /*Homepage Speedtest Cards*/
 #allSpeedtest .speedtest-card {
-    background-color: rgba(255, 255, 255, .1);
+    background: var(--transparency-light-10);
 }
 
 #allSpeedtest .speedtest-card .text-muted,
@@ -1597,7 +1598,7 @@ body > div.swal-overlay.swal-overlay--show-modal > div {
 
 #user-list-div .ms-container .ms-selectable,
 #user-list-div .ms-container .ms-selection {
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     color: var(--text);
 }
 
@@ -1714,7 +1715,7 @@ body {
 .nav .open>a,
 .nav .open>a:focus,
 .nav .open>a:hover {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 /*Right panel*/
@@ -1747,7 +1748,7 @@ background: rgb(0 0 0 / 0%) !important;
 } 
 
 .sidebar  {
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     box-shadow: 1px 0px 20px rgb(0 0 0 / 20%);
 
 }
@@ -2271,7 +2272,7 @@ fieldset[disabled] .form-control {
 .table>thead>tr.active>th,
 .table>thead>tr>td.active,
 .table>thead>tr>th.active {
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .asColorPicker-dropdown,
@@ -2417,14 +2418,14 @@ pre,
 select,
 table.dataTable.display tbody tr.odd,
 table.dataTable.stripe tbody tr.odd {
-    background: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15)
 }
 
 input:focus:not(select),
 input:active:not(select),
 .form-control:focus:not(select),
 .form-control:active:not(select) {
-    background: rgba(0, 0, 0, 0.445);
+    background: var(--transparency-dark-45);
     border: 1px solid rgba(120, 130, 140, 0.4);
 }
 
@@ -2505,7 +2506,7 @@ span.select2-results {
 } */
 
 .panel-blue .panel-heading, .panel-info .panel-heading, #help-modal-body > div > div {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 #account-area > div > div > div > div > div.panel-wrapper.collapse.in.main-email-panel > div > div > div  > div > div,
 #plexRecent > div.col-lg-12 > div,
diff --git a/css/base/overseerr/overseerr-base.css b/css/base/overseerr/overseerr-base.css
index a4df0b06..bcabaaa9 100644
--- a/css/base/overseerr/overseerr-base.css
+++ b/css/base/overseerr/overseerr-base.css
@@ -1,4 +1,5 @@
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 /* TEXT */
 [class*="text-gray-"]:not(button:disabled):not(button) {
@@ -125,7 +126,7 @@ input[type=text],
 select,
 textarea {
     border-color: rgba(255, 255, 255, .1);
-    background-color: rgba(7, 7, 7, .25);
+    background: var(--transparency-dark-25);
     color: var(--text);
 }
 
@@ -157,7 +158,7 @@ span.bg-indigo-500 {
 
 .react-select-container .react-select__control {
     border-color: rgba(255, 255, 255, 0.1) !important;
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     color: var(--text) !important;
 }
 
@@ -167,7 +168,7 @@ span.bg-indigo-500 {
 }
 
 .react-select-container .react-select__option--is-focused {
-    background-color: rgba(255, 255, 255, 0.1);
+    background: var(--transparency-light-10);
     color: var(--text-hover)
 }
 
@@ -218,7 +219,7 @@ body {
 }
 
 #search_field {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
 }
 
 
@@ -301,11 +302,11 @@ body>div.z-50.fixed.inset-0.overflow-hidden.bg-opacity-70.bg-gray-800.enter-done
 }
 
 body>div.z-50.fixed.inset-0.overflow-hidden.bg-opacity-70.bg-gray-800.enter-done>div>section>div>div>div>div.overflow-hidden.bg-gray-600.rounded-md.shadow {
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 #__next>div>div.fixed.top-0.bottom-0.left-0.z-30.hidden.lg\:flex.lg\:flex-shrink-0>div>div>div>div.px-2>a {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 /* LOADER */
@@ -372,7 +373,7 @@ a.slider-title:hover {
 
 .media-facts {
     border-color: rgba(255, 255, 255, 0.1);
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover) !important;
     --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -424,7 +425,7 @@ a.slider-title:hover {
 /* SETTINGS */
 
 code {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 #__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div.mt-6>div.hidden.overflow-x-scroll.border-b.border-gray-600.sm\:block.hide-scrollbar>nav>a.px-1.py-4.ml-8.text-sm.font-medium.leading-5.transition.duration-300.border-b-2.border-transparent.whitespace-nowrap.first\:ml-0.text-indigo-500.border-indigo-600 {
@@ -432,7 +433,7 @@ code {
 }
 
 #__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div.mt-10.text-white>div>ul>li>div {
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--transparency-light-10);
     border-color: rgba(255, 255, 255, 0.1);
 }
 
@@ -484,7 +485,7 @@ code {
 table>thead>tr>th,
 #__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div.mt-10.text-white>div>div.flex.flex-col>div>div>div>table>tbody>tr.bg-gray-700,
 #__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div>div>div>div>table>tbody>tr.bg-gray-700 {
-    background: rgb(0 0 0 / 25%) !important;
+    background: var(--transparency-dark-25) !important;
     border-color: rgba(255, 255, 255, 0.1);
 }
 
@@ -516,7 +517,7 @@ body>div.fixed.top-0.bottom-0.left-0.right-0.z-50.flex.items-center.justify-cent
 }
 
 body>div.fixed.top-0.bottom-0.left-0.right-0.z-50.flex.items-center.justify-center.w-full.h-full.bg-gray-800.bg-opacity-70>div>div.relative.mt-4.text-sm.leading-5.text-gray-300>div.flex.flex-col>div>div>div>table>tbody {
-    background: rgb(255, 255, 255, .1);
+    background: var(--transparency-light-10);
 }
 
 
@@ -529,7 +530,7 @@ body>div.fixed.top-0.bottom-0.left-0.right-0.z-50.flex.items-center.justify-cent
 }
 
 #__next>div>div.relative.flex.flex-col.flex-1.w-0.min-w-0.mb-16.lg\:ml-64>main>div>div>div>div.media-header>div.media-actions>span>span>div>div>div>a:hover {
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--transparency-light-10);
 }
 
 
@@ -537,13 +538,13 @@ body>div.fixed.top-0.bottom-0.left-0.right-0.z-50.flex.items-center.justify-cent
     background: var(--drop-down-menu-bg);
 }
 [aria-labelledby="user-menu"] a:hover{
-    background-color: rgba(255, 255, 255, 0.05);
+    background: var(--transparency-light-05);
 }
 
 /* LOGIN */
 #__next>div>div.relative.z-50.mt-8.sm\:mx-auto.sm\:w-full.sm\:max-w-md>div>button,
 #__next>div>div.relative.z-50.mt-8.sm\:mx-auto.sm\:w-full.sm\:max-w-md>div>div:nth-child(3)>button {
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--transparency-light-10);
 }
 
 /* TOAST */
diff --git a/css/base/petio/petio-base.css b/css/base/petio/petio-base.css
index 6539a661..7fec4649 100644
--- a/css/base/petio/petio-base.css
+++ b/css/base/petio/petio-base.css
@@ -11,6 +11,7 @@
 /*			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 * {
     outline: none;
@@ -81,7 +82,7 @@ h6,
 
 /* MENU */
 .menu {
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
 }
 
 @media (max-width: 1099.98px) {
@@ -101,7 +102,7 @@ h6,
 
 @media (min-width: 1100px) {
     .page .sidebar {
-        background: rgb(0 0 0 / 25%);
+        background: var(--transparency-dark-25);
     }
 }
 
@@ -205,12 +206,12 @@ p a:hover,
 
 /* OTHER */
 .widget--item hr {
-    background: rgb(255 255 255 / 50%);
+    background: var(--transparency-light-50);
 }
 
 .widget--item--inner,
 .sr--instance--inner {
-    background: hsl(0deg 0% 0% / 15%);
+    background: var(--transparency-dark-15);
 }
 
 .filter--add:hover {
@@ -224,7 +225,7 @@ p a:hover,
 }
 
 .filter--item {
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
 }
 
 .spinner svg {
@@ -257,7 +258,7 @@ code {
 .color-blue,
 .color-red {
     /* Ratings */
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     border-radius: 5px;
     padding: 0px 7px;
 }
@@ -406,7 +407,7 @@ code {
 
 thead {
     color: var(--text-hover);
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 .generic-table tr:not(.child):not(.sub) th:nth-child(odd),
@@ -448,7 +449,7 @@ input[type=checkbox]:checked:after {
 
 input:not([type=checkbox]):not(.styled-input--input):not([type=file]):focus {
     border-bottom: 2px solid rgb(var(--accent-color));
-    background: rgba(255, 255, 255, .2);
+    background: var(--transparency-light-20);
     color: var(--text-hover)
 }
 
@@ -456,18 +457,18 @@ input:not([type=checkbox]):not(.styled-input--input):not([type=file]),
 .login-wrap input {
     border-bottom: 2px solid rgba(0, 0, 0, 0);
     color: var(--text);
-    background: rgb(255 255 255 / 10%);
+    background: var(--transparency-light-10);
 }
 
 .search-form input:focus {
-    background: hsla(0, 0%, 100%, .1) !important;
+    background: var(--transparency-dark-10) !important;
     color: var(--text-hover) !important;
     border-bottom: 2px solid rgba(0, 0, 0, 0) !important;
 }
 
 /* CALENDAR */
 .rbc-show-more {
-    background-color: hsl(0deg 0% 0% / 25%);
+    background: var(--transparency-dark-25);
 }
 
 .rbc-day-bg.rbc-today {
diff --git a/css/base/pihole/pihole-base.css b/css/base/pihole/pihole-base.css
index 128aa3d0..773dddc8 100644
--- a/css/base/pihole/pihole-base.css
+++ b/css/base/pihole/pihole-base.css
@@ -11,6 +11,7 @@
   /* 			      https://github.com/gilbN/theme.park			 */
 
   @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
   body {
       background: var(--main-bg-color) !important;
@@ -41,7 +42,7 @@
   .treeview-menu>li.active>a,
   .treeview-menu>li>a:hover {
       color: var(--text-hover);
-      background: rgba(255, 255, 255, 0.1);
+      background: var(--transparency-light-10);
   }
 
   .h1,
@@ -106,7 +107,7 @@
       padding: 15px;
       border-bottom: 1px solid rgba(255, 255, 255, .25);
       border-top: 1px solid rgba(255, 255, 255, .25);
-      background-color: rgba(255, 255, 255, .2) !important;
+      background: var(--transparency-light-20) !important;
   }
 
   .navbar-nav>.user-menu>.dropdown-menu>.user-body a {
@@ -122,24 +123,24 @@
   .skin-blue .main-header .logo,
   .main-header .navbar,
   .main-header .logo {
-      background-color: rgba(0, 0, 0, .25);
+      background: var(--transparency-dark-25);
   }
 
   .skin-blue .main-header .logo:hover,
   .skin-blue .main-header .navbar .sidebar-toggle:hover,
   .sidebar-menu>li:hover>a {
-      background-color: rgba(255, 255, 255, .05);
+      background: var(--transparency-light-05);
       color: var(--text-hover) !important;
   }
 
   .sidebar-menu>li.active>a {
-      background-color: rgba(255, 255, 255, .05);
+      background: var(--transparency-light-05);
       color: rgb(var(--accent-color)) !important;
   }
 
   /* Footer */
   .main-footer {
-      background: rgba(0, 0, 0, .25);
+      background: var(--transparency-dark-25);
       color: var(--text);
       border-top: 1px solid rgb(255 255 255 / 20%);
   }
@@ -161,13 +162,13 @@
   .wrapper,
   .main-sidebar,
   .left-side {
-      background-color: rgba(0, 0, 0, .25) !important;
+      background: var(--transparency-dark-25) !important;
   }
 
   .skin-blue .sidebar-menu>li.header,
   .sidebar-menu>li.header {
       color: rgb(var(--accent-color));
-      background: rgba(0, 0, 0, .2);
+      background: var(--transparency-dark-20);
   }
 
   .treeview-menu>li>a {
@@ -175,7 +176,7 @@
   }
 
   .sidebar-menu>li>.treeview-menu {
-      background-color: rgb(0 0 0 / 25%);
+      background: var(--transparency-dark-25);
   }
 
   /* Menus */
@@ -184,12 +185,12 @@
   .sidebar-menu>li:hover>a,
   .sidebar-menu>li.active>a {
       color: var(--text-hover);
-      background: rgba(0, 0, 0, .1);
+      background: var(--transparency-dark-10);
       border-left-color: rgb(var(--accent-color));
   }
 
   .skin-blue .sidebar-menu>li>.treeview-menu {
-      background: rgba(0, 0, 0, .25);
+      background: var(--transparency-dark-25)
   }
 
   .skin-blue .treeview-menu>li>a {
@@ -233,18 +234,18 @@
 
   .main-footer .nav-tabs,
   .nav-tabs-custom .nav-tabs {
-      background-color: rgb(0 0 0 / 0.25);
+      background: var(--transparency-dark-25);
       border-bottom-color: rgb(255 255 255 / 15%);
   }
 
   .nav-tabs-custom>.nav-tabs>li:hover {
-      background-color: rgba(255, 255, 255, .05);
+      background: var(--transparency-light-05);
       color: var(--text-hover);
       border-top-color: rgb(var(--accent-color));
   }
 
   .nav-tabs-custom>.nav-tabs>li:hover>a {
-      background-color: rgba(255, 255, 255, .05);
+      background: var(--transparency-light-05);
   }
 
   /* Dashboard */
@@ -254,14 +255,14 @@
   }
 
   .box {
-      background: rgba(0, 0, 0, .24);
+      background: var(--transparency-dark-25);
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   }
 
   .box-solid>.box-header,
   .box>.box-header {
       color: var(--text);
-      background-color: rgba(0, 0, 0, .25);
+      background: var(--transparency-dark-25);
   }
 
   /* Total queries box*/
@@ -290,7 +291,7 @@
   }
 
   .table-bordered {
-      background: rgba(0, 0, 0, .1);
+      background: var(--transparency-dark-10)
   }
 
   .table-bordered>thead>tr>th,
@@ -303,7 +304,7 @@
   }
 
   .table-striped>tbody>tr:nth-of-type(odd) {
-      background-color: rgba(255, 255, 255, .1);
+      background: var(--transparency-light-10);
   }
 
   /* Query Log */
@@ -354,7 +355,7 @@
   /* Login */
   .panel-default {
       border-color: transparent;
-      background: rgba(0, 0, 0, 0.25);
+      background: var(--transparency-dark-25)
   }
 
   .panel-default>.panel-heading {
@@ -366,7 +367,7 @@
   .panel,
   .panel-body,
   .panel-default>.panel-heading {
-      background-color: rgb(0 0 0 / 25%);
+      background: var(--transparency-dark-25);
       border-radius: 0px;
       border: 1px solid transparent;
       color: var(--text);
@@ -374,7 +375,7 @@
 
   /* Blacklist */
   .nav-tabs-custom {
-      background: rgba(0, 0, 0, 0.25);
+      background: var(--transparency-dark-25)
   }
 
   .nav-tabs-custom>.tab-content {
@@ -393,7 +394,7 @@
 
   .nav-tabs-custom>.nav-tabs>li.active>a,
   .nav-tabs-custom>.nav-tabs>li.active:hover>a {
-      background-color: rgba(0, 0, 0, 0.25);
+      background: var(--transparency-dark-25);
       color: rgb(var(--accent-color)) !important;
   }
 
@@ -411,11 +412,11 @@
 
   /* Network */
   .table-striped>tbody>tr:nth-of-type(odd) {
-      background-color: rgba(0, 0, 0, .25) !important;
+      background: var(--transparency-dark-25) !important;
   }
 
   .table-striped>tbody>tr:nth-of-type(even) {
-      background-color: rgba(0, 0, 0, .5) !important;
+      background: var(--transparency-dark-50) !important;
   }
 
   #network-entries_wrapper.text-center {
@@ -504,13 +505,13 @@
   pre,
   .box-footer,
   .datatables_processing {
-      background: rgba(0, 0, 0, 0.25);
+      background: var(--transparency-dark-25);
       border: 1px solid rgba(255, 255, 255, 0.1);
       color: var(--text);
   }
 
   .dataTables_wrapper input[type="search"] {
-      background-color: rgb(0 0 0 / 25%);
+      background: var(--transparency-dark-25);
       color: var(--text-hover);
   }
 
@@ -529,7 +530,7 @@
   .daterangepicker select.ampmselect,
   .form-control,
   div.dataTables_wrapper div.dataTables_length select {
-      background-color: rgb(0 0 0 / 0.25);
+      background: var(--transparency-dark-25);
       color: var(--text);
       border: 1px solid rgb(255 255 255 / 15%);
   }
@@ -568,7 +569,7 @@
       min-height: 50px;
       border: 3px solid transparent;
       border-radius: 8px;
-      background-color: hsla(0, 0%, 100%, .2);
+      background: var(--transparency-dark-20);
       background-clip: padding-box;
   }
 
@@ -587,6 +588,6 @@
       min-height: 50px;
       border: 3px solid transparent;
       border-radius: 8px;
-      background-color: hsla(0, 0%, 100%, .5);
+      background: var(--transparency-light-50);
       background-clip: padding-box;
   }
\ No newline at end of file
diff --git a/css/base/plex/plex-base.css b/css/base/plex/plex-base.css
index 610f0a6e..a2ec7766 100644
--- a/css/base/plex/plex-base.css
+++ b/css/base/plex/plex-base.css
@@ -11,6 +11,7 @@
 /*			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 * {
   outline: none;
@@ -141,7 +142,7 @@ body,[class*="FullPageBackground-backgroundContainer-"] {
 }
 
 [class*="BottomBar-bottomBar-"] {
-  background-color: rgb(0 0 0 / 70%);
+  background: var(--transparency-dark-70);
   box-shadow: 0 0 4px 0 rgb(0 0 0 / 50%);
 }
 
@@ -157,7 +158,7 @@ body,[class*="FullPageBackground-backgroundContainer-"] {
 
 [class*="SourceSidebar-openSidebar-"][class*="SourceSidebar-sidebar-"],
 [class*="SourceSidebar-sidebar-"] {
-  background: rgba(0, 0, 0, .25);
+  background: var(--transparency-dark-25)
 }
 
 [class*="SourceSidebar-expandedSidebar-"][class*="SourceSidebar-sidebar-"] {
@@ -176,7 +177,7 @@ body,[class*="FullPageBackground-backgroundContainer-"] {
       background: var(--header-blur-background);
       -webkit-backdrop-filter: saturate(1.8) blur(1.5em);
       backdrop-filter: saturate(1.8) blur(1.5em);
-      background-color: rgba(0, 0, 0, .5);
+      background: var(--transparency-dark-50);
   }
 }
 
@@ -204,7 +205,7 @@ body,[class*="FullPageBackground-backgroundContainer-"] {
 
 /* NAVBAR */
 [class*="NavBar-container-"] {
-  background: rgba(0, 0, 0, .25) !important;
+  background: var(--transparency-dark-25) !important;
 }
 
 [class*="NavBarActivityButton-isHighlighted-"] [class*="NavBarActivityButton-activityIcon-"] {
@@ -520,13 +521,13 @@ circle {
 
 .modal-body-with-panes .modal-nav-pane {
   background-image: none;
-  background: rgba(0, 0, 0, .25);
+  background: var(--transparency-dark-25)
 }
 
 .well,
 .files ul li {
   color: var(--text);
-  background-color: rgb(0 0 0 / 10%);
+  background: var(--transparency-dark-10);
   border: 1px solid transparent;
   -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
   box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
@@ -534,7 +535,7 @@ circle {
 
 .edit-section-modal .wizard-blocks-group>.wizard-block.selectable:hover {
   color: var(--text-hover);
-  background-color: rgba(255, 255, 255, .05);
+  background: var(--transparency-light-05);
 }
 
 .edit-section-modal .wizard-blocks-group>.wizard-block.selectable {
@@ -611,7 +612,7 @@ fieldset[disabled] .btn-primary:hover {
 
 .edit-lock-addon {
   color: var(--button-color-hover);
-  background-color: rgba(0, 0, 0, .5);
+  background: var(--transparency-dark-50);
   border-color: transparent;
   -webkit-box-shadow: 0 0 2px rgb(0 0 0 / 30%), inset -2px 2px 2px rgb(0 0 0 / 10%);
   box-shadow: 0 0 2px rgb(0 0 0 / 30%), inset -2px 2px 2px rgb(0 0 0 / 10%);
@@ -712,11 +713,11 @@ hr {
 
 [class*="DirectoryListTableHeader-tableHeaderCell-"],
 [class*="DirectoryListTableHeader-columnMenuButton-"] {
-  background-color: rgb(0 0 0 / 25%);
+  background: var(--transparency-dark-25);
 }
 
 a>[class*="DirectoryListTableHeader-tableHeaderCell-"]:hover,
 button>[class*="DirectoryListTableHeader-tableHeaderCell-"]:hover,
 [class*="DirectoryListTableHeader-columnMenuButton-"]:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background: var(--transparency-light-10);
 }
\ No newline at end of file
diff --git a/css/base/plpp/plpp-base.css b/css/base/plpp/plpp-base.css
index 0edf3862..1db10139 100644
--- a/css/base/plpp/plpp-base.css
+++ b/css/base/plpp/plpp-base.css
@@ -10,6 +10,8 @@
 /*		   		        Made by @gilbN					 */
 /*			      https://github.com/gilbN/theme.park			 */
 
+@import url("/css/defaults/transparent.css");
+
 body {
     background: var(--main-bg-color) !important;
     background-repeat: repeat, no-repeat;
@@ -57,7 +59,7 @@ body {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .2);
+    background: var(--transparency-dark-20);
     background-clip: padding-box;
 }
 
@@ -69,7 +71,7 @@ body {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .5);
+    background: var(--transparency-light-50);
     background-clip: padding-box;
 }
 
@@ -78,12 +80,12 @@ legend {
 }
 
 .navbar-inverse {
-    background-color: rgba(0, 0, 0, 0.6);
+    background: var(--transparency-dark-60);
     border-color: transparent;
 }
 
 .side-nav {
-    background-color: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15);
 }
 
 .navbar-inverse .navbar-nav>li>a {
@@ -92,7 +94,7 @@ legend {
 
 .navbar-inverse .navbar-nav>li>a:hover,
 .navbar-inverse .navbar-nav>li>a:focus {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 .nav>li.selected>a {
@@ -139,7 +141,7 @@ legend {
 
 .plpp_table.even:hover,
 .plpp_table.odd:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 .panel-heading {
@@ -204,7 +206,7 @@ div.plpp_slider {
 }
 
 table {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 table,
@@ -229,7 +231,7 @@ table,
 .pagination>li>a,
 .pagination>li>span {
     color: var(--text-hover);
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border: transparent;
 }
 
@@ -240,7 +242,7 @@ table,
 .pagination>.disabled>a:hover,
 .pagination>.disabled>a:focus {
     color: #BDBDBD;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border: transparent;
     cursor: not-allowed;
 }
diff --git a/css/base/portainer/portainer-base.css b/css/base/portainer/portainer-base.css
index 3d8baaa4..c5ae15e0 100644
--- a/css/base/portainer/portainer-base.css
+++ b/css/base/portainer/portainer-base.css
@@ -11,6 +11,7 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 :root {
     --text-json-tree-branch-preview-color: var(--text);
@@ -47,7 +48,7 @@
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .2);
+    background: var(--transparency-dark-20);
     background-clip: padding-box;
 }
 
@@ -59,7 +60,7 @@
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .5);
+    background: var(--transparency-light-50);
     background-clip: padding-box;
 }
 
@@ -127,7 +128,7 @@ ul.sidebar .sidebar-list a {
 
 /* NEWS */
 .motd-body {
-    background-color: rgba(255, 255, 255, 0.15) !important;
+    background: var(--transparency-light-15) !important;
 }
 
 /* LOGIN */
@@ -148,16 +149,16 @@ ul.sidebar .sidebar-list a {
 
 /* SIDEBAR */
 #sidebar-wrapper {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 .sidebar-header {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 ul.sidebar .sidebar-list a.active {
     color: rgb(var(--accent-color));
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--transparency-light-10);
     border-left: 3px solid rgb(var(--accent-color));
 }
 
@@ -165,7 +166,7 @@ ul.sidebar .sidebar-list a.active {
 .sidebar-footer,
 ul.sidebar .sidebar-list a:hover:not(ul.sidebar .sidebar-list a.active),
 ul.sidebar .sidebar-main a {
-    background: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
     color: var(--text-hover);
 }
 
@@ -180,7 +181,7 @@ ul.sidebar .sidebar-title {
 
 ul.sidebar .sidebar-list .sidebar-sublist a.active {
     border-left: 3px solid rgb(var(--accent-color));
-    background: rgba(255, 255, 255, .08);
+    background: var(--transparency-light-10)
 }
 
 ul.sidebar .sidebar-title {
@@ -201,33 +202,33 @@ ul.sidebar .sidebar-title {
 
 /* WIDGETS */
 .widget {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-color: transparent;
 }
 
 .widget .widget-body table thead {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .widget .widget-header {
     color: var(--text-hover);
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     border-bottom: 1px solid transparent;
 }
 
 /* DATATABLES */
 .datatable .toolBar {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .datatable .footer {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: var(--text);
 }
 
 .blocklist-item--selected,
 .blocklist-item:hover {
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
     color: var(--text);
 }
 
@@ -244,11 +245,11 @@ ul.sidebar .sidebar-title {
     border-top: 1px solid rgba(255, 255, 255, .1);
     border-bottom: 1px solid rgba(255, 255, 255, .1);
     padding: 8px;
-    background: rgba(255, 255, 255, .15);
+    background: var(--transparency-light-15)
 }
 
 .datatable .searchBar:focus-within {
-    background:rgba(255, 255, 255, .25);
+    background: var(--transparency-light-25);
     color: var(--text-hover);
 }
 
@@ -267,7 +268,7 @@ ul.sidebar .sidebar-title {
 .table>thead>tr.active>th,
 .table>thead>tr>td.active,
 .table>thead>tr>th.active {
-    background-color: rgba(255, 255, 255, 0.1);
+    background: var(--transparency-light-10);
 }
 
 .table-hover>tbody>tr.active:hover>td,
@@ -275,11 +276,11 @@ ul.sidebar .sidebar-title {
 .table-hover>tbody>tr:hover>.active,
 .table-hover>tbody>tr>td.active:hover,
 .table-hover>tbody>tr>th.active:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background: var(--transparency-light-10);
 }
 
 .table .table {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 .label-default {
@@ -356,7 +357,7 @@ fieldset[disabled] .btn-primary:hover {
 
 .bootbox-form .checkbox i,
 .switch i {
-    background: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 .btn.focus,
@@ -392,7 +393,7 @@ fieldset[disabled] .btn-primary:hover {
 .ui-select-bootstrap>.ui-select-match>.btn:focus {
     text-align: left !important;
     color: var(--button-text-hover);
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
     border-color: #00000000;
 }
 
@@ -405,7 +406,7 @@ fieldset[disabled] .btn-primary:hover {
 .pagination>.disabled>span:hover {
     color: var(--text-muted);
     cursor: not-allowed;
-    background-color: rgba(255, 255, 255, 0.1);
+    background: var(--transparency-light-10);
     border-color: transparent;
 }
 
@@ -446,7 +447,7 @@ select:focus, select.form-control:focus {
 }
 
 .form-control {
-    background-color: rgba(255, 255, 255, 0.15) !important;
+    background: var(--transparency-light-15) !important;
     border: 1px solid transparent;
     color: var(--text);
 }
@@ -492,14 +493,14 @@ output {
 .dropdown-menu>.active>a:focus,
 .dropdown-menu>.active>a:hover,
 .ui-select-bootstrap .ui-select-choices-row.active>span {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .ui-select-bootstrap .ui-select-choices-row>span:focus,
 .ui-select-bootstrap .ui-select-choices-row>span:hover,
 .ui-select-choices-row:hover {
     color: var(--text-hover);
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 /* APP TEMPLATES */
@@ -513,7 +514,7 @@ output {
 /* ADD NETWORK */
 
 .boxselector_wrapper input[type=radio]:checked+label {
-    background: rgba(255, 255, 255, .15);
+    background: var(--transparency-light-15);
     color: var(--text-hover);
     border-color: transparent;
 }
@@ -521,7 +522,7 @@ output {
 .boxselector_wrapper label {
     -webkit-box-shadow: none;
     box-shadow: none;
-    background: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15);
     border: 1px solid transparent;
 }
 
@@ -554,13 +555,13 @@ output {
 
 /* STACKS */
 .CodeMirror {
-    background: rgba(255, 255, 255, 0.10);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
 .CodeMirror-gutters {
     border-right: 1px solid rgba(255, 255, 255, 0.25);
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     caret-color: var(--text-hover);
 }
 
@@ -584,7 +585,7 @@ output {
 .nav-tabs>li.active>a:hover {
     color: var(--text-hover);
     cursor: default;
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
     border: 1px solid #ddd0;
     border-bottom-color: transparent;
 }
@@ -596,18 +597,18 @@ output {
 .nav>li>a:focus,
 .nav>li>a:hover {
     text-decoration: none;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .nav-tabs>li>a {
     border: 1px solid rgba(0, 0, 0, 0);
-    background: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15)
 }
 
 /* LOGS */
 .log_viewer {
     color: var(--text-hover);
-    background-color: rgba(255, 255, 255, 0.1);
+    background: var(--transparency-light-10);
     border: 1px solid transparent;
 }
 
@@ -623,7 +624,7 @@ json-tree .key {
 
 pre {
     color: var(--text-hover);
-    background-color: rgba(255, 255, 255, .1);
+    background: var(--transparency-light-10);
     border: 1px solid transparent;
 }
 
@@ -690,17 +691,17 @@ pre {
 }
 
 .widget .widget-body table .ng-scope tr {
-    background: rgba(0, 0, 0, .25) !important;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .widget .widget-body table thead {
-    background-color: rgba(0, 0, 0, .25) !important;
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .widget .widget-body table tbody .ng-isolate-scope div {
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
     background: rgba(0, 0, 0, 0) !important;
 }
 
@@ -710,6 +711,6 @@ pre {
 }
 
 .widget .widget-body table thead tr:hover {
-    background-color: rgba(0, 0, 0, .35) !important;
-    background: rgba(0, 0, 0, .35) !important;
+    background: var(--transparency-dark-35) !important;
+    background: var(--transparency-dark-35) !important;
 }
diff --git a/css/base/prowlarr/prowlarr-base.css b/css/base/prowlarr/prowlarr-base.css
index e25b0820..dc512401 100644
--- a/css/base/prowlarr/prowlarr-base.css
+++ b/css/base/prowlarr/prowlarr-base.css
@@ -11,6 +11,7 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 body {
     background: var(--main-bg-color);
@@ -166,7 +167,7 @@ a:hover {
 }
 
 [class*="SelectInput-select-"] {
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="SelectInput-select-"]:active,
@@ -183,7 +184,7 @@ a:hover {
 }
 
 [class*="AutoSuggestInput-suggestionHighlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 [class*="CheckInput-primaryIsChecked-"] {
@@ -200,7 +201,7 @@ a:hover {
 /* HEADER */
 
 [class*="PageHeader-header-"] {
-    background-color: rgba(0, 0, 0, .35);
+    background: var(--transparency-dark-35);
     box-shadow: none;
     color: var(--text);
 }
@@ -231,16 +232,16 @@ a:hover {
 }
 
 [class*="IndexerSearchInput-highlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 [class*="IndexerSearchInput-movieContainer-"]::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 /* SIDE MENU */
 [class*="PageSidebar-sidebarContainer-"] {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="PageSidebar-sidebar-"] {
@@ -263,7 +264,7 @@ a:hover {
 }
 
 [class*="PageSidebarItem-isActiveParentLink-"] {
-    background-color: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15);
 }
 
 @media only screen and (max-width: 768px) {
@@ -310,15 +311,15 @@ a:hover {
 }
 
 [class*="AddListMovieOverview-container-"]:hover [class*="AddListMovieOverview-content-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 [class*="AddListMoviePoster-title-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 [class*="MovieIndexOverview-content-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="MovieIndexOverview-link-"]:hover {
@@ -326,7 +327,7 @@ a:hover {
 }
 
 [class*="ProgressBar-container-"] {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 [class*=".ProgressBar-purple-"] {
@@ -337,7 +338,7 @@ a:hover {
 [class*="MovieDetailsSeason-season-"],
 [class*="MovieDetailsSeason-collapseButtonContainer-"] {
     border: none !important;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="MovieDetailsSeason-actionButton-"],
@@ -376,17 +377,17 @@ a:hover {
 
 [class*="MovieDetailsSeason-collapseButtonContainer-"] {
     border: none !important;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="MovieFileEditorTable-container-"] {
     border: 1px solid transparent;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="ExtraFileTable-container-"] {
     border: 1px solid transparent;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 .Table-table-2C3O8 {
@@ -498,7 +499,7 @@ a:hover {
 
 /* Table options*/
 [class*="TableOptionsColumn-column-"] {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
     border: none;
 }
@@ -512,17 +513,17 @@ a:hover {
 }
 
 [class*="TableRow-row-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: var(--text-hover);
 }
 
 [class*="TableRowCell-cell-"] {
-    border-top: 1px solid rgb(255 255 255 / 25%);
+    border-top: 1px solid var(--transparency-light-25);
 }
 
 /* TOP MENU SERIES */
 [class*="PageToolbar-toolbar-"] {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text);
 }
 
@@ -558,7 +559,7 @@ a:hover {
 [class*="MovieIndexPosterInfo-info-"],
 [class*="MovieIndexPosterInfo-info-"],
 [class*="MovieCreditPoster-title-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -585,13 +586,13 @@ a:hover {
 
 [class*="MenuItem-menuItem-"]:hover,
 [class*="MenuItem-menuItem-"]:focus {
-    background: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
     color: var(--text-hover);
     text-decoration: none;
 }
 
 [class*="MenuItemSeparator-separator-"] {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 /* ALPHABET JUMP BAR */
@@ -602,12 +603,12 @@ a:hover {
 /* MINI RIGHT SCROLL BAR */
 [class*="OverlayScroller-thumb-"],
 [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="OverlayScroller-thumb-"]:hover,
 [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.25) !important;
+    background: var(--transparency-light-25) !important;
 }
 
 /* ADD NEW */
@@ -631,12 +632,12 @@ a:hover {
 
 [class*="EnhancedSelectInputOption-isSelected-"],
 [class*="EnhancedSelectInputOption-isSelected-"]:hover {
-    background-color: rgba(255, 255, 255, 0.20) !important;
+    background: var(--transparency-light-20) !important;
     color: var(--text-hover);
 }
 
 [class*="EnhancedSelectInputOption-option-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 [class*="HintedSelectInputOption-hintText-"] {
@@ -674,7 +675,7 @@ a:hover {
 [class*="AddNewMovie-searchIconContainer-"],
 [class*="CheckInput-isIndeterminate-"] {
     border: none;
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -701,7 +702,7 @@ a:hover {
     outline: 0;
     border-color: var(--text-hover);
     box-shadow: none;
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 [class*="TagInput-input-"][class*="TagInput-isFocused-"] {
@@ -724,7 +725,7 @@ a:hover {
 
 [class*="AddNewMovieSearchResult-searchResult-"]:hover,
 [class*="AddNewMovieSearchResult-underlay-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="AddNewmovieModalContent-year-"] {
@@ -749,13 +750,13 @@ a:hover {
 }
 
 [class*="VirtualTableRow-row-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 /* Drop down menu/button*/
 [class*="ImportMovieSelectMovie-button-"] {
     border: none !important;
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="ImportMovieSelectMovie-content-"],
@@ -773,7 +774,7 @@ a:hover {
 }
 
 [class*="ImportMovieSearchResult-movie-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 [class*="ImportMovieTitle-year-"] {
@@ -800,17 +801,17 @@ a:hover {
 }
 
 [class*="AddListMovieOverview-content-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="PageJumpBarItem-jumpBarItem-"]:hover {
     color: var(--text-hover);
-    background: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 /*Posters*/
 [class*="AddListMoviePoster-title-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -818,7 +819,7 @@ a:hover {
 /* FOOTER */
 [class*="PageContentFooter-contentFooter-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
@@ -874,17 +875,17 @@ a:hover {
 }
 
 [class*="DayOfWeek-dayOfWeek-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: var(--text-hover);
 }
 
 [class*="CalendarDay-dayOfMonth-"] {
     border-bottom: 1px solid hsla(0, 0%, 100%, .08);
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="CalendarDay-isToday-"] {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="CalendarDay-day-"],
@@ -932,7 +933,7 @@ a:hover {
 
 /* calendar agenda */
 [class*="AgendaEvent-event-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 /* SETTINGS */
@@ -959,15 +960,15 @@ a:hover {
 }
 
 [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 [class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 [class*="NamingOption-option-"] {
@@ -975,17 +976,17 @@ a:hover {
 }
 
 [class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 2550, 0.25);
+    background: var(--transparency-light-25);
 }
 
 [class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 2550, 0.35);
+    background: var(--transparency-light-35);
 }
 
 /* PROFILES */
 [class*="Card-card-"],
 [class*="QualityProfiles-addQualityProfile-"] {
-    background-color: rgba(0, 0, 0, .45);
+    background: var(--transparency-dark-45);
     box-shadow: 0 0 10px 1px #000000;
     color: var(--text);
 }
@@ -1018,12 +1019,12 @@ a:hover {
 [class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
 [class*="LanguageProfileItem-languageProfileItem-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
 [class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 [class*="QualityDefinitions-sizeLimitHelpText-"] {
@@ -1039,7 +1040,7 @@ a:hover {
 
 [class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
     border: 1px solid transparent;
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25)
 }
 
 /* Indexers */
@@ -1076,7 +1077,7 @@ a:hover {
 /* LOG */
 [class*="Alert-info-"] {
     border-color: transparent;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: #FFC107;
 }
 
@@ -1102,12 +1103,12 @@ a:hover {
 /* Login Page */
 
 .panel-body {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: var(--text);
 }
 
 .panel-header {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
 }
 
 .forgot-password {
@@ -1117,7 +1118,7 @@ a:hover {
 input[type=email],
 input[type=password] {
     border: none;
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -1138,7 +1139,7 @@ input[type=password] {
     outline: 0;
     border-color: var(--text-hover);
     box-shadow: none;
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 /* Custom filter */
@@ -1147,7 +1148,7 @@ input[type=password] {
 }
 
 [class*="CustomFilter-customFilter-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 [class*="SelectMovieModalContent-path-"] {
@@ -1157,7 +1158,7 @@ input[type=password] {
 /* ChartJS */
 [class*="Stats-fullWidthChart-"],
 [class*="Stats-halfWidthChart-"] {
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 canvas {
@@ -1170,20 +1171,20 @@ canvas {
 }
 
 [class*="QueryParameterOption-token-"] {
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 [class*="QueryParameterOption-example-"] {
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 
 [class*="QueryParameterOption-option-"]:hover [class*="QueryParameterOption-token-"] {
-    background-color: rgba(255, 255, 2550, 0.25);
+    background: var(--transparency-light-25);
 }
 
 [class*="QueryParameterOption-option-"]:hover [class*="QueryParameterOption-example-"] {
-    background-color: rgba(255, 255, 2550, 0.35);
+    background: var(--transparency-light-35);
 }
 
 /* HISTORY */
@@ -1195,7 +1196,7 @@ canvas {
 }
 
 [class*="HistoryRowParameter-value-"] {
-    background-color: rgb(255 255 255 / 50%);
+    background: var(--transparency-light-50);
     color: #1f1f1f;
 }
 
diff --git a/css/base/qbittorrent/qbittorrent-base.css b/css/base/qbittorrent/qbittorrent-base.css
index 2cab3574..367a451c 100644
--- a/css/base/qbittorrent/qbittorrent-base.css
+++ b/css/base/qbittorrent/qbittorrent-base.css
@@ -12,6 +12,7 @@
 
 @import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css);
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 ::-webkit-scrollbar {
   width: 10px;
@@ -19,13 +20,13 @@
 }
 
 ::-webkit-scrollbar-corner {
-  background-color: hsla(0, 0%, 100%, .08);
+  background: var(--transparency-dark-10);
 }
 
 ::-webkit-scrollbar-thumb {
   -webkit-border-radius: 5px;
   border-radius: 5px;
-  background-color: hsla(0, 0%, 100%, .08);
+  background: var(--transparency-dark-10);
 }
 
 html,
@@ -60,13 +61,13 @@ body {
 input:disabled {
   color: rgb(84, 84, 84);
   cursor: default;
-  background-color: rgb(255, 255, 255, .05) !important;
+  background: var(--transparency-light-05) !important;
   border: none !important;
 }
 
 input[type="text"i] {
   color: var(--text-hover);
-  background-color: rgba(0, 0, 0, .25);
+  background: var(--transparency-dark-25);
   border-width: 0px;
   outline: none;
   border: none;
@@ -75,7 +76,7 @@ input[type="text"i] {
 
 input[type="password"i] {
   color: var(--text-hover);
-  background-color: rgba(0, 0, 0, .25);
+  background: var(--transparency-dark-25);
   border-width: 0px;
   outline: none;
   border: none;
@@ -84,7 +85,7 @@ input[type="password"i] {
 
 input[type="number"i] {
   color: var(--text-hover);
-  background-color: rgba(0, 0, 0, .25);
+  background: var(--transparency-dark-25);
   border-width: 0px;
   outline: none;
   border: none;
@@ -92,7 +93,7 @@ input[type="number"i] {
 
 input[type="file"i] {
   color: var(--text-hover);
-  background-color: rgba(0, 0, 0, .25);
+  background: var(--transparency-dark-25);
   border-width: 0px;
   outline: none;
   border: none;
@@ -162,7 +163,7 @@ h4,
   -ms-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   padding-top: 0;
-  /* background: rgba(0, 0, 0, 0.25); */
+  /* background: var(--transparency-dark-25) */
   width: 400px;
   height: 460px;
   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
@@ -210,7 +211,7 @@ label {
 }
 
 #desktopNavbar {
-  background: rgba(0, 0, 0, 0.25);
+  background: var(--transparency-dark-25);
   height: 20px;
   border-bottom: 1px solid transparent;
 }
@@ -221,11 +222,11 @@ label {
 
 #desktopNavbar ul li a:hover {
   color: var(--text-hover);
-  background-color: rgba(255, 255, 255, 0.08);
+  background: var(--transparency-light-10);
 }
 
 #desktopNavbar li ul li a:hover {
-  background: rgba(255, 255, 255, .08);
+  background: var(--transparency-light-10);
   color: var(--text-hover);
 }
 
@@ -270,7 +271,7 @@ label {
 }
 
 .dynamicTable th {
-  background-color: rgba(0, 0, 0, 0.25) !important;
+  background: var(--transparency-dark-25) !important;
   border-right-color: rgba(255, 255, 255, .08) !important;
   color: var(--text-hover);
 }
@@ -284,20 +285,20 @@ label {
 }
 
 .dynamicTable {
-  background: rgba(0, 0, 0, 0.25);
+  background: var(--transparency-dark-25)
 }
 
 .dynamicTable tbody tr {
-  background-color: rgba(0, 0, 0, 0.08) !important;
+  background: var(--transparency-dark-10) !important;
 }
 
 .dynamicTable tbody tr:nth-child(even),
 .dynamicTable tbody tr.alt {
-  background-color: rgba(255, 255, 255, 0.08) !important;
+  background: var(--transparency-light-10) !important;
 }
 
 .dynamicTable tbody tr:hover {
-  background-color: rgba(255, 255, 255, 0.15) !important;
+  background: var(--transparency-light-15) !important;
   color: var(--text-hover);
 }
 
@@ -342,7 +343,7 @@ li.divider {
 
 #main input[type="text"i] {
   color: var(--text-hover);
-  background-color: rgba(0, 0, 0, .25);
+  background: var(--transparency-dark-25);
   border-width: 0px;
   outline: none;
   border: none;
@@ -353,12 +354,12 @@ li.divider {
 }
 
 #main input[type="text"i]:focus {
-  background-color: rgba(0, 0, 0, .45);
+  background: var(--transparency-dark-45);
 }
 
 #main input[type="password"i] {
   color: var(--text-hover);
-  background-color: rgba(0, 0, 0, .25);
+  background: var(--transparency-dark-25);
   border-width: 0px;
   outline: none;
   border: none;
@@ -369,7 +370,7 @@ li.divider {
 }
 
 #main input[type="password"i] {
-  background-color: rgba(0, 0, 0, .45);
+  background: var(--transparency-dark-45);
 }
 
 #loginform #login {
@@ -458,13 +459,13 @@ ul.filterList li:hover:before {
 }
 
 .columnHandle {
-  background: rgba(0, 0, 0, 0.45);
+  background: var(--transparency-dark-45);
   border: 1px solid transparent;
 }
 
 /*Sidemenu - Bottom menu*/
 .bottomPanel {
-  background: rgba(0, 0, 0, 0.25) !important;
+  background: var(--transparency-dark-25) !important;
 }
 
 /* Bottom menu */
@@ -473,7 +474,7 @@ ul.filterList li:hover:before {
 }
 
 .panel-header {
-  background: rgba(0, 0, 0, 0.25) !important;
+  background: var(--transparency-dark-25) !important;
   border-bottom: 1px solid transparent !important;
 }
 
@@ -501,11 +502,11 @@ ul.filterList li:hover:before {
 }
 
 .tab-menu li a:hover {
-  background: rgba(255, 255, 255, 0.08) !important;
+  background: var(--transparency-light-10) !important;
 }
 
 .toolbarTabs {
-  background: rgba(0, 0, 0, 0.25) !important;
+  background: var(--transparency-dark-25) !important;
 }
 
 .progressbar_dark {
@@ -514,7 +515,7 @@ ul.filterList li:hover:before {
 }
 
 .progressbar_light {
-  background: rgba(0, 0, 0, 0.25) !important;
+  background: var(--transparency-dark-25) !important;
   color: var(--text-hover) !important;
 }
 
@@ -550,13 +551,13 @@ fieldset {
 
 .mochaToolButton {
   margin-right: 10px;
-  background: rgba(0, 0, 0, .25);
+  background: var(--transparency-dark-25);
   border-radius: 5px;
 }
 
 .mochaToolButton:hover {
   margin-right: 10px;
-  background: rgba(255, 255, 255, .25);
+  background: var(--transparency-light-25);
   border-radius: 5px;
 }
 
@@ -578,7 +579,7 @@ fieldset {
   width: 100%;
   position: relative;
   height: 29px;
-  background: rgba(0, 0, 0, 0.25) !important;
+  background: var(--transparency-dark-25) !important;
   overflow: hidden;
   border-top: none !important;
 }
@@ -618,14 +619,14 @@ fieldset.settings {
 textarea:disabled {
   color: rgb(84, 84, 84);
   cursor: default;
-  background-color: rgb(255, 255, 255, .05) !important;
+  background: var(--transparency-light-05) !important;
   border: none !important;
 }
 
 textarea {
   color: var(--text-hover) !important;
   cursor: default;
-  background-color: rgb(0, 0, 0, .25) !important;
+  background: var(--transparency-dark-25) !important;
   border: none !important;
 }
 
diff --git a/css/base/radarr/radarr-base.css b/css/base/radarr/radarr-base.css
index 5f49ed54..143f8694 100644
--- a/css/base/radarr/radarr-base.css
+++ b/css/base/radarr/radarr-base.css
@@ -11,6 +11,7 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 :root {
     --calendar-in-cinemas: 53 197 244;
@@ -168,7 +169,7 @@ a:hover {
 }
 
 [class*="SelectInput-select-"] {
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="SelectInput-select-"]:active,
@@ -185,7 +186,7 @@ a:hover {
 }
 
 [class*="AutoSuggestInput-suggestionHighlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 [class*="CheckInput-primaryIsChecked-"] {
@@ -201,7 +202,7 @@ a:hover {
 /* HEADER */
 
 [class*="PageHeader-header-"] {
-    background-color: rgba(0, 0, 0, .35);
+    background: var(--transparency-dark-35);
     color: var(--text);
 }
 
@@ -231,16 +232,16 @@ a:hover {
 }
 
 [class*="MovieSearchInput-highlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 [class*="MovieSearchInput-movieContainer-"]::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 /* SIDE MENU */
 [class*="PageSidebar-sidebarContainer-"] {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="PageSidebar-sidebar-"] {
@@ -263,7 +264,7 @@ a:hover {
 }
 
 [class*="PageSidebarItem-isActiveParentLink-"] {
-    background-color: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15);
 }
 
 @media only screen and (max-width: 768px) {
@@ -316,15 +317,15 @@ a:hover {
 }
 
 [class*="AddListMovieOverview-container-"]:hover [class*="AddListMovieOverview-content-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 [class*="AddListMoviePoster-title-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 [class*="MovieIndexOverview-content-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="MovieIndexOverview-link-"]:hover {
@@ -332,7 +333,7 @@ a:hover {
 }
 
 [class*="ProgressBar-container-"] {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 [class*=".ProgressBar-purple-"] {
@@ -343,7 +344,7 @@ a:hover {
 [class*="MovieDetailsSeason-season-"],
 [class*="MovieDetailsSeason-collapseButtonContainer-"] {
     border: none !important;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="MovieDetailsSeason-actionButton-"],
@@ -386,17 +387,17 @@ a:hover {
 
 [class*="MovieDetailsSeason-collapseButtonContainer-"] {
     border: none !important;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="MovieFileEditorTable-container-"] {
     border: 1px solid transparent;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="ExtraFileTable-container-"] {
     border: 1px solid transparent;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"],
@@ -509,7 +510,7 @@ a:hover {
 
 /* Table options*/
 [class*="TableOptionsColumn-column-"] {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
     border: none;
 }
@@ -523,17 +524,17 @@ a:hover {
 }
 
 [class*="TableRow-row-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: var(--text-hover);
 }
 
 [class*="TableRowCell-cell-"] {
-    border-top: 1px solid rgb(255 255 255 / 25%);
+    border-top: 1px solid var(--transparency-light-25);
 }
 
 /* TOP MENU SERIES */
 [class*="PageToolbar-toolbar-"] {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text);
 }
 
@@ -569,7 +570,7 @@ a:hover {
 [class*="MovieIndexPosterInfo-info-"],
 [class*="MovieIndexPosterInfo-info-"],
 [class*="MovieCreditPoster-title-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -596,13 +597,13 @@ a:hover {
 
 [class*="MenuItem-menuItem-"]:hover,
 [class*="MenuItem-menuItem-"]:focus {
-    background: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
     color: var(--text-hover);
     text-decoration: none;
 }
 
 [class*="MenuItemSeparator-separator-"] {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 /* ALPHABET JUMP BAR */
@@ -613,12 +614,12 @@ a:hover {
 /* MINI RIGHT SCROLL BAR */
 [class*="OverlayScroller-thumb-"],
 [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="OverlayScroller-thumb-"]:hover,
 [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.25) !important;
+    background: var(--transparency-light-25) !important;
 }
 
 /* ADD NEW */
@@ -642,12 +643,12 @@ a:hover {
 
 [class*="EnhancedSelectInputOption-isSelected-"],
 [class*="EnhancedSelectInputOption-isSelected-"]:hover {
-    background-color: rgba(255, 255, 255, 0.20) !important;
+    background: var(--transparency-light-20) !important;
     color: var(--text-hover);
 }
 
 [class*="EnhancedSelectInputOption-option-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 [class*="HintedSelectInputOption-hintText-"] {
@@ -686,7 +687,7 @@ a:hover {
 [class*="AddNewMovie-searchIconContainer-"],
 [class*="CheckInput-isIndeterminate-"] {
     border: none;
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -713,7 +714,7 @@ a:hover {
     outline: 0;
     border-color: var(--text-hover);
     box-shadow: none;
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 [class*="TagInput-input-"][class*="TagInput-isFocused-"] {
@@ -742,7 +743,7 @@ a:hover {
 
 [class*="AddNewMovieSearchResult-searchResult-"]:hover,
 [class*="AddNewMovieSearchResult-underlay-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="AddNewmovieModalContent-year-"] {
@@ -767,13 +768,13 @@ a:hover {
 }
 
 [class*="VirtualTableRow-row-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 /* Drop down menu/button*/
 [class*="ImportMovieSelectMovie-button-"] {
     border: none !important;
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="ImportMovieSelectMovie-content-"],
@@ -791,7 +792,7 @@ a:hover {
 }
 
 [class*="ImportMovieSearchResult-movie-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 [class*="ImportMovieTitle-year-"] {
@@ -810,7 +811,7 @@ a:hover {
 
 [class*="DiscoverMoviePoster-title-"],
 [class*="DiscoverMoviePosterInfo-info-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -824,17 +825,17 @@ a:hover {
 }
 
 [class*="AddListMovieOverview-content-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="PageJumpBarItem-jumpBarItem-"]:hover {
     color: var(--text-hover);
-    background: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 /*Posters*/
 [class*="AddListMoviePoster-title-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -842,7 +843,7 @@ a:hover {
 /* FOOTER */
 [class*="PageContentFooter-contentFooter-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
@@ -928,18 +929,18 @@ a:hover {
 }
 
 [class*="DayOfWeek-dayOfWeek-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: var(--text-hover);
 }
 
 [class*="CalendarDay-dayOfMonth-"] {
     border-bottom: 1px solid hsla(0, 0%, 100%, .08);
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="CalendarDay-isToday-"],
 [class*="DayOfWeek-isToday-"] {
-    background-color: hsla(0, 0%, 100%, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="CalendarDay-day-"],
@@ -990,7 +991,7 @@ a:hover {
 
 /* calendar agenda */
 [class*="AgendaEvent-event-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 /* SETTINGS */
@@ -1017,15 +1018,15 @@ a:hover {
 }
 
 [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 [class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 [class*="NamingOption-option-"] {
@@ -1033,17 +1034,17 @@ a:hover {
 }
 
 [class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 2550, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 2550, 0.35);
+    background: var(--transparency-dark-35);
 }
 
 /* PROFILES */
 [class*="Card-card-"],
 [class*="QualityProfiles-addQualityProfile-"] {
-    background-color: rgba(0, 0, 0, .45);
+    background: var(--transparency-dark-45);
     box-shadow: 0 0 10px 1px #000000;
     color: var(--text);
 }
@@ -1068,12 +1069,12 @@ a:hover {
 [class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
 [class*="LanguageProfileItem-languageProfileItem-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
 [class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 [class*="KeyValueListInputItem-keyInput-"],
@@ -1085,7 +1086,7 @@ a:hover {
 
 [class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
     border: 1px solid transparent;
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25)
 }
 
 [class*="QualityDefinitions-sizeLimitHelpText-"] {
@@ -1119,7 +1120,7 @@ a:hover {
 /* LOG */
 [class*="Alert-info-"] {
     border-color: transparent;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: #FFC107;
 }
 
@@ -1145,12 +1146,12 @@ a:hover {
 /* Login Page */
 
 .panel-body {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: var(--text);
 }
 
 .panel-header {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
 }
 
 .forgot-password {
@@ -1160,7 +1161,7 @@ a:hover {
 input[type=email],
 input[type=password] {
     border: none;
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -1181,7 +1182,7 @@ input[type=password] {
     outline: 0;
     border-color: var(--text-hover);
     box-shadow: none;
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 /* Custom filter */
@@ -1190,7 +1191,7 @@ input[type=password] {
 }
 
 [class*="CustomFilter-customFilter-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 [class*="SelectMovieModalContent-path-"] {
diff --git a/css/base/readarr/readarr-base.css b/css/base/readarr/readarr-base.css
index 64d2c38a..744c1416 100644
--- a/css/base/readarr/readarr-base.css
+++ b/css/base/readarr/readarr-base.css
@@ -11,6 +11,7 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 :root {
     --calendar-downloaded: 39 194 76;
@@ -168,7 +169,7 @@ a:hover {
 }
 
 [class*="SelectInput-select-"] {
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="SelectInput-select-"]:active,
@@ -185,7 +186,7 @@ a:hover {
 }
 
 [class*="AutoSuggestInput-suggestionHighlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 [class*="CheckInput-primaryIsChecked-"] {
@@ -201,7 +202,7 @@ a:hover {
 /* HEADER */
 
 [class*="PageHeader-header-"] {
-    background-color: rgba(0, 0, 0, .35);
+    background: var(--transparency-dark-35);
     color: var(--text);
 }
 
@@ -231,25 +232,25 @@ a:hover {
 }
 
 [class*="AuthorSearchInput-highlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08)
+    background: var(--transparency-dark-10)
 }
 
 [class*"=AuthorSearchInput-authorContainer-"]::-webkit-scrollbar-thumb,
 [class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 /* MINI RIGHT SCROLL BAR */
 [class*="OverlayScroller-thumb-"],
 [class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb,
 [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="OverlayScroller-thumb-"]:hover,
 [class*="ImportAuthorSelectAuthor-results-"]::-webkit-scrollbar-thumb:hover,
 [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.25) !important;
+    background: var(--transparency-light-25) !important;
 }
 
 /* ADD NEW */
@@ -272,12 +273,12 @@ a:hover {
 
 [class*="EnhancedSelectInputOption-isSelected-"],
 [class*="EnhancedSelectInputOption-isSelected-"]:hover {
-    background-color: rgba(255, 255, 255, 0.20) !important;
+    background: var(--transparency-light-20) !important;
     color: var(--text-hover);
 }
 
 [class*="EnhancedSelectInputOption-option-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 [class*="HintedSelectInputOption-hintText-"] {
@@ -313,7 +314,7 @@ a:hover {
 
 /* SIDE MENU */
 [class*="PageSidebar-sidebarContainer-"] {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="PageSidebar-sidebar-"] {
@@ -336,7 +337,7 @@ a:hover {
 }
 
 [class*="PageSidebarItem-isActiveParentLink-"] {
-    background-color: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15);
 }
 
 @media only screen and (max-width: 768px) {
@@ -384,7 +385,7 @@ a:hover {
 }
 
 [class*="AuthorIndexOverview-content-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="AuthorIndexOverview-link-"]:hover {
@@ -392,7 +393,7 @@ a:hover {
 }
 
 [class*="ProgressBar-container-"] {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 [class*=".ProgressBar-purple-"] {
@@ -404,7 +405,7 @@ a:hover {
 [class*="AuthorDetailsSeason-albumType-"],
 [class*="AuthorDetailsSeason-collapseButtonContainer-"] {
     border: none !important;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="AuthorDetailsSeason-header-"],
@@ -451,12 +452,12 @@ a:hover {
 
 [class*="AlbumDetailsMedium-medium-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="ExtraFileTable-container-"] {
     border: 1px solid transparent;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="AlbumDetails-selectedTab-"] {
@@ -465,16 +466,16 @@ a:hover {
 
 [class*="AlbumDetailsMedium-collapseButtonContainer-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="AuthorIndexProgressBar-progress-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 [class*="AuthorIndexBanner-title-"],
 [class*="AuthorIndexBannerInfo-info-"] {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
@@ -583,7 +584,7 @@ a:hover {
 
 /* Table options*/
 [class*="TableOptionsColumn-column-"] {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
     border: none;
 }
@@ -597,17 +598,17 @@ a:hover {
 }
 
 [class*="TableRow-row-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: var(--text-hover);
 }
 
 [class*="TableRowCell-cell-"] {
-    border-top: 1px solid rgb(255 255 255 / 25%);
+    border-top: 1px solid var(--transparency-light-25);
 }
 
 /* TOP MENU SERIES */
 [class*="PageToolbar-toolbar-"] {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text);
 }
 
@@ -642,7 +643,7 @@ a:hover {
 [class*="AuthorIndexPosterInfo-info-"],
 [class*="BookIndexPoster-title-"],
 [class*="BookIndexPosterInfo-info-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -670,13 +671,13 @@ a:hover {
 
 [class*="MenuItem-menuItem-"]:hover,
 [class*="MenuItem-menuItem-"]:focus {
-    background: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
     color: var(--text-hover);
     text-decoration: none;
 }
 
 [class*="MenuItemSeparator-separator-"] {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 /* ALPHABET JUMP BAR */
@@ -689,7 +690,7 @@ a:hover {
 [class*="AddNewItem-searchIconContainer-"],
 [class*="CheckInput-isIndeterminate-"] {
     border: none;
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -712,7 +713,7 @@ a:hover {
     outline: 0;
     border-color: var(--text-hover);
     box-shadow: none;
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 [class*="TagInput-input-"][class*="TagInput-isFocused-"] {
@@ -745,7 +746,7 @@ a:hover {
 [class*="AddNewAuthorSearchResult-searchResult-"]:hover,
 [class*="AddNewAuthorSearchResult-underlay-"]:hover,
 [class*="AddNewAlbumSearchResult-underlay-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: inherit;
     text-decoration: none;
 }
@@ -778,7 +779,7 @@ a:hover {
 }
 
 [class*="ImportAuthorSearchResult-author-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 /* IMPORT */
@@ -789,14 +790,14 @@ a:hover {
 
 [class*="ExpandingFileDetails-fileDetails-"] {
     border: 1px solid rgb(255 255 255 / .1);
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
 }
 
 /* IMPORT NEW ARTIST */
 /* Drop down menu/button*/
 [class*="ImportAuthorSelectAuthor-button-"] {
     border: none;
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     color: var(--text-hover);
 }
 
@@ -809,14 +810,14 @@ a:hover {
 }
 
 [class*="VirtualTableRow-row-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 /*Title*/
 
 [class*="PageJumpBarItem-jumpBarItem-"]:hover {
     color: var(--text-hover);
-    background: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 /*Posters*/
@@ -827,7 +828,7 @@ a:hover {
 /* FOOTER */
 [class*="PageContentFooter-contentFooter-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
@@ -889,18 +890,18 @@ a:hover {
 }
 
 [class*="DayOfWeek-dayOfWeek-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: var(--text-hover);
 }
 
 [class*="CalendarDay-dayOfMonth-"] {
     border-bottom: 1px solid hsla(0, 0%, 100%, .08);
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="CalendarDay-isToday-"],
 [class*="DayOfWeek-isToday-"] {
-    background-color: hsla(0, 0%, 100%, .25) !important;
+    background: var(--transparency-dark-25) !important;
     color: var(--text-hover);
 }
 
@@ -943,7 +944,7 @@ color: var(--text-hover) !important;
 
 /* calendar agenda */
 [class*="AgendaEvent-event-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 /* SETTINGS */
@@ -970,15 +971,15 @@ color: var(--text-hover) !important;
 }
 
 [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 [class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 [class*="NamingOption-option-"] {
@@ -986,17 +987,17 @@ color: var(--text-hover) !important;
 }
 
 [class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 2550, 0.25);
+    background: var(--transparency-light-25);
 }
 
 [class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 2550, 0.35);
+    background: var(--transparency-light-35);
 }
 
 /* PROFILES */
 [class*="Card-card-"],
 [class*="QualityProfiles-addQualityProfile-"] {
-    background-color: rgba(0, 0, 0, .45);
+    background: var(--transparency-dark-45);
     box-shadow: 0 0 10px 1px #000000;
     color: var(--text);
 }
@@ -1021,12 +1022,12 @@ color: var(--text-hover) !important;
 [class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
 [class*="LanguageProfileItem-languageProfileItem-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
 [class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 [class*="KeyValueListInputItem-keyInput-"],
@@ -1038,7 +1039,7 @@ color: var(--text-hover) !important;
 
 [class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
     border: 1px solid transparent;
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25)
 }
 
 [class*="QualityDefinitions-sizeLimitHelpText-"] {
@@ -1053,7 +1054,7 @@ color: var(--text-hover) !important;
 
 [class*="Card-card-"],
 [class*="QualityProfiles-addQualityProfile-"] {
-    background-color: rgba(0, 0, 0, .45);
+    background: var(--transparency-dark-45);
     box-shadow: 0 0 10px 1px #000000;
     color: var(--text);
 }
@@ -1101,7 +1102,7 @@ color: var(--text-hover) !important;
 /* LOG */
 [class*="Alert-info-"] {
     border-color: transparent;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: #FFC107;
 }
 
@@ -1127,12 +1128,12 @@ color: var(--text-hover) !important;
 /* Login Page */
 
 .panel-body {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: var(--text);
 }
 
 .panel-header {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
 }
 
 .forgot-password {
@@ -1142,7 +1143,7 @@ color: var(--text-hover) !important;
 input[type=email],
 input[type=password] {
     border: none;
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -1163,7 +1164,7 @@ input[type=password] {
     outline: 0;
     border-color: var(--text-hover);
     box-shadow: none;
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 /* Custom filter */
@@ -1172,7 +1173,7 @@ input[type=password] {
 }
 
 [class*="CustomFilter-customFilter-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 /* Readarr */
@@ -1181,7 +1182,7 @@ input[type=password] {
 
 [class*="AuthorIndexPoster-link-"],
 [class*="AuthorIndexPoster-title-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 /* Add New*/
@@ -1192,7 +1193,7 @@ input[type=password] {
 
 [class*="AddNewAuthorSearchResult-underlay-"]:hover,
 [class*="AddNewBookSearchResult-underlay-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: inherit;
     text-decoration: none;
 }
@@ -1203,17 +1204,17 @@ input[type=password] {
 }
 
 [class*="AuthorIndexBanner-title-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 [class*="AuthorIndexOverview-container-"]:hover [class*="AuthorIndexOverview-content-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 /*Books Tab*/
 [class*="AuthorDetailsSeason-bookType-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="AuthorDetailsSeason-books-"] {
@@ -1231,7 +1232,7 @@ input[type=password] {
 
 [class*="BookshelfBook-book-"] {
     border: 1px solid transparent;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
     ;
 }
 
@@ -1244,18 +1245,18 @@ input[type=password] {
 [class*="BookFileEditorTableContent-filesTable-"] {
     border: 1px solid rgb(255 255 255 / 10%);
     border-top: 1px solid rgb(255 255 255 / 50%);
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
 }
 
 /*Series Tab*/
 [class*="AuthorDetailsSeries-bookType-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="AuthorDetailsSeries-collapseButtonContainer-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="AuthorDetailsSeries-bookTypeLabel-"] {
diff --git a/css/base/requestrr/requestrr-base.css b/css/base/requestrr/requestrr-base.css
index a22b0b3f..b247993e 100644
--- a/css/base/requestrr/requestrr-base.css
+++ b/css/base/requestrr/requestrr-base.css
@@ -11,6 +11,7 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 body {
     color: var(--text);
@@ -70,20 +71,20 @@ h6,
 
 .nav-link.active:hover,
 .nav-link.active:focus {
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 .navbar-light .navbar-nav .nav-link:focus:not(.nav-link.active),
 .navbar-light .navbar-nav .nav-link:hover:not(.nav-link.active) {
     color: var(--text-hover);
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 @media (min-width: 768px) {
     .navbar-vertical.navbar-expand-md.fixed-left {
         left: 0;
         border-width: 0 1px 0 0;
-        background: rgba(0, 0, 0, 0.25) !important;
+        background: var(--transparency-dark-25) !important;
     }
 }
 
@@ -122,7 +123,7 @@ h6,
 .fade {
     -webkit-transition: opacity .15s linear;
     transition: opacity .15s linear;
-    background: rgba(0, 0, 0, 0.15) !important;
+    background: var(--transparency-dark-15) !important;
 }
 
 .bg-secondary {
@@ -140,7 +141,7 @@ h6,
 
 .bg-white,
 .footer {
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .footer {
@@ -182,7 +183,7 @@ h6,
 /* FORMS */
 .form-control:disabled,
 .form-control[readonly] {
-    background-color: rgba(255, 255, 255, 0.1);
+    background: var(--transparency-light-10);
     opacity: 1;
     border: 1px solid transparent;
     color: gray;
@@ -190,12 +191,12 @@ h6,
 
 .form-control-alternative,
 .has-danger .form-control {
-    background: rgba(0, 0, 0, 0.25);
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
+    background: var(--transparency-dark-25);
 }
 
 .form-control-alternative:focus {
-    background: rgba(0, 0, 0, 0.5);
+    background: var(--transparency-dark-50);
 }
 
 .form-control:focus {
@@ -203,7 +204,7 @@ h6,
 }
 
 .has-success .form-control {
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: var(--transparency-dark-50);
 }
 
 .form-control {
@@ -236,7 +237,7 @@ h6,
 
 .react-dropdown-select.dropdown {
     color: var(--text);
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
 }
 
 .react-dropdown-select.dropdown .react-dropdown-select-item-selected {
@@ -279,7 +280,7 @@ h6,
 .btn-default,
 .btn-default:hover {
     color: var(--text-hover);
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
     border-color: transparent;
 }
 
@@ -287,14 +288,14 @@ h6,
 .btn-default:not(:disabled):not(.disabled):active,
 .show>.btn-default.dropdown-toggle {
     color: var(--text-hover);
-    background-color: rgba(0, 0, 0, 0.26);
+    background-color: var(--transparency-dark-25);
     border-color: transparent;
 }
 
 .btn-default.disabled,
 .btn-default:disabled {
     color: var(--text-hover);
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
     border-color: transparent;
     opacity: .5;
 }
@@ -327,19 +328,19 @@ h6,
 }
 
 #root>div>div.mt--8.pb-5.container>div>div>div {
-    background: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 #root>div>div.mt--8.pb-5.container>div>div>div>div>form>div:nth-child(1)>div>input,
 #root>div>div.mt--8.pb-5.container>div>div>div>div>form>div:nth-child(2)>div>input,
 #root>div>div.mt--8.pb-5.container>div>div>div>div>form>div:nth-child(3)>div>input {
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
     border: 10px solid transparent;
 }
 
 .input-group-text {
     color: var(--text);
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border: 1px solid transparent !important;
 }
 
@@ -381,7 +382,7 @@ h6,
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .2);
+    background: var(--transparency-dark-20);
     background-clip: padding-box;
 }
 
@@ -393,6 +394,6 @@ h6,
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .5);
+    background: var(--transparency-light-50);
     background-clip: padding-box;
 }
\ No newline at end of file
diff --git a/css/base/resilio-sync/resilio-sync-base.css b/css/base/resilio-sync/resilio-sync-base.css
index c7a7fb5a..0ab61d9e 100644
--- a/css/base/resilio-sync/resilio-sync-base.css
+++ b/css/base/resilio-sync/resilio-sync-base.css
@@ -12,6 +12,7 @@
 
 @import url(https://use.fontawesome.com/releases/v5.15.1/css/all.css);
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 body,
 .tableScrollContainer,
@@ -78,7 +79,7 @@ a:hover {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .2);
+    background: var(--transparency-dark-20);
     background-clip: padding-box;
 }
 
@@ -90,7 +91,7 @@ a:hover {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .5);
+    background: var(--transparency-light-50);
     background-clip: padding-box;
 }
 
@@ -142,34 +143,34 @@ UL.jqueryFileTree A,
 
 /* NAVBAR */
 .bt-navbar {
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
 }
 
 .bt-navbar .btn.dropdown-toggle {
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
 }
 
 .bt-navbar .btn.dropdown-toggle:hover {
-    background-color: rgb(255 255 255 / 16%);
+    background: var(--transparency-light-15);
 }
 
 .bt-navbar .btn.btn-tab.active,
 .bt-navbar .btn.btn-tab:active {
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     border-bottom-color: rgb(var(--accent-color));
 }
 
 .bt-navbar .btn:hover {
-    background-color: rgb(255 255 255 / 8%) !important;
+    background: var(--transparency-light-10) !important;
 }
 
 .bt-navbar .btn#try-pro-button {
-    background-color: rgb(0 0 0 / 50%);
+    background: var(--transparency-dark-50);
     color: var(--button-text);
 }
 
 .bt-navbar .btn#try-pro-button:hover {
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
 }
 
 .bt-navbar .btn.btn-tab {
@@ -206,12 +207,12 @@ UL.jqueryFileTree A,
 
 .dropdown-menu li a:focus,
 .dropdown-menu li a:hover {
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
 #columns-context .bt-checkbox:hover {
-    background-color: rgba(255, 255, 255, .1);
+    background: var(--transparency-light-10);
 }
 
 .context-menu .bt-checkbox label,
@@ -229,12 +230,12 @@ UL.jqueryFileTree A,
 }
 
 .sync-level .add-folder-mode li.selected a {
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
 }
 
 .sync-level .add-folder-mode li:not(.selected) a:focus,
 .sync-level .add-folder-mode li:not(.selected) a:hover {
-    background-color: rgb(255 255 255 / .08);
+    background: var(--transparency-light-10);
 }
 
 .sync-level .add-folder-mode .btn-group {
@@ -244,14 +245,14 @@ UL.jqueryFileTree A,
 button.selectpicker.btn-default {
     border-color: #ccc0 !important;
     color: var(--text) !important;
-    background-color: rgb(0 0 0 / 25%) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .btn-group.open .dropdown-toggle {
     -webkit-box-shadow: none !important;
     box-shadow: none !important;
     border: none;
-    background: rgb(0 0 0 / 50%) !important;
+    background: var(--transparency-dark-50) !important;
 }
 
 .animating {
@@ -331,7 +332,7 @@ button.selectpicker.btn-default {
 .bt-navbar #choose-share-type-menu .container-fluid .menu-item:hover,
 .bt-navbar .choose-dropdown-menu .container-fluid .menu-item:focus,
 .bt-navbar .choose-dropdown-menu .container-fluid .menu-item:hover {
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
 
 }
 
@@ -367,7 +368,7 @@ button.selectpicker.btn-default {
 
 .context-menu li a:focus,
 .context-menu li a:hover {
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
     color: var(--text-hover) !important;
 }
 
@@ -387,7 +388,7 @@ button.selectpicker.btn-default {
 }
 
 #general-settings #languagedrop {
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     border: transparent;
 }
 
@@ -454,17 +455,17 @@ button.selectpicker.btn-default {
 }
 
 #choose-product-dialog .product-container .product {
-    background-color: rgb(255 255 255 / 0.08);
+    background-color: var(--transparency-light-10);
     border: 1px solid transparent;
 }
 
 .modal-header .close:hover {
-    background: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
 }
 
 ul.jqueryFileTree a.active,
 ul.jqueryFileTree a:hover {
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -506,7 +507,7 @@ ul.jqueryFileTree a:hover {
 #file-sharing-content .shareOptionsContainer .shareOption:hover,
 #sharing-content .shareOptionsContainer .shareOption:hover,
 .sharing-dialog-content .shareOptionsContainer .shareOption:hover {
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -561,7 +562,7 @@ ul.jqueryFileTree a:hover {
 .modal-filter .btn:hover,
 .modal-input .btn:focus,
 .modal-filter animating {
-    background: rgb(255 255 255 / .08) !important;
+    background: var(--transparency-light-10) !important;
 }
 
 /* PAGES */
@@ -582,7 +583,7 @@ ul.jqueryFileTree a:hover {
 #historyContainer .table-filter-panel,
 .resizableTableContainer .table-filter-panel,
 .tableContainerWithFilterPanel .table-filter-panel {
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     border-bottom: 1px solid rgb(255 255 255 / 10%);
 }
 
@@ -592,7 +593,7 @@ ul.jqueryFileTree a:hover {
 
 /* FOOTER */
 #sync-core-state {
-    background-color: rgb(0 0 0 / 50%);
+    background: var(--transparency-dark-50);
     border-top: 1px solid rgb(255 255 255 / 10%);
 }
 
@@ -624,7 +625,7 @@ ul.jqueryFileTree a:hover {
 #statusPanel .nav-pills a.tab-button:focus,
 #statusPanel .nav-pills a.tab-button:hover,
 #statusPanel .nav-pills .active>a {
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
 }
 
 #statusPanel .tab-content {
@@ -632,7 +633,7 @@ ul.jqueryFileTree a:hover {
 }
 
 #statusPanel .chart-wrapper {
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     border-right: 1px solid rgba(255, 255, 255, .1);
 }
 
@@ -666,12 +667,12 @@ ul.jqueryFileTree a:hover {
 
 /* SETTINGS */
 .settings-tabs-wrapper .settings-tabs-buttons .left-nav-button.active {
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     color: rgb(var(--accent-color));
 }
 
 .settings-tabs-wrapper .settings-tabs-buttons .left-nav-button:hover:not(.active) {
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
 }
 
 .settings-tabs-wrapper .settings-tabs-buttons .left-nav-button:hover:not(.active) .txt-button {
@@ -692,12 +693,12 @@ ul.jqueryFileTree a:hover {
 
 .settings-tabs-wrapper .settings-tabs-buttons {
     border-right: 1px solid rgb(255 255 255 / 10%);
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
 }
 
 /* IDENTITY */
 #my-devices .my-devices .single-my-device:hover:not(.disabled) {
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
 }
 
 #my-devices .my-devices .link-device-block #device-to-qr .device-link {
@@ -745,20 +746,20 @@ ul.jqueryFileTree a:hover {
 
 .transfer-table .transfer-row .optionsColumn .options-button.active,
 .transfer-table .transfer-row .optionsColumn .options-button:hover {
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
 }
 
 /* FORMS */
 .form-control {
     color: var(--text) !important;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
     border: 1px solid transparent !important;
     box-shadow: none !important;
     transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
 .form-control:focus {
-    background-color: rgba(0, 0, 0, .5) !important;
+    background: var(--transparency-dark-50) !important;
     color: var(--text-hover) !important;
 }
 
@@ -766,13 +767,13 @@ ul.jqueryFileTree a:hover {
 #advanced-settings-dialog .verticalScrollContainer tr:active,
 #advanced-settings-dialog .verticalScrollContainer tr:focus,
 #advanced-settings-dialog .verticalScrollContainer tr:hover {
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
 .table-hover>tbody>tr.active,
 .table-hover>tbody>tr:hover:not(.no-hover) {
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
diff --git a/css/base/rutorrent/rutorrent-base.css b/css/base/rutorrent/rutorrent-base.css
index 5c4d145c..031be0a3 100644
--- a/css/base/rutorrent/rutorrent-base.css
+++ b/css/base/rutorrent/rutorrent-base.css
@@ -13,6 +13,7 @@
 @import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css);
 @import url(https://fonts.googleapis.com/css?family=Roboto:400,600,700,300);
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 @font-face {
     font-family: 'Roboto' !important
@@ -49,7 +50,7 @@ div#preload {
 }
 
 hr {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     height: 1px;
     border-width: 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
@@ -67,7 +68,7 @@ div#cover {
 }
 
 div#msg {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-top: 1px solid #3330;
     border-bottom: 1px solid #0000;
     font-size: 11px;
@@ -154,7 +155,7 @@ ul.CMenu li a.dis:hover {
 }
 
 ul.CMenu li hr {
-    background-color: rgba(255, 255, 255, .08);
+    background-color: var(--transparency-light-10);
     height: 1px;
     border-width: 0;
     border-bottom: 1px solid rgba(255, 255, 255, .08);
@@ -168,13 +169,13 @@ ul.CMenu li a.exp {
 }
 
 ul.CMenu li a.exp:hover {
-    background: rgba(255, 255, 255, .08);
+    background: var(--transparency-light-10)
     ;
 }
 
 ul.CMenu li a.sel {
     color: var(--text-hover);
-    background: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15)
 }
 
 ul.CMenu li ul li a.sel {
@@ -182,7 +183,7 @@ ul.CMenu li ul li a.sel {
 }
 
 ul.CMenu li a:hover {
-    background-color: rgba(255, 255, 255, 0.08) !important;
+    background: var(--transparency-light-10) !important;
     color: var(--text-hover);
     text-shadow: 0 -1px 0 #000;
 }
@@ -207,7 +208,7 @@ ul.CMenu li ul li a.dis:hover {
 }
 
 div.stable-body table tbody tr.even:nth-child(2n+1) td {
-    background: rgba(255, 255, 255, 0.08) !important
+    background: var(--transparency-light-10) !important
 }
 
 .stable-body td {
@@ -233,7 +234,7 @@ div.stable-body table tbody tr.even:nth-child(2n+1) td {
 }
 
 div#t {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     background-image: none;
     border-bottom: none;
     padding: 4px 0 2px 0;
@@ -418,7 +419,7 @@ div#stg-header {
 
 div#CatList {
     border: none;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-right: 1px solid transparent;
     border-left: none
 }
@@ -537,7 +538,7 @@ div.tab {
 }
 
 div#lcont {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     font-family: 'Roboto'
 }
 
@@ -549,13 +550,13 @@ div#gcont table td.Header {
 }
 
 div#gcont table tr {
-    background: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
     font-family: 'Roboto';
     color: var(--text);
 }
 
 div#gcont table tr td {
-    background: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15);
 }
 
 div#gcont table {
@@ -565,11 +566,11 @@ div#gcont table {
 div.graph_tab {
     color: var(--text-hover);
     border-color: transparent;
-    background-color: rgba(0, 0, 0, 0.25)
+    background: var(--transparency-dark-25);
 }
 
 div.table_tab {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
     font-family: 'Roboto'
 }
 
@@ -580,14 +581,14 @@ div#modalbg {
 div#List {
     margin-right: 6px;
     border: none;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 div#FileList,
 div#TrackerList,
 div#PeerList,
 div#Speed {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .dlg-window {
@@ -614,7 +615,7 @@ a.dlg-close:visited {
 }
 
 div.dlg-header {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-bottom: none;
     font-family: 'Roboto';
     text-transform: uppercase;
@@ -626,7 +627,7 @@ div.dlg-header {
     font-size: 11px;
     font-family: monospace;
     line-height: 11px;
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     white-space: pre;
     overflow: scroll;
     height: 198px;
@@ -725,7 +726,7 @@ div#tdcont {
 }
 
 div#HDivider {
-    background: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
     cursor: e-resize;
     height: 0;
     margin: 0;
@@ -735,7 +736,7 @@ div#HDivider {
 
 div#RSSList {
     border: none !important;
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     overflow: hidden;
     display: block;
     -moz-user-select: none;
@@ -745,13 +746,13 @@ div#RSSList {
 
 div#HDivider:hover,
 div#VDivider:hover {
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 div#tcreate textarea#trackers {
     color: var(--text-hover);
     border: none !important;
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-radius: 2px;
     cursor: text;
 }
@@ -761,7 +762,7 @@ input[type="password"],
 select {
     color: var(--text-hover);
     border: none;
-    background: rgba(0, 0, 0, 0.25) url(/resources/rutorrent/headers.png) repeat-x scroll 0 -138px;
+    background: var(--transparency-dark-25) url(/resources/rutorrent/headers.png) repeat-x scroll 0 -138px;
     border-radius: 2px;
     outline: none;
 }
@@ -772,7 +773,7 @@ input[type="file"][disabled],
 select[disabled] {
     color: var(--text-hover);
     border: none;
-    background: rgba(0, 0, 0, 0.08) url(/resources/rutorrent/headers.png) repeat scroll 0 0 !important;
+    background: var(--transparency-dark-10) url(/resources/rutorrent/headers.png) repeat scroll 0 0 !important;
     border-radius: 2px;
     opacity: .2
 }
@@ -792,7 +793,7 @@ textarea {
 #FS_downlink {
     color: var(--text-hover);
     border: none !important;
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-radius: 2px
 }
 
@@ -818,7 +819,7 @@ input.Button:focus {
 }
 
 ul#tabbar {
-    background: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
     border: none;
     color: #606060;
     height: 24px;
@@ -957,19 +958,19 @@ div.dlg-window {
 }
 
 div#yesnoDlg div.dlg-header {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     text-shadow: 0 -1px 0 #000
 }
 
 div#stg-header {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     text-shadow: 0 -1px 0 #000;
     color: var(--text-hover);
 }
 
 div#dlgHelp-header,
 div#dlgHelp div.dlg-header {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     text-shadow: 0 -1px 0 #000
 }
 
@@ -980,7 +981,7 @@ div#tadd {
 }
 
 div#tadd-header {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-bottom: 1px solid #3330;
     text-shadow: 0 -1px 0 #000;
 }
@@ -1024,7 +1025,7 @@ Input.TextboxLarge {
 }
 
 div.tab {
-    background-color: rgba(0, 0, 0, 0.25)
+    background: var(--transparency-dark-25)
 }
 
 div#t div#ind {
@@ -1063,7 +1064,7 @@ span#loadimg {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .2);
+    background: var(--transparency-dark-20);
     background-clip: padding-box;
 }
 
@@ -1075,7 +1076,7 @@ span#loadimg {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .5);
+    background: var(--transparency-light-50);
     background-clip: padding-box;
 }
 
@@ -1086,19 +1087,19 @@ input#add_button {
 }
 
 div#lcont div.std {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     height: 17px;
     line-height: 17px;
     border-bottom: 1px solid transparent;
 }
 
 div#lcont div.std:nth-child(2n+1) {
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 #StatusBar {
     border-top: 1px solid transparent;
-    background: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
     color: #ccc;
     font-family: Roboto
 }
@@ -1232,7 +1233,7 @@ span.det {
 
 .stable-head {
     color: var(--text-hover);
-    background: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
     border: none;
     text-shadow: 0px 1px 0px rgba(0, 0, 0, 0);
     font-family: Ubuntu;
@@ -1296,13 +1297,13 @@ div#tdcont .stable {
 }
 
 .stable-body tr.selected td {
-    background: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
     color: var(--text-hover);
     text-shadow: 0px -1px 0px rgba(0, 0, 0, 0);
 }
 
 div.stable-body table tbody tr.even td {
-    background: rgba(0, 0, 0, 0.08);
+    background: var(--transparency-dark-10);
 }
 
 div.stable-body table tbody tr.even td:nth-child(2n+1) {
@@ -1478,7 +1479,7 @@ div.graph_tab {
 }
 
 div#tcreate div.dlg-header {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-bottom: 1px solid transparent;
     text-shadow: 0px -1px 0px #000;
     background-image: none !important;
@@ -1494,7 +1495,7 @@ div#dlgAddRSS {
 
 div#dlgAddRSS-header,
 div#dlgAddRSS div.dlg-header {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-bottom: 1px solid transparent;
     text-shadow: 0px -1px 0px #000;
     background-image: none !important;
@@ -1746,7 +1747,7 @@ div#logoffDlg div.dlg-header {
     font-size: 11px;
     font-family: Tahoma, Arial, Helvetica, sans-serif;
     cursor: text;
-    background: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
     color: var(--text-hover) !important;
     outline: none !important;
 }
@@ -1760,13 +1761,13 @@ div#logoffDlg div.dlg-header {
 
 #dlgEditRatioRules .lf_rru li input.TextboxFocus,
 #dlgEditRules .lf_rur li input.TextboxFocus {
-    background-color: rgb(255 255 255 / 25%);
+    background-color: var(--transparency-light-25);
     color: var(--text-hover);
 }
 
 #dlgEditRatioRules .lf_rru li input.TextboxNormal,
 #dlgEditRules .lf_rur li input.TextboxNormal {
-    background-color: rgb(255 255 255 / .08) !important;
+    background: var(--transparency-light-10) !important;
     color: var(--text-hover);
 }
 
@@ -1782,5 +1783,5 @@ div#logoffDlg div.dlg-header {
 div#dlgEditRules-header,
 #dlgEditRatioRules-header,
 div#dlgEditRules div.dlg-header {
-    background: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
\ No newline at end of file
diff --git a/css/base/sabnzbd/sabnzbd-base.css b/css/base/sabnzbd/sabnzbd-base.css
index 2e128256..364203b9 100644
--- a/css/base/sabnzbd/sabnzbd-base.css
+++ b/css/base/sabnzbd/sabnzbd-base.css
@@ -10,6 +10,7 @@
 /*			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 body {
   background: var(--main-bg-color) !important;
@@ -106,7 +107,7 @@ a:focus {
   min-height: 50px;
   border: 3px solid transparent;
   border-radius: 8px;
-  background-color: hsla(0, 0%, 100%, .2);
+  background: var(--transparency-dark-20);
   background-clip: padding-box;
 }
 
@@ -118,7 +119,7 @@ a:focus {
   min-height: 50px;
   border: 3px solid transparent;
   border-radius: 8px;
-  background-color: hsla(0, 0%, 100%, .5);
+  background: var(--transparency-light-50);
   background-clip: padding-box;
 }
 
@@ -133,7 +134,7 @@ hr {
 }
 
 .navbar-inverse {
-  background-color: rgba(0, 0, 0, .25);
+  background: var(--transparency-dark-25);
   border-color: transparent !important;
 }
 
@@ -169,7 +170,7 @@ hr {
 .navbar-inverse .navbar-nav>.open>a,
 .navbar-inverse .navbar-nav>.open>a:hover,
 .navbar-inverse .navbar-nav>.open>a:focus {
-  background-color: hsla(0, 0%, 100%, .08);
+  background: var(--transparency-dark-10);
 }
 
 .ui-slider-horizontal,
@@ -183,7 +184,7 @@ hr {
 }
 
 .main-content {
-  background-color: rgba(0, 0, 0, 0.15);
+  background: var(--transparency-dark-15);
   border: none;
 }
 
@@ -214,7 +215,7 @@ hr {
 }
 
 .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
-  background-color: rgba(255, 255, 255, 0.25);
+  background: var(--transparency-light-25);
 }
 
 .navbar-inverse .navbar-toggle {
@@ -224,7 +225,7 @@ hr {
 .dropdown-menu>li>a:hover,
 .dropdown-menu>li>a:focus {
   color: var(--text-hover);
-  background-color: rgba(255, 255, 255, 0.08);
+  background: var(--transparency-light-10);
 }
 
 .dropdown-header {
@@ -504,7 +505,7 @@ td.delete .dropdown>a .caret {
 }
 
 .table-striped>tbody>tr:nth-of-type(odd) {
-  background-color: rgba(0, 0, 0, 0.25);
+  background: var(--transparency-dark-25);
 }
 
 tbody.no-downloads tr td {
@@ -524,15 +525,15 @@ tbody>tr>td:first-child {
 }
 
 table {
-  background-color: rgba(0, 0, 0, 0.25) !important
+  background: var(--transparency-dark-25) !important
 }
 
 table:hover {
-  background-color: rgba(0, 0, 0, 0.25) !important;
+  background: var(--transparency-dark-25) !important;
 }
 
 .table-hover>tbody>tr:hover {
-  background-color: rgba(255, 255, 255, 0.07) !important;
+  background-color: var(--transparency-dark-10) !important;
   color: var(--text-hover);
 }
 
@@ -555,7 +556,7 @@ tr td.row-extra-text,
 
 .table-messages .table-messages-remove {
   border-bottom: 1px solid transparent !important;
-  background: rgba(255, 255, 255, 0.25);
+  background: var(--transparency-light-25);
 }
 
 .progress .progress-bar .fileDetails {
@@ -601,7 +602,7 @@ tr td.row-extra-text,
 
 .multioperations-selector {
   border: 1px solid transparent !important;
-  background-color: rgba(0, 0, 0, 0.25) !important;
+  background: var(--transparency-dark-25) !important;
 }
 
 #history-options .hover-button {
@@ -610,7 +611,7 @@ tr td.row-extra-text,
 
 #history-tab .table>tbody>tr:nth-of-type(2n+1),
 .table-striped>tbody>tr:nth-of-type(2n+1) {
-  background-color: rgba(255, 255, 255, 0.05);
+  background: var(--transparency-light-05);
 }
 
 .pagination>li>a,
@@ -653,7 +654,7 @@ tr td.row-extra-text,
 .pagination>.disabled>a:hover,
 .pagination>.disabled>a:focus {
   color: var(--text-muted);
-  background-color: rgba(0, 0, 0, .25);
+  background: var(--transparency-dark-25);
   border: 1px solid transparent;
 }
 
@@ -664,7 +665,7 @@ tr td.row-extra-text,
 
 .form-control {
   color: var(--text-hover);
-  background-color: rgb(0 0 0 / 25%);
+  background: var(--transparency-dark-25);
 }
 
 .form-control:focus {
@@ -691,13 +692,13 @@ tr td.row-extra-text,
 .nav-tabs>li.active>a:hover,
 .nav-tabs>li.active>a:focus {
   color: #555;
-  background-color: rgba(255, 255, 255, 0.15);
+  background: var(--transparency-light-15);
 }
 
 .nav>li>a:hover,
 .nav>li>a:focus {
   text-decoration: none;
-  background-color: rgba(255, 255, 255, 0.08);
+  background: var(--transparency-light-10);
 }
 
 .badge {
@@ -723,7 +724,7 @@ tr td.row-extra-text,
 }
 
 .navbar-default .navbar-nav>.open>a {
-  background-color: hsla(0, 0%, 0%, .15);
+  background: var(--transparency-dark-15);
 }
 
 .navbar-default .navbar-nav>li>a:hover,
@@ -732,12 +733,12 @@ tr td.row-extra-text,
 }
 
 .navbar-default .navbar-nav>li>a:hover {
-  background-color: hsla(0, 0%, 100%, .08) !important;
+  background: var(--transparency-dark-10) !important;
   color: var(--text-hover) !important;
 }
 
 .navbar-default .navbar-nav>li>a.active {
-  background-color: hsla(0, 0%, 0%, .15) !important;
+  background: var(--transparency-dark-15) !important;
   color: rgb(var(--accent-color)) !important;
 }
 
@@ -747,7 +748,7 @@ tr td.row-extra-text,
 
 .colmask {
   border: none;
-  background-color: rgba(0, 0, 0, .25);
+  background: var(--transparency-dark-25);
 }
 
 .padTable:not(.ui-sortable) {
@@ -775,7 +776,7 @@ table {
 
 .alt,
 .infoTableSeperator.alt {
-  background-color: rgba(0, 0, 0, .25);
+  background: var(--transparency-dark-25);
 }
 
 .info-container {
@@ -807,14 +808,14 @@ table {
 
 .form-control.advanced-button.config-hover {
   color: var(--text-hover);
-  background-color: rgba(255, 255, 255, 0.25);
+  background: var(--transparency-light-25);
   border-color: rgba(255, 255, 255, 0.25);
   border-radius: 3px !important;
 }
 
 .form-control.advanced-button.config-hover:hover {
   color: var(--text-hover);
-  background-color: rgba(255, 255, 255, 0.3);
+  background: var(--transparency-light-30);
   border-color: rgba(255, 255, 255, 0.3);
   border-radius: 3px !important;
 }
@@ -834,7 +835,7 @@ input[type="date"],
 textarea,
 select {
   border: none;
-  background-color: rgba(0, 0, 0, 0.15);
+  background: var(--transparency-dark-15);
   border-radius: 3px !important;
   color: var(--text-hover) !important;
   outline: none;
@@ -882,7 +883,7 @@ input[type="text"]:focus,
 input[type="time"]:focus,
 input[type="url"]:focus,
 input[type="week"]:focus {
-  background-color: rgba(255, 255, 255, 0.1);
+  background: var(--transparency-light-10);
   border: none;
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
@@ -979,12 +980,12 @@ select[disabled]:hover {
 
 /*Folder modal*/
 .list-group-item {
-  background-color: rgba(0, 0, 0, 0.25);
+  background: var(--transparency-dark-25);
   border: none;
 }
 
 .example {
-  background-color: rgba(255, 255, 255, 0.15);
+  background: var(--transparency-light-15);
 }
 
 /*modal*/
@@ -1032,7 +1033,7 @@ select[disabled]:hover {
 .modal-body>.nav-tabs>li.active>a:hover,
 .modal-body>.nav-tabs>li.active>a:focus {
   color: rgb(var(--accent-color)) !important;
-  background-color: hsla(0, 0%, 100%, .08) !important;
+  background: var(--transparency-dark-10) !important;
   border: transparent;
   border-bottom-color: transparent;
   cursor: default;
@@ -1044,7 +1045,7 @@ select[disabled]:hover {
 
 .modal-body>.nav>li>a:hover,
 .modal-body>.nav>li>a:focus {
-  background-color: hsla(0, 0%, 100%, .08) !important;
+  background: var(--transparency-dark-10) !important;
   color: var(--text-hover) !important;
 }
 
@@ -1080,11 +1081,11 @@ select[disabled]:hover {
 
 #modal-options .table-server-connections thead {
 
-  background-color: rgba(0, 0, 0, .25);
+  background: var(--transparency-dark-25);
 }
 
 #modal-options .table-server-connections thead {
-  background-color: rgba(0, 0, 0, .25);
+  background: var(--transparency-dark-25);
 }
 
 #modal-item-files .item-files-table .progress small {
@@ -1102,7 +1103,7 @@ a.list-group-item:focus,
 button.list-group-item:focus {
   text-decoration: none;
   color: var(--text-hover);
-  background-color: rgba(255, 255, 255, 0.08);
+  background: var(--transparency-light-10);
 }
 
 .form-control {
@@ -1110,7 +1111,7 @@ button.list-group-item:focus {
 }
 
 .fade.in {
-  background: rgba(0, 0, 0, 0.6);
+  background: var(--transparency-dark-60)
 }
 
 .fade {
@@ -1143,11 +1144,11 @@ fieldset[disabled] .form-control {
 }
 
 .language:hover {
-  background-color: rgb(255 255 255 / 10%);
+  background: var(--transparency-light-10);
 }
 
 .container .quoteBlock {
-  background-color: rgb(0 0 0 / 25%);
+  background: var(--transparency-dark-25);
 }
 
 #content a,
diff --git a/css/base/sonarr/sonarr-base.css b/css/base/sonarr/sonarr-base.css
index 0f3c1725..14dde3c5 100644
--- a/css/base/sonarr/sonarr-base.css
+++ b/css/base/sonarr/sonarr-base.css
@@ -11,6 +11,7 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 :root {
     --calendar-tv-unaired-premiere: 53 197 244;
@@ -178,7 +179,7 @@ a:hover {
 }
 
 [class*="SelectInput-select-"] {
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="SelectInput-select-"]:active,
@@ -195,7 +196,7 @@ a:hover {
 }
 
 [class*="AutoSuggestInput-suggestionHighlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 [class*="CheckInput-primaryIsChecked-"] {
@@ -211,7 +212,7 @@ a:hover {
 /* HEADER */
 
 [class*="PageHeader-header-"] {
-    background-color: rgba(0, 0, 0, .35);
+    background: var(--transparency-dark-35);
     color: var(--text);
 }
 
@@ -225,7 +226,7 @@ a:hover {
 
 [class*="EpisodeDetailsModalContent-selectedTab-"] {
     border-color: var(--accent-color-hover);
-    background-color: rgb(0 0 0 / 40%);
+    background: var(--transparency-dark-40);
 }
 
 [class*="SeriesSearchInput-sectionTitle-"] {
@@ -247,24 +248,24 @@ a:hover {
 }
 
 [class*="SeriesSearchInput-highlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 [class*="SeriesSearchInput-seriesContainer-"]::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.25) !important;
+    background: var(--transparency-light-25) !important;
 }
 
 [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 /* SIDE MENU */
 [class*="PageSidebar-sidebarContainer-"] {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="PageSidebar-sidebar-"] {
@@ -287,7 +288,7 @@ a:hover {
 }
 
 [class*="PageSidebarItem-isActiveParentLink-"] {
-    background-color: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15);
 }
 
 @media only screen and (max-width: 768px) {
@@ -328,7 +329,7 @@ a:hover {
 }
 
 [class*="SeriesIndexOverview-content-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="SeriesIndexOverview-link-"]:hover {
@@ -336,7 +337,7 @@ a:hover {
 }
 
 [class*="ProgressBar-container-"] {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 
@@ -348,7 +349,7 @@ a:hover {
 [class*="SeriesDetailsSeason-season-"],
 [class*="SeriesDetailsSeason-collapseButtonContainer-"] {
     border: none !important;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="SeriesDetailsSeason-episodes-"] {
@@ -403,7 +404,7 @@ a:hover {
 
 [class*="SeriesDetailsSeason-collapseButtonContainer-"] {
     border: none !important;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"],
@@ -520,7 +521,7 @@ a:hover {
 
 /* Table options*/
 [class*="TableOptionsColumn-column-"] {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
     border: none;
 }
@@ -534,17 +535,17 @@ a:hover {
 }
 
 [class*="TableRow-row-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: var(--text-hover);
 }
 
 [class*="TableRowCell-cell-"] {
-    border-top: 1px solid rgb(255 255 255 / 25%);
+    border-top: 1px solid var(--transparency-light-25);
 }
 
 /* TOP MENU SERIES */
 [class*="PageToolbar-toolbar-"] {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text);
 }
 
@@ -574,7 +575,7 @@ a:hover {
 [class*="SeriesIndexPoster-title-"],
 [class*="SeriesIndexPoster-nextAiring-"],
 [class*="SeriesIndexPosterInfo-info-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -601,13 +602,13 @@ a:hover {
 
 [class*="MenuItem-menuItem-"]:hover,
 [class*="MenuItem-menuItem-"]:focus {
-    background: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
     color: var(--text-hover);
     text-decoration: none;
 }
 
 [class*="MenuItemSeparator-separator-"] {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 /* ALPHABET JUMP BAR */
@@ -618,12 +619,12 @@ a:hover {
 /* MINI RIGHT SCROLL BAR */
 [class*="OverlayScroller-thumb-"],
 [class*="ImportSeriesSelectSeries-results-"]::-webkit-scrollbar-thumb {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="OverlayScroller-thumb-"]:hover,
 [class*="ImportSeriesSelectSeries-results-"]::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.25) !important;
+    background: var(--transparency-light-25) !important;
 }
 
 /* ADD NEW */
@@ -647,12 +648,12 @@ a:hover {
 
 [class*="EnhancedSelectInputOption-isSelected-"],
 [class*="EnhancedSelectInputOption-isSelected-"]:hover {
-    background-color: rgba(255, 255, 255, 0.20) !important;
+    background: var(--transparency-light-20) !important;
     color: var(--text-hover);
 }
 
 [class*="EnhancedSelectInputOption-option-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 [class*="HintedSelectInputOption-hintText-"] {
@@ -689,7 +690,7 @@ a:hover {
 [class*="AddNewSeries-searchIconContainer-"],
 [class*="CheckInput-isIndeterminate-"] {
     border: none;
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -712,7 +713,7 @@ a:hover {
     outline: 0;
     border-color: var(--text-hover);
     box-shadow: none;
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 [class*="TagInput-input-"][class*="TagInput-isFocused-"] {
@@ -736,7 +737,7 @@ a:hover {
 }
 
 [class*="AddNewSeriesSearchResult-underlay-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="AddNewSeriesSearchResult-year-"] {
@@ -761,17 +762,17 @@ a:hover {
 }
 
 [class*="VirtualTableRow-row-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 /* Drop down menu/button*/
 [class*="ImportSeriesSelectSeries-button-"] {
     border: none !important;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="ImportSeriesSearchResult-series-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 [class*="ImportSeriesSelectSeries-content-"],
@@ -796,7 +797,7 @@ a:hover {
 /* FOOTER */
 [class*="PageContentFooter-contentFooter-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
@@ -804,7 +805,7 @@ a:hover {
 
 [class*="SeasonPassSeason-season-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="SeasonPassSeason-allEpisodes-"] {
@@ -883,18 +884,18 @@ a:hover {
 }
 
 [class*="DayOfWeek-dayOfWeek-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: var(--text-hover);
 }
 
 [class*="CalendarDay-dayOfMonth-"] {
     border-bottom: 1px solid hsla(0, 0%, 100%, .08);
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="CalendarDay-isToday-"],
 [class*="DayOfWeek-isToday-"] {
-    background-color: hsla(0, 0%, 100%, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="CalendarDay-day-"],
@@ -939,7 +940,7 @@ a:hover {
 
 /* calendar agenda */
 [class*="AgendaEvent-event-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 /*QUEUE PAGE */
@@ -972,25 +973,25 @@ a:hover {
 }
 
 [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 [class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 [class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 2550, 0.25);
+    background: var(--transparency-light-25);
 }
 
 [class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 2550, 0.35);
+    background: var(--transparency-light-35);
 }
 
 /* PROFILES */
 [class*="Card-card-"],
 [class*="QualityProfiles-addQualityProfile-"] {
-    background-color: rgba(0, 0, 0, .45);
+    background: var(--transparency-dark-45);
     box-shadow: 0 0 10px 1px #000000;
     color: var(--text);
 }
@@ -1014,12 +1015,12 @@ a:hover {
 [class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
 [class*="LanguageProfileItem-languageProfileItem-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
 [class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 [class*="KeyValueListInputItem-keyInput-"],
@@ -1062,19 +1063,19 @@ a:hover {
 /* LOG */
 [class*="Alert-info-"] {
     border-color: transparent;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: #FFC107;
 }
 
 /* Login Page */
 
 .panel-body {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: var(--text);
 }
 
 .panel-header {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
 }
 
 .forgot-password {
@@ -1084,7 +1085,7 @@ a:hover {
 input[type=email],
 input[type=password] {
     border: none;
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -1105,7 +1106,7 @@ input[type=password] {
     outline: 0;
     border-color: var(--text-hover);
     box-shadow: none;
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 /* Custom filter */
@@ -1114,7 +1115,7 @@ input[type=password] {
 }
 
 [class*="CustomFilter-customFilter-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 /* Scene information */
diff --git a/css/base/synclounge/synclounge-base.css b/css/base/synclounge/synclounge-base.css
index bd414548..7519645c 100644
--- a/css/base/synclounge/synclounge-base.css
+++ b/css/base/synclounge/synclounge-base.css
@@ -11,6 +11,7 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 :root {
     --v-primary-base: rgb(var(--accent-color));
@@ -40,7 +41,7 @@ h4 {
 
 .v-toolbar__content,
 .v-toolbar__extension {
-    background-color: rgba(0, 0, 0, 0.6) !important;
+    background: var(--transparency-dark-60) !important;
 }
 
 p a {
@@ -146,7 +147,7 @@ p a {
 
 .flex.md3 .application .theme--dark.v-card,
 .theme--dark .v-card {
-    background: rgba(255, 255, 255, 0.10) !important;
+    background: var(--transparency-light-10) !important;
     color: var(--text-hover);
 }
 
@@ -156,7 +157,7 @@ p a {
 }
 
 .theme--dark.v-text-field--solo>.v-input__control>.v-input__slot {
-    background: rgb(0 0 0 / 0.50);
+    background: var(--transparency-dark-50);
 }
 
 .v-navigation-drawer {
diff --git a/css/base/tautulli/tautulli-base.css b/css/base/tautulli/tautulli-base.css
index 3e0eee76..9c8b78bd 100644
--- a/css/base/tautulli/tautulli-base.css
+++ b/css/base/tautulli/tautulli-base.css
@@ -11,6 +11,7 @@
 /*			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 body {
     background: var(--main-bg-color);
@@ -131,7 +132,7 @@ a.no-highlight:hover,
 .nav>li.active>a:hover,
 .nav>li.active>a:focus {
     color: #f9be03;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .nav>li>a {
@@ -140,14 +141,14 @@ a.no-highlight:hover,
 
 .nav>li>a:hover,
 .nav>li>a:focus {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
 .nav .open>a,
 .nav .open>a:hover,
 .nav .open>a:focus {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: rgb(var(--accent-color));
 }
 
@@ -169,12 +170,12 @@ a.no-highlight:hover,
 
 .dropdown-menu>li>a:hover,
 .dropdown-menu>li>a:focus {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
 .dropdown-menu .divider {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 select,
@@ -205,15 +206,15 @@ select,
 .dashboard-stats-background,
 .dashboard-activity-background,
 .dashboard-activity-poster-container {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .dashboard-activity-progress-bar {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .dashboard-activity-progress .buffer-bar {
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 .dashboard-activity-metadata-user a {
@@ -275,7 +276,7 @@ select,
 }
 
 .btn-danger.btn-edit {
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 .btn-form {
@@ -303,18 +304,18 @@ input[type="search"],
 input[type="tel"],
 input[type="color"],
 .uneditable-input {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .react-selectize.root-node .react-selectize-control,
 .selectize-control.form-control .selectize-input {
-    background: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 /*Formcontrol */
 select.form-control,
 div.form-control .selectize-input {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 @media (min-width: 768px) {
@@ -326,11 +327,11 @@ div.form-control .selectize-input {
 .form-control[disabled],
 .form-control[readonly],
 fieldset[disabled] .form-control {
-    background-color: rgba(236, 236, 236, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 textarea.form-control {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 textarea:focus,
@@ -350,7 +351,7 @@ input[type="tel"]:focus,
 input[type="color"]:focus,
 .uneditable-input:focus {
     color: var(--text-hover);
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 .form-control:focus {
@@ -362,22 +363,22 @@ input[type="color"]:focus,
 
 /* Settings table cards */
 .table-card-header {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-bottom: 1px solid rgba(255, 255, 255, 0.25);
     border-top: 1px solid #00000000;
 }
 
 .table-card-back {
-    background-color: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15);
 }
 
 table.display thead th {
     color: var(--text-hover);
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 table.display thead tr:hover {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
 }
 
 /*Settings menu */
@@ -391,24 +392,24 @@ table.display thead tr:hover {
 }
 
 .nav-settings>li {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
     border-top: 1px solid transparent;
 }
 
 .nav-settings>.active>a,
 .nav-settings>.active>a:hover,
 .nav-settings>.active>a:focus {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .nav-settings>li>a:hover,
 .nav-settings>li>a:focus {
     color: var(--text-hover);
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 .card {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-top: 1px solid #00000000;
 }
 
@@ -418,12 +419,12 @@ table.display thead tr:hover {
 
 .card-handle {
     color: var(--text-hover);
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 /*Notification agents menu */
 .stacked-configs>li {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 .stacked-configs>li>span {
@@ -435,7 +436,7 @@ table.display thead tr:hover {
 .stacked-configs>li>span:hover,
 .stacked-configs>li>span:focus {
     color: var(--text-hover);
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 .stacked-configs>li>span>a.toggle-left,
@@ -449,17 +450,17 @@ span>a.active,
 }
 
 .inline-pre {
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 /* Summary containers */
 .summary-container .table-card-header,
 .summary-container .table-card-back {
-    background: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45)
 }
 
 .summary-navbar {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 /* pagination */
@@ -469,7 +470,7 @@ span>a.active,
 .pagination>.disabled>a,
 .pagination>.disabled>a:hover,
 .pagination>.disabled>a:focus {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     border-color: #00000000;
 }
 
@@ -491,7 +492,7 @@ span>a.active,
 
 /* Graphs */
 .graphs-instance {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
 }
 
 /* Modal */
@@ -558,7 +559,7 @@ span>a.active,
 #newsletter-config-modal .nav-tabs>li.active>a:hover,
 #newsletter-config-modal .nav-tabs>li.active>a:focus {
     color: var(--text-hover);
-    background: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45)
 }
 
 #notifier-config-modal .nav-tabs>li.active>a,
@@ -574,7 +575,7 @@ span>a.active,
 #notifier-config-modal .nav-tabs>li>a:hover,
 #newsletter-config-modal .nav-tabs>li>a:hover {
     border-color: #0000;
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -584,7 +585,7 @@ span>a.active,
 }
 
 .accordion {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 .accordion li .link {
@@ -594,21 +595,21 @@ span>a.active,
 
 .accordion li .link:hover,
 .accordion li .link:hover i.fa {
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 .submenu {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 /* Stream info */
 .stream-info {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 /* Edit metadata */
 .item-children-section-title {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     border-bottom: 1px solid #00000000;
     border-top: 1px solid #00000000;
 }
@@ -616,11 +617,11 @@ span>a.active,
 /* Mobile */
 .navbar-toggle:hover,
 .navbar-toggle:focus {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 .navbar-toggle {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 @media (max-width: 768px) {
diff --git a/css/base/thelounge/thelounge-base.css b/css/base/thelounge/thelounge-base.css
index efb54f17..0a0a9a3e 100644
--- a/css/base/thelounge/thelounge-base.css
+++ b/css/base/thelounge/thelounge-base.css
@@ -10,12 +10,14 @@
 /*		   		        Made by @gilbN					 */
 /* 			      https://github.com/gilbN/theme.park			 */
 
+@import url("/css/defaults/transparent.css");
+
 #chat .userlist .names {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 #chat .user-mode:before {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 @media (max-width: 768px) {
@@ -37,7 +39,7 @@
     #viewport.menu-dragging #sidebar,
     #viewport.menu-open #sidebar {
         box-shadow: 0 0 25px 0 rgba(0, 0, 0, .5);
-        background: rgba(0, 0, 0, 0.85);
+        background: var(--transparency-dark-85)
     }
 }
 
@@ -53,20 +55,20 @@
 }
 
 #form {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
     border-color: #0086ff00;
     color: var(--body-color);
 }
 
 #sidebar .active,
 #sidebar .active:hover {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 #chat .msg.motd .text,
 code,
 .irc-monospace {
-    background: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
     color: #f3f3f3;
 }
 
@@ -78,7 +80,7 @@ code,
 }
 
 #chat .msg[data-type=motd] .text {
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 /* Dropdown menu */
@@ -106,7 +108,7 @@ code,
 .textcomplete-item:focus,
 .textcomplete-item:hover,
 .textcomplete-menu .active {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     transition: none;
     outline: 0;
 }
@@ -125,12 +127,12 @@ code,
 }
 
 #chat .userlist .count {
-    background-color: rgba(0, 0, 0, 0.6);
+    background: var(--transparency-dark-60);
 }
 
 #footer button:hover,
 #sidebar .chan:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 #settings .extra-help:before {
diff --git a/css/base/transmission/transmission-base.css b/css/base/transmission/transmission-base.css
index 306c9c92..732d51ac 100644
--- a/css/base/transmission/transmission-base.css
+++ b/css/base/transmission/transmission-base.css
@@ -11,6 +11,7 @@
 /*			      https://github.com/gilbN/theme.park			 */
 @import url(https://use.fontawesome.com/releases/v5.0.7/css/all.css);
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 
 * {
@@ -67,7 +68,7 @@ body {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .2);
+    background: var(--transparency-dark-20);
     background-clip: padding-box;
 }
 
@@ -79,7 +80,7 @@ body {
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .5);
+    background: var(--transparency-light-50);
     background-clip: padding-box;
 }
 
@@ -101,7 +102,7 @@ div#torrent_inspector #inspector_header #torrent_inspector_name,
 
 /* Toolbar */
 div#toolbar {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     background-image: none;
     border-bottom: 1px solid transparent;
 }
@@ -245,7 +246,7 @@ div#toolbar>div#toolbar-inspector:before {
 #statusbar {
     border-bottom: 1px solid transparent;
     background-image: none;
-    background-color: rgba(0, 0, 0, 0.25)
+    background: var(--transparency-dark-25)
 }
 
 #statusbar #filter input#torrent_search {
@@ -285,7 +286,7 @@ div#toolbar>div#toolbar-inspector:before {
 
 ul.torrent_list,
 ul.torrent_list li.torrent.even {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 ul.torrent_list li.torrent div.torrent_name {
@@ -293,14 +294,14 @@ ul.torrent_list li.torrent div.torrent_name {
 }
 
 ul.torrent_list li.torrent.selected {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 ul.torrent_list li.torrent {
     border-bottom: 1px solid rgba(204, 204, 204, 0.1);
     padding: 4px 30px 5px 14px;
     color: var(--text);
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 /* Modal */
@@ -324,7 +325,7 @@ div#upload_container div.dialog_window div.dialog_message label {
 
 input {
     color: var(--text-hover);
-    background: rgba(0, 0, 0, .25)
+    background: var(--transparency-dark-25)
 }
 
 #add-dialog-folder-input,
@@ -421,7 +422,7 @@ div.dialog_container div.dialog_window a:active {
 .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active {
     border: 1px solid transparent;
-    background: rgba(255, 255, 255, .1) !important;
+    background: var(--transparency-light-10) !important;
     font-weight: normal;
     color: var(--text);
 }
@@ -444,7 +445,7 @@ div.dialog_container div.dialog_window a:active {
 .ui-widget-content .ui-state-default,
 .ui-widget-header .ui-state-default {
     border: 1px solid transparent;
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     font-weight: normal;
     color: var(--text);
 }
@@ -482,7 +483,7 @@ div#torrent_inspector {
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>* {
     border-color: transparent;
     height: auto;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 div#torrent_inspector div.inspector_torrent_file_list_entry_name,
@@ -495,7 +496,7 @@ div#torrent_inspector div.tracker_host {
 /*Info button*/
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info {
     background-image: none;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info:hover:before {
@@ -514,7 +515,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-inf
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info:active,
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info.selected {
     background-image: none;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-info:active,
@@ -535,7 +536,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-inf
 /*Peers Button*/
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers {
     background-image: none;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers:hover:before {
@@ -554,7 +555,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-pee
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers:active,
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers.selected {
     background-image: none;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-peers:active,
@@ -575,7 +576,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-pee
 /*Tracker Button*/
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers {
     background-image: none;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers:hover:before {
@@ -594,7 +595,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-tra
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers:active,
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers.selected {
     background-image: none;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-trackers:active,
@@ -615,7 +616,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-tra
 /*Files Button*/
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files {
     background-image: none;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files:hover:before {
@@ -634,7 +635,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-fil
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files:active,
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files.selected {
     background-image: none;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-files:active,
@@ -653,7 +654,7 @@ div#torrent_inspector #inspector-tabs-wrapper #inspector-tabs>#inspector-tab-fil
 }
 
 tr.inspector_peer_entry.odd {
-    background-color: rgba(255, 255, 255, 0.1);
+    background: var(--transparency-light-10);
 }
 
 /* Priority buttons */
@@ -783,13 +784,13 @@ div.file-priority-radiobox>div.high.selectedbefore {
 }
 
 div#torrent_inspector li.inspector_tracker_entry.odd {
-    background-color: rgba(255, 255, 255, 0.1);
+    background: var(--transparency-light-10);
 }
 
 /*Bottom Toolbar*/
 div.torrent_footer {
     border-top: 1px solid transparent;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     background-image: none;
     height: 30px;
 }
@@ -973,7 +974,7 @@ ul.torrent_list li.torrent.compact div.torrent_name {
 .ui-widget-header .ui-state-focus {
     border: 1px solid transparent;
     background: none;
-    background-color: rgba(255, 255, 255, 0.1);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
     outline: none;
 }
diff --git a/css/base/unraid/unraid-base.css b/css/base/unraid/unraid-base.css
index e9a7c65d..a9e5cdad 100644
--- a/css/base/unraid/unraid-base.css
+++ b/css/base/unraid/unraid-base.css
@@ -11,6 +11,7 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 * {
     outline: none;
@@ -95,7 +96,7 @@ pre {
 }
 
 #header .block {
-    background-color: rgb(0 0 0 / 20%);
+    background: var(--transparency-dark-20);
     border-radius: 0px 0px 0px 25px;
 }
 
@@ -122,12 +123,12 @@ pre {
 }
 
 textarea {
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
 }
 
 /*DASHBOARD*/
 table.share_status.dashboard {
-    background-color: rgba(0, 0, 0, .15);
+    background: var(--transparency-dark-15);
     border: 1px solid rgba(255, 255, 255, .25);
 }
 
@@ -153,7 +154,7 @@ table.tablesorter thead tr th {
 .sys,
 .usage-disk,
 .usage-bar {
-    background: rgba(0, 0, 0, .35);
+    background: var(--transparency-dark-35)
 }
 
 .usage-disk>span:first-child {
@@ -177,12 +178,12 @@ table.tablesorter thead tr th {
 /*MAIN*/
 #title {
     border-bottom: 1px solid rgba(255, 255, 255, .25);
-    background-color: rgba(0, 0, 0, .5);
+    background: var(--transparency-dark-50);
     color: var(--text-hover);
 }
 
 table {
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
 }
 
 table.disk_status thead tr:first-child td,
@@ -193,11 +194,11 @@ table.tablesorter thead tr th,
 table.tablesorter tbody tr:nth-child(even),
 table.tablesorter thead tr .tablesorter-headerAsc,
 table.tablesorter thead tr .tablesorter-headerDesc {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 table.disk_status tbody tr:nth-child(even) {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 table.disk_status thead tr:last-child {
@@ -286,7 +287,7 @@ a.button:hover,
 /* USERS */
 div.user-list {
     border: 1px solid rgba(255, 255, 255, .15);
-    background-color: rgba(255, 255, 255, .05);
+    background: var(--transparency-light-05);
 }
 
 /* SETTINGS */
@@ -356,8 +357,8 @@ div.tab [type=radio]+label:hover {
 }
 
 div.tab [type=radio]+label {
-    border: 1px solid rgb(255 255 255 / 25%);
-    background-color: rgb(0 0 0 / 50%);
+    border: 1px solid var(--transparency-light-25);
+    background: var(--transparency-dark-50);
     opacity: 0.5;
 }
 
@@ -382,7 +383,7 @@ background-color: var(--text);
 }
 
 .ca_holderDocker {
-    background-color: rgb(0 0 0 / 10%) !important;
+    background: var(--transparency-dark-10) !important;
     border-color: rgb(0 0 0 / 25%) !important;
 }
 
@@ -456,12 +457,12 @@ li.caMenuItem:hover {
 }
 
 .ca_holder {
-    background-color: rgb(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
     border-color: rgba(255, 255, 255, 0.1) !important;
 }
 
 .ca_holder:hover {
-    background-color: rgba(0, 0, 0, 0.45) !important;
+    background: var(--transparency-dark-45) !important;
 }
 
 .supportButton,
@@ -593,7 +594,7 @@ span .maxPerPage {
 
 #searchBox,
 .searchSubmit {
-    background: rgba(255, 255, 255, 0.05) !important;
+    background: var(--transparency-light-05) !important;
 }
 
 /* CA slide in menu */
@@ -637,7 +638,7 @@ div.tabs {
 }
 
 .dropdown-menu .divider {
-    background-color: rgb(255 255 255 / 10%) !important;
+    background: var(--transparency-light-10) !important;
     border-bottom: 1px solid rgb(255 255 255 / 10%) !important;
 }
 
@@ -645,12 +646,12 @@ div.tabs {
 .dropdown-menu li>a:focus,
 .dropdown-submenu:hover>a {
     color: var(--text-hover) !important;
-    background: rgb(255 255 255 / 10%) !important;
+    background: var(--transparency-light-10) !important;
 }
 
 /*VM MANAGER*/
 div.shade-black {
-    background-color: rgb(0 0 0 / 15%) !important;
+    background-color: var(--transparency-dark-15) !important;
 }
 
 /* MODAL */
@@ -685,7 +686,7 @@ blockquote {
     border-top: 2px solid rgb(0 0 0 / 25%);
     border-bottom: 2px solid rgb(0 0 0 / 25%);
     color: var(--text);
-    background-color: rgb(0 0 0 / 10%);
+    background: var(--transparency-dark-10);
 }
 
 /* MY SERVERS */
@@ -734,7 +735,7 @@ unraid-authed::part(div[data-v-050c892a] > button) {
 
 /* Edit template*/
 #contDescription {
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     padding: 1%;
     border-radius: 5px;
 }
diff --git a/css/base/uptime-kuma/uptime-kuma-base.css b/css/base/uptime-kuma/uptime-kuma-base.css
index e0d1f21f..16a5bc7b 100644
--- a/css/base/uptime-kuma/uptime-kuma-base.css
+++ b/css/base/uptime-kuma/uptime-kuma-base.css
@@ -1,4 +1,5 @@
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 body,
 .dark {
@@ -80,21 +81,21 @@ a,
 .shadow-box,
 .dark .shadow-box {
     box-shadow: 0px 0px 20px 10px #0000001a;
-    background: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
 }
 
 .list .item:hover {
-    background-color: rgba(255, 255, 255, .15) !important;
+    background: var(--transparency-light-15) !important;
 }
 
 .dark .list .item.active,
 .list .item.active {
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .dark .hp-bar-big .beat.empty,
 .hp-bar-big .beat.empty {
-    background-color: rgba(255, 255, 255, .45) !important;
+    background: var(--transparency-light-45) !important;
 }
 
 
@@ -114,7 +115,7 @@ td {
 
 .dark .table-hover>tbody>tr:hover,
 .table-hover>tbody>tr:hover {
-    --bs-table-accent-bg: rgba(0, 0, 0, .2);
+    --bs-table-accent-bg: var(--transparency-dark-20);
     color: var(--text);
 }
 
@@ -132,7 +133,7 @@ td {
 .dropdown-item:hover,
 .dropdown-item:focus {
     color: var(--text-hover) !important;
-    background-color: rgba(255, 255, 255, .1) !important;
+    background: var(--transparency-light-10) !important;
 }
 
 .dark .dropdown-clear-data ul {
@@ -144,7 +145,7 @@ td {
 /* HEADER */
 .dark header,
 #app>div>header {
-    background-color: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
     border-bottom-color: rgba(255, 255, 255, 0) !important;
 }
 
@@ -268,7 +269,7 @@ td {
 .form-select,
 .form-control {
     color: var(--text);
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
     background-repeat: no-repeat;
 }
@@ -326,7 +327,7 @@ td {
 
 .multiselect__option--selected,
 .dark .multiselect__option--selected {
-    background: rgba(0, 0, 0, .45);
+    background: var(--transparency-dark-45);
     color: var(--text-hover);
     font-weight: 700;
 }
@@ -340,7 +341,7 @@ td {
 .dark .multiselect__tags,
 .multiselect__tags {
     color: var(--text);
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     border-color: transparent;
 }
 
@@ -348,7 +349,7 @@ td {
 .dark .multiselect__single,
 .multiselect__input,
 .multiselect__single {
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
     color: var(--text-hover) !important;
 }
 
diff --git a/css/base/vuetorrent/vuetorrent-base.css b/css/base/vuetorrent/vuetorrent-base.css
index 65e61be2..54bcdb9d 100644
--- a/css/base/vuetorrent/vuetorrent-base.css
+++ b/css/base/vuetorrent/vuetorrent-base.css
@@ -13,6 +13,7 @@
 /* MOBILE */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 @media (max-width: 720px) {
 
@@ -49,12 +50,12 @@ html {
 
 /* SCROLL BAR */
 #app>div>nav>nav>div.v-navigation-drawer__content::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, .1);
+    background: var(--transparency-light-10);
     border-radius: 20px
 }
 
 #app>div>nav>nav>div.v-navigation-drawer__content::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, .25);
+    background: var(--transparency-light-25);
     border-radius: 20px
 }
 
@@ -102,7 +103,7 @@ p,
 
 /* CARDS */
 [class*="theme--"].v-card {
-    background-color: rgba(0, 0, 0, .5);
+    background: var(--transparency-dark-50);
     color: var(--text);
 }
 
@@ -112,7 +113,7 @@ p,
 }
 
 .v-app-bar.v-app-bar--hide-shadow {
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 .v-app-bar.v-app-bar--is-scrolled {
@@ -132,18 +133,18 @@ p,
 
 /* SIDE MENU */
 .v-application .primary {
-    background: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
     color: var(--text) !important;
 }
 
 .v-application .secondary {
-    background-color: rgba(255, 255, 255, .15) !important;
+    background: var(--transparency-light-15) !important;
     border-color: rgba(255, 255, 255, .15) !important;
 
 }
 
 [class*="theme--"].v-navigation-drawer:not(.v-navigation-drawer--floating) .v-navigation-drawer__border {
-    background-color: rgba(0, 0, 0, .12);
+    background: var(--transparency-dark-10);
 }
 
 @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
@@ -164,7 +165,7 @@ p,
     .v-navigation-drawer--temporary:not(.v-navigation-drawer--close),
     .v-navigation-drawer--is-mobile:not(.v-navigation-drawer--close),
     .v-navigation-drawer--temporary:not(.v-navigation-drawer--close) {
-        background-color: rgba(0, 0, 0, 0.9);
+        background: var(--transparency-dark-10);
     }
 }
 
@@ -199,7 +200,7 @@ p,
 }
 
 [class*="theme--"].v-tabs>.v-tabs-bar {
-    background-color: rgba(0, 0, 0, .15);
+    background: var(--transparency-dark-15);
 }
 
 .v-application .white,
@@ -406,12 +407,12 @@ p,
 
 /* TABLE */
 [class*="theme--"].v-data-table {
-    background-color: rgba(0, 0, 0, .65);
+    background: var(--transparency-dark-65);
     color: var(--text);
 }
 
 [class*="theme--"].v-data-table>.v-data-table__wrapper>table>tbody>tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
-    background: rgb(255 255 255 / 15%);
+    background: var(--transparency-light-15);
 }
 
 [class*="theme--"].v-data-table>.v-data-table__wrapper>table>tbody>tr:not(:last-child)>td:last-child,
@@ -435,7 +436,7 @@ p,
 /* TOOLTIP */
 .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title,
 .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
-    background: rgba(0, 0, 0, 0.7);
+    background: var(--transparency-dark-70);
     border-bottom: 1px solid rgba(255, 255, 255, .1);
 }
 
diff --git a/css/base/webtools/webtools-base.css b/css/base/webtools/webtools-base.css
index 2af73e66..b7eaa31b 100644
--- a/css/base/webtools/webtools-base.css
+++ b/css/base/webtools/webtools-base.css
@@ -11,6 +11,7 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 body {
     background: var(--main-bg-color);
@@ -72,7 +73,7 @@ content-loading .contentLoading {
 
 /* NAVBAR */
 .head {
-    background-color: rgb(0 0 0 / 0.25);
+    background: var(--transparency-dark-25);
     box-shadow: 0 0 0 0px rgb(0 0 0 / 0%);
 }
 
@@ -82,23 +83,23 @@ content-loading .contentLoading {
 
 /* SIDE MENU */
 .menu .toggle {
-    background: rgb(0 0 0 / .25);
+    background: var(--transparency-dark-25);
     color: var(--accent-color);
 }
 
 .menu {
-    background-color: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     box-shadow: 0 0 0 0px rgba(0, 0, 0, 0);
 }
 
 .menu .item {
-    background: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
     color: var(--button-text);
     box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .0);
 }
 
 .menu .item:hover {
-    background: rgb(255 255 255 / .16);
+    background: var(--transparency-light-15);
     color: var(--text-hover);
 }
 
@@ -136,7 +137,7 @@ content-loading .contentLoading {
 
 /* PAGES */
 .sub .settings {
-    background: rgb(255 255 255 / 25%);
+    background: var(--transparency-light-25);
 }
 
 label {
@@ -150,30 +151,30 @@ label {
 .fm .sections .section,
 .playlists .userContainer .fileContainer,
 .playlists .playlistContainer {
-    background: rgb(255 255 255 / .08);
+    background: var(--transparency-light-10);
     box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .0);
     border: transparent;
 }
 
 .uas .type:hover {
-    background: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
 .sub .rowShow:hover,
 .uas .repoContainer .repo:hover,
 .fm .sections .section:hover {
-    background: rgb(255 255 255 / .16);
+    background: var(--transparency-light-15);
     box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .0);
 }
 
 .expanded:hover {
-    background: rgb(255 255 255 / .08) !important;
+    background: var(--transparency-light-10) !important;
     box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .0);
 }
 
 .sub .rowShow .lineShow .contentShow .detail {
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     color: var(--text) !important;
 }
 
@@ -183,11 +184,11 @@ label {
 }
 
 .sub .rowShow .lineShow .contentShow .detail .subItem.selected {
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
 }
 
 .sub .rowShow .lineShow .contentShow .detail .subItem.checked {
-    background: rgba(255, 255, 255, 0.5);
+    background: var(--transparency-light-50);
     color: var(--text-hover);
 }
 
@@ -196,12 +197,12 @@ label {
 }
 
 .sub .rowShow .lineShow .contentShow .tvshow {
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
     color: var(--button-text);
 }
 
 .sub .rowShow .lineShow .contentShow .tvshow:hover {
-    background-color: rgb(255 255 255 / 16%);
+    background: var(--transparency-light-15);
 
 }
 
@@ -229,11 +230,11 @@ label {
 }
 
 .logs .logDetails {
-    background-color: rgb(255 255 255 / 14%);
+    background: var(--transparency-light-15);
 }
 
 .logs .search {
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
 }
 
 .logs .logDetails table tr.danger {
@@ -243,7 +244,7 @@ label {
 
 .uas .repoContainer .repo .details .row,
 .uas .repoContainer .repo .details .row:nth-child(2n) {
-    background: rgb(0 0 0 / 25%);
+    background: var(--transparency-dark-25);
     color: var(--text);
 }
 
@@ -348,7 +349,7 @@ body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(2)>div.pla
 .uas .typesMenu .search .searchInput,
 .logs .search .searchInput {
     color: var(--text) !important;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
     border: 1px solid transparent !important;
     box-shadow: none !important;
     transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@@ -359,15 +360,15 @@ body>div.content.ng-scope>div>div.pushTopMinor.ng-scope>div:nth-child(2)>div.pla
 .uas .manualInstall:focus,
 .uas .typesMenu .search .searchInput:focus,
 .logs .search .searchInput:focus {
-    background-color: rgba(0, 0, 0, .5) !important;
+    background: var(--transparency-dark-50) !important;
     color: var(--text-hover) !important;
 }
 
 /* TABLE */
 .info tr:nth-child(2n+1) {
-    background-color: rgb(255 255 255 / 0.08);
+    background-color: var(--transparency-light-10);
 }
 
 .logs .logDetails table tr:nth-child(even) {
-    background-color: rgb(255 255 255 / 8%);
+    background: var(--transparency-light-10);
 }
\ No newline at end of file
diff --git a/css/base/whisparr/whisparr-base.css b/css/base/whisparr/whisparr-base.css
index ee8c724a..27999f6a 100644
--- a/css/base/whisparr/whisparr-base.css
+++ b/css/base/whisparr/whisparr-base.css
@@ -11,6 +11,7 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 :root {
     --calendar-in-cinemas: 53 197 244;
@@ -168,7 +169,7 @@ a:hover {
 }
 
 [class*="SelectInput-select-"] {
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="SelectInput-select-"]:active,
@@ -185,7 +186,7 @@ a:hover {
 }
 
 [class*="AutoSuggestInput-suggestionHighlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 [class*="CheckInput-primaryIsChecked-"] {
@@ -201,7 +202,7 @@ a:hover {
 /* HEADER */
 
 [class*="PageHeader-header-"] {
-    background-color: rgba(0, 0, 0, .35);
+    background: var(--transparency-dark-35);
     color: var(--text);
 }
 
@@ -231,16 +232,16 @@ a:hover {
 }
 
 [class*="MovieSearchInput-highlighted-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 [class*="MovieSearchInput-movieContainer-"]::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 /* SIDE MENU */
 [class*="PageSidebar-sidebarContainer-"] {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="PageSidebar-sidebar-"] {
@@ -263,7 +264,7 @@ a:hover {
 }
 
 [class*="PageSidebarItem-isActiveParentLink-"] {
-    background-color: rgba(0, 0, 0, 0.15);
+    background: var(--transparency-dark-15);
 }
 
 @media only screen and (max-width: 768px) {
@@ -316,15 +317,15 @@ a:hover {
 }
 
 [class*="AddListMovieOverview-container-"]:hover [class*="AddListMovieOverview-content-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 [class*="AddListMoviePoster-title-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 [class*="MovieIndexOverview-content-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="MovieIndexOverview-link-"]:hover {
@@ -332,7 +333,7 @@ a:hover {
 }
 
 [class*="ProgressBar-container-"] {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 [class*=".ProgressBar-purple-"] {
@@ -343,7 +344,7 @@ a:hover {
 [class*="MovieDetailsSeason-season-"],
 [class*="MovieDetailsSeason-collapseButtonContainer-"] {
     border: none !important;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="MovieDetailsSeason-actionButton-"],
@@ -386,17 +387,17 @@ a:hover {
 
 [class*="MovieDetailsSeason-collapseButtonContainer-"] {
     border: none !important;
-    background-color: rgba(0, 0, 0, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="MovieFileEditorTable-container-"] {
     border: 1px solid transparent;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="ExtraFileTable-container-"] {
     border: 1px solid transparent;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="Tooltip-tooltip-"][class*="Tooltip-inverse-"],
@@ -509,7 +510,7 @@ a:hover {
 
 /* Table options*/
 [class*="TableOptionsColumn-column-"] {
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
     border: none;
 }
@@ -523,17 +524,17 @@ a:hover {
 }
 
 [class*="TableRow-row-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: var(--text-hover);
 }
 
 [class*="TableRowCell-cell-"] {
-    border-top: 1px solid rgb(255 255 255 / 25%);
+    border-top: 1px solid var(--transparency-light-25);
 }
 
 /* TOP MENU SERIES */
 [class*="PageToolbar-toolbar-"] {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text);
 }
 
@@ -569,7 +570,7 @@ a:hover {
 [class*="MovieIndexPosterInfo-info-"],
 [class*="MovieIndexPosterInfo-info-"],
 [class*="MovieCreditPoster-title-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -596,13 +597,13 @@ a:hover {
 
 [class*="MenuItem-menuItem-"]:hover,
 [class*="MenuItem-menuItem-"]:focus {
-    background: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
     color: var(--text-hover);
     text-decoration: none;
 }
 
 [class*="MenuItemSeparator-separator-"] {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 /* ALPHABET JUMP BAR */
@@ -613,12 +614,12 @@ a:hover {
 /* MINI RIGHT SCROLL BAR */
 [class*="OverlayScroller-thumb-"],
 [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="OverlayScroller-thumb-"]:hover,
 [class*="Scroller-scroller-"]::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.25) !important;
+    background: var(--transparency-light-25) !important;
 }
 
 /* ADD NEW */
@@ -642,12 +643,12 @@ a:hover {
 
 [class*="EnhancedSelectInputOption-isSelected-"],
 [class*="EnhancedSelectInputOption-isSelected-"]:hover {
-    background-color: rgba(255, 255, 255, 0.20) !important;
+    background: var(--transparency-light-20) !important;
     color: var(--text-hover);
 }
 
 [class*="EnhancedSelectInputOption-option-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 [class*="HintedSelectInputOption-hintText-"] {
@@ -686,7 +687,7 @@ a:hover {
 [class*="AddNewMovie-searchIconContainer-"],
 [class*="CheckInput-isIndeterminate-"] {
     border: none;
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -713,7 +714,7 @@ a:hover {
     outline: 0;
     border-color: var(--text-hover);
     box-shadow: none;
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 [class*="TagInput-input-"][class*="TagInput-isFocused-"] {
@@ -742,7 +743,7 @@ a:hover {
 
 [class*="AddNewMovieSearchResult-searchResult-"]:hover,
 [class*="AddNewMovieSearchResult-underlay-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="AddNewmovieModalContent-year-"] {
@@ -767,13 +768,13 @@ a:hover {
 }
 
 [class*="VirtualTableRow-row-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 /* Drop down menu/button*/
 [class*="ImportMovieSelectMovie-button-"] {
     border: none !important;
-    background-color: rgba(0, 0, 0, 0.25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="ImportMovieSelectMovie-content-"],
@@ -791,7 +792,7 @@ a:hover {
 }
 
 [class*="ImportMovieSearchResult-movie-"]:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
 }
 
 [class*="ImportMovieTitle-year-"] {
@@ -810,7 +811,7 @@ a:hover {
 
 [class*="DiscoverMoviePoster-title-"],
 [class*="DiscoverMoviePosterInfo-info-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -824,17 +825,17 @@ a:hover {
 }
 
 [class*="AddListMovieOverview-content-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 [class*="PageJumpBarItem-jumpBarItem-"]:hover {
     color: var(--text-hover);
-    background: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 /*Posters*/
 [class*="AddListMoviePoster-title-"] {
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -842,7 +843,7 @@ a:hover {
 /* FOOTER */
 [class*="PageContentFooter-contentFooter-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
@@ -928,18 +929,18 @@ a:hover {
 }
 
 [class*="DayOfWeek-dayOfWeek-"] {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
     color: var(--text-hover);
 }
 
 [class*="CalendarDay-dayOfMonth-"] {
     border-bottom: 1px solid hsla(0, 0%, 100%, .08);
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 [class*="CalendarDay-isToday-"],
 [class*="DayOfWeek-isToday-"] {
-    background-color: hsla(0, 0%, 100%, .25) !important;
+    background: var(--transparency-dark-25) !important;
 }
 
 [class*="CalendarDay-day-"],
@@ -990,7 +991,7 @@ a:hover {
 
 /* calendar agenda */
 [class*="AgendaEvent-event-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08) !important;
+    background: var(--transparency-dark-10) !important;
 }
 
 /* SETTINGS */
@@ -1017,15 +1018,15 @@ a:hover {
 }
 
 [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 255, 0.15);
+    background: var(--transparency-light-15);
 }
 
 [class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 [class*="NamingOption-option-"] {
@@ -1033,17 +1034,17 @@ a:hover {
 }
 
 [class*="NamingOption-option-"]:hover [class*="NamingOption-token-"] {
-    background-color: rgba(255, 255, 2550, 0.25);
+    background: var(--transparency-light-25);
 }
 
 [class*="NamingOption-option-"]:hover [class*="NamingOption-example-"] {
-    background-color: rgba(255, 255, 2550, 0.35);
+    background: var(--transparency-light-35);
 }
 
 /* PROFILES */
 [class*="Card-card-"],
 [class*="QualityProfiles-addQualityProfile-"] {
-    background-color: rgba(0, 0, 0, .45);
+    background: var(--transparency-dark-45);
     box-shadow: 0 0 10px 1px #000000;
     color: var(--text);
 }
@@ -1068,12 +1069,12 @@ a:hover {
 [class*="QualityProfileItemGroup-qualityProfileItemGroup-"],
 [class*="LanguageProfileItem-languageProfileItem-"] {
     border: none;
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
     color: var(--text-hover);
 }
 
 [class*="QualityProfileItemGroup-qualityProfileItemGroup-"][class*="QualityProfileItemGroup-editGroups-"] {
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25)
 }
 
 [class*="KeyValueListInputItem-keyInput-"],
@@ -1085,7 +1086,7 @@ a:hover {
 
 [class*="QualityProfileFormatItem-qualityProfileFormatItem-"] {
     border: 1px solid transparent;
-    background: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25)
 }
 
 [class*="QualityDefinitions-sizeLimitHelpText-"] {
@@ -1119,7 +1120,7 @@ a:hover {
 /* LOG */
 [class*="Alert-info-"] {
     border-color: transparent;
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: #FFC107;
 }
 
@@ -1145,12 +1146,12 @@ a:hover {
 /* Login Page */
 
 .panel-body {
-    background-color: rgba(0, 0, 0, 0.25);
+    background: var(--transparency-dark-25);
     color: var(--text);
 }
 
 .panel-header {
-    background-color: rgba(0, 0, 0, 0.45);
+    background: var(--transparency-dark-45);
 }
 
 .forgot-password {
@@ -1160,7 +1161,7 @@ a:hover {
 input[type=email],
 input[type=password] {
     border: none;
-    background-color: rgba(255, 255, 255, 0.08);
+    background: var(--transparency-light-10);
     color: var(--text-hover);
 }
 
@@ -1181,7 +1182,7 @@ input[type=password] {
     outline: 0;
     border-color: var(--text-hover);
     box-shadow: none;
-    background-color: rgba(255, 255, 255, 0.25);
+    background: var(--transparency-light-25);
 }
 
 /* Custom filter */
@@ -1190,7 +1191,7 @@ input[type=password] {
 }
 
 [class*="CustomFilter-customFilter-"]:hover {
-    background-color: hsla(0, 0%, 100%, .08);
+    background: var(--transparency-dark-10);
 }
 
 [class*="SelectMovieModalContent-path-"] {
diff --git a/css/base/xbackbone/xbackbone-base.css b/css/base/xbackbone/xbackbone-base.css
index 8c41d36f..8619cf70 100644
--- a/css/base/xbackbone/xbackbone-base.css
+++ b/css/base/xbackbone/xbackbone-base.css
@@ -11,6 +11,7 @@
 /* 			      https://github.com/gilbN/theme.park			 */
 
 @import url("/css/defaults/placeholders.css");
+@import url("/css/defaults/transparent.css");
 
 .bg-light {
     background: var(--main-bg-color) !important;
@@ -31,7 +32,7 @@
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .2);
+    background: var(--transparency-dark-20);
     background-clip: padding-box;
 }
 
@@ -43,7 +44,7 @@
     min-height: 50px;
     border: 3px solid transparent;
     border-radius: 8px;
-    background-color: hsla(0, 0%, 100%, .5);
+    background: var(--transparency-light-50);
     background-clip: padding-box;
 }
 
@@ -79,7 +80,7 @@ code {
     font-size: .875em;
     color: #d63384;
     word-wrap: break-word;
-    background: rgb(0 0 0 / 50%);
+    background: var(--transparency-dark-50);
     padding: 2px 6px;
     border-radius: 5px;
 }
@@ -99,7 +100,7 @@ a:hover {
 
 /* TOP NAV */
 .bg-primary {
-    background: rgba(0, 0, 0, .15) !important;
+    background: var(--transparency-dark-15) !important;
 }
 
 .navbar-dark .navbar-brand {
@@ -130,7 +131,7 @@ a:hover {
 .dropdown-item:focus,
 .dropdown-item:hover {
     color: var(--text-hover);
-    background-color: rgba(255, 255, 255, .1);
+    background: var(--transparency-light-10);
 }
 
 .dropdown-item.disabled,
@@ -162,13 +163,13 @@ a:hover {
 
 .btn-light {
     color: var(--button-text);
-    background-color: rgba(255, 255, 255, .08);
+    background-color: var(--transparency-light-10);
     border-color: rgba(255, 255, 255, .08);
 }
 
 .btn-light:hover {
     color: var(--button-text-hover);
-    background-color: rgba(255, 255, 255, .08);
+    background-color: var(--transparency-light-10);
     border-color: rgba(255, 255, 255, .08);
 }
 
@@ -333,7 +334,7 @@ a:hover {
 /* FORMS */
 .form-control {
     color: var(--text-hover);
-    background-color: rgba(0, 0, 0, .15);
+    background: var(--transparency-dark-15);
     border: 1px solid rgba(0, 0, 0, .15);
 }
 
@@ -347,7 +348,7 @@ a:hover {
 
 textarea.form-control:focus {
     color: var(--text-hover);
-    background: rgba(0, 0, 0, .35);
+    background: var(--transparency-dark-35);
     border-color: rgba(255, 255, 255, .15);
     outline: 0;
     box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 0%);
@@ -355,7 +356,7 @@ textarea.form-control:focus {
 
 .form-control:disabled,
 .form-control[readonly] {
-    background-color: rgba(255, 255, 255, .15);
+    background: var(--transparency-light-15);
     opacity: 1;
 }
 
@@ -397,13 +398,13 @@ textarea.form-control:focus {
 .page-item.disabled .page-link {
     color: var(--text-muted);
     pointer-events: none;
-    background-color: rgba(255, 255, 255, .08);
+    background-color: var(--transparency-light-10);
     border-color: rgba(255, 255, 255, .08);
 }
 
 /* CARDS */
 .card {
-    background-color: rgba(0, 0, 0, .25);
+    background: var(--transparency-dark-25);
 }
 
 .image-card:hover .overlay {
@@ -411,7 +412,7 @@ textarea.form-control:focus {
     transition: opacity .3s ease-in-out;
     -moz-transition: opacity .3s ease-in-out;
     -webkit-transition: opacity .3s ease-in-out;
-    background: rgba(0, 0, 0, .5);
+    background: var(--transparency-dark-50);
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
 }
\ No newline at end of file
diff --git a/css/defaults/transparent.css b/css/defaults/transparent.css
new file mode 100644
index 00000000..4eaec9b7
--- /dev/null
+++ b/css/defaults/transparent.css
@@ -0,0 +1,28 @@
+:root {
+    --transparency-dark-05: rgba(0, 0, 0, .05);
+    --transparency-dark-10: rgba(0, 0, 0, .10);
+    --transparency-dark-15: rgba(0, 0, 0, .15);
+    --transparency-dark-25: rgba(0, 0, 0, .25);
+    --transparency-dark-35: rgba(0, 0, 0, .35);
+    --transparency-dark-40: rgba(0, 0, 0, .40);
+    --transparency-dark-45: rgba(0, 0, 0, .45);
+    --transparency-dark-50: rgba(0, 0, 0, .50); 
+    --transparency-dark-55: rgba(0, 0, 0, .55);
+    --transparency-dark-60: rgba(0, 0, 0, .60);
+    --transparency-dark-65: rgba(0, 0, 0, .65);
+    --transparency-dark-70: rgba(0, 0, 0, .70);
+    --transparency-dark-75: rgba(0, 0, 0, .75);
+    --transparency-dark-80: rgba(0, 0, 0, .80);
+    --transparency-dark-85: rgba(0, 0, 0, .85);
+    --transparency-dark-90: rgba(0, 0, 0, .90);
+    --transparency-light-05: rgba(255, 255, 255, .05);
+    --transparency-light-10: rgba(255, 255, 255, .10);
+    --transparency-light-15: rgba(255, 255, 255, .15);
+    --transparency-light-20: rgba(255, 255, 255, .20);
+    --transparency-light-25: rgba(255, 255, 255, .25);
+    --transparency-light-30: rgba(255, 255, 255, .30);
+    --transparency-light-35: rgba(255, 255, 255, .35);
+    --transparency-light-45: rgba(255, 255, 255, .45);
+    --transparency-light-50: rgba(255, 255, 255, .50);
+    --transparency-light-55: rgba(255, 255, 255, .55);
+    }
\ No newline at end of file