diff --git a/src/core/components/message/message.scss b/src/core/components/message/message.scss
index f179df22d..af5c1e2fe 100644
--- a/src/core/components/message/message.scss
+++ b/src/core/components/message/message.scss
@@ -34,8 +34,8 @@
         overflow: visible;
 
         &:hover {
-            -webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
-            filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
+            -webkit-filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 30%));
+            filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 30%));
         }
 
         &[tappable]:active {
diff --git a/src/core/features/block/components/side-blocks-button/side-blocks-button.scss b/src/core/features/block/components/side-blocks-button/side-blocks-button.scss
index cd1537e63..162d5f1f1 100644
--- a/src/core/features/block/components/side-blocks-button/side-blocks-button.scss
+++ b/src/core/features/block/components/side-blocks-button/side-blocks-button.scss
@@ -12,7 +12,7 @@
         --padding-end: 0;
         --border-radius: 2em 0 0 2em;
         height: 56px;
-        --box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
+        --box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
 
         &::part(native) {
             @include core-transition(padding, 200ms);
diff --git a/src/core/features/courses/components/course-list-item/course-list-item.scss b/src/core/features/courses/components/course-list-item/course-list-item.scss
index 6ede3c36d..4218d9ec6 100644
--- a/src/core/features/courses/components/course-list-item/course-list-item.scss
+++ b/src/core/features/courses/components/course-list-item/course-list-item.scss
@@ -20,7 +20,7 @@
     --button-size: 44px;
     --button-padding: 10px;
     --button-radius: 50%;
-    --button-background: rgba(255,255,255,0.5);
+    --button-background: rgb(255 255 255 / 50%);
 
     @include media-breakpoint-down(md) {
         --avatar-size: 48px;
@@ -30,7 +30,7 @@
 
 
 :host-context(html.dark) {
-    --button-background: rgba(0, 0, 0, 0.3);
+    --button-background: rgb(0 0 0 / 30%);
 }
 
 // Common styles.
diff --git a/src/core/features/login/pages/site/site.scss b/src/core/features/login/pages/site/site.scss
index 8bf0224bf..7c784402d 100644
--- a/src/core/features/login/pages/site/site.scss
+++ b/src/core/features/login/pages/site/site.scss
@@ -84,7 +84,7 @@
     display: flex;
     align-content: center;
     align-items: center;
-    background-color: rgba(255, 255, 255, 0.5);
+    background-color: rgb(255 255 255 / 50%);
     z-index: 1;
     ion-spinner {
         margin: 0 auto;
diff --git a/src/core/features/question/question.scss b/src/core/features/question/question.scss
index 4ae53140a..80559f66e 100644
--- a/src/core/features/question/question.scss
+++ b/src/core/features/question/question.scss
@@ -25,7 +25,7 @@
             font-weight: bold;
             line-height: 14px;
             color: var(--white);
-            text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
+            text-shadow: 0 -1px 0 rgb(0 0 0 / 25%);
             background-color: var(--gray-500);
             -webkit-border-radius: 3px;
             border-radius: 3px;
diff --git a/src/core/features/usertours/components/user-tour/user-tour.scss b/src/core/features/usertours/components/user-tour/user-tour.scss
index 84600c0d3..175b55d90 100644
--- a/src/core/features/usertours/components/user-tour/user-tour.scss
+++ b/src/core/features/usertours/components/user-tour/user-tour.scss
@@ -9,7 +9,7 @@
 
     .user-tour-focus {
         position: absolute;
-        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);
+        box-shadow: 0 0 0 9999px rgb(0 0 0 / 75%);
     }
 
     .user-tour-overlay {
@@ -18,7 +18,7 @@
         left: 0;
         width: 100%;
         height: 100%;
-        background: rgba(0, 0, 0, 0.75);
+        background: rgb(0 0 0 / 75%);
     }
 
     .user-tour-wrapper {
diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index 710feebd5..073ad9e58 100644
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@@ -5,11 +5,11 @@
 
 core-format-text {
     --core-format-text-background: var(--background, var(--ion-item-background));
-    --core-format-text-viewer-icon-background: rgba(255, 255, 255, .5);
+    --core-format-text-viewer-icon-background: rgb(255 255 255 / 50%);
 }
 
 html.dark core-format-text {
-    --core-format-text-viewer-icon-background: rgba(0, 0, 0, .5);
+    --core-format-text-viewer-icon-background: rgb(0 0 0 / 50%);
 }
 
 core-format-text {
@@ -646,8 +646,8 @@ core-rich-text-editor .core-rte-editor {
 
     .text-body { color: var(--ion-text-color) !important; }
     .text-muted { color: var(--subdued-text-color) !important; }
-    .text-black-50 { color: rgba(0, 0, 0, .5) !important; }
-    .text-white-50 { color: rgba(255, 255, 255, .5) !important; }
+    .text-black-50 { color: rgb(0 0 0 / 50%) !important; }
+    .text-white-50 { color: rgb(255 255 255 / 50%) !important; }
     .text-decoration-none { text-decoration: none !important; }
     .text-break {
         word-break: break-word !important; // Deprecated, but avoids issues with flex containers
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 9f0893cae..88c59f68e 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -270,7 +270,7 @@ button,
 }
 
 ion-fab-button {
-    --box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
+    --box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
 }
 
 ion-button {
@@ -671,7 +671,7 @@ body.core-iframe-fullscreen ion-router-outlet {
 
     &::part(content) {
         backdrop-filter: blur(12px);
-        --background: rgba(10, 10, 10, 0.2);
+        --background: rgb(10 10 10 / 20%);
 
         ion-content {
             --background: transparent !important;
@@ -701,7 +701,7 @@ body.core-iframe-fullscreen ion-router-outlet {
         height: 100% !important;
         width: calc(100% - var(--modal-lateral-margin));
         max-width: calc(var(--modal-lateral-max-width));
-        box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+        box-shadow: 0 28px 48px rgb(0 0 0 / 40%);
     }
 
     &::part(backdrop) {
@@ -1219,7 +1219,7 @@ ion-chip {
 
     &.fab-chip {
         padding: 8px 12px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
+        box-shadow: 0 2px 4px rgb(0 0 0 / 40%);
     }
 
     &.ion-color {
@@ -1928,7 +1928,7 @@ swiper-container {
         left: -45%;
         height: 100%;
         width: 45%;
-        background-image: linear-gradient(to left, rgba(var(--loader-shine), .05), rgba(var(--loader-shine), .3), rgba(var(--loader-shine), .6), rgba(var(--loader-shine), .3), rgba(var(--loader-shine), .05));
+        background-image: linear-gradient(to left, rgb(var(--loader-shine) / 5%), rgb(var(--loader-shine) / 30%), rgb(var(--loader-shine) / 60%), rgb(var(--loader-shine) / 30%), rgb(var(--loader-shine) / 5%));
         animation: loading 1s infinite;
         display: block;
         top: 0;
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index eab185287..c59f05ec1 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -45,7 +45,7 @@ html.dark {
 
     --contrast-background: var(--gray-900);
 
-    --loader-shine: 90, 90, 90;
+    --loader-shine: 90 90 90;
 
     --drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 1);
     --drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 1);
diff --git a/src/theme/theme.design-system.scss b/src/theme/theme.design-system.scss
index a260930dd..06fe09b70 100644
--- a/src/theme/theme.design-system.scss
+++ b/src/theme/theme.design-system.scss
@@ -80,17 +80,17 @@ html {
 
     // Shadows / Elevation
     --drop-shadow-color: 40 40 40; //#282828;
-    --drop-shadow-00: 0px 0px 0px 0px rgb(var(--drop-shadow-color) / 0.20);
-    --drop-shadow-outline: 0px 0px 0px 2px rgb(var(--drop-shadow-color) / 0.15), 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 0.02);
-    --drop-shadow-01dp: 0px 1px 3px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 2px 1px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 1px 1px 0px rgb(var(--drop-shadow-color) / 0.14);
-    --drop-shadow-02dp: 0px 1px 5px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 3px 1px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 2px 2px 0px rgb(var(--drop-shadow-color) / 0.14);
-    --drop-shadow-03dp: 0px 1px 8px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 3px 3px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 3px 4px 0px rgb(var(--drop-shadow-color) / 0.14);
-    --drop-shadow-04dp: 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 1px 10px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 4px 5px 0px rgb(var(--drop-shadow-color) / 0.14);
-    --drop-shadow-06dp: 0px 3px 5px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 1px 18px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 6px 10px 0px rgb(var(--drop-shadow-color) / 0.14);
-    --drop-shadow-08dp: 0px 5px 5px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 3px 14px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 8px 10px 0px rgb(var(--drop-shadow-color) / 0.14);
-    --drop-shadow-12dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 0.20),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 0.12),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 0.14);
-    --drop-shadow-16dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 0.20),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 0.12),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 0.14);
-    --drop-shadow-24dp: 0px 11px 15px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 9px 46px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 24px 38px 0px rgb(var(--drop-shadow-color) / 0.14);
+    --drop-shadow-00: 0px 0px 0px 0px rgb(var(--drop-shadow-color) / 20%);
+    --drop-shadow-outline: 0px 0px 0px 2px rgb(var(--drop-shadow-color) / 15%), 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 2%);
+    --drop-shadow-01dp: 0px 1px 3px 0px rgb(var(--drop-shadow-color) / 20%), 0px 2px 1px 0px rgb(var(--drop-shadow-color) / 12%), 0px 1px 1px 0px rgb(var(--drop-shadow-color) / 14%);
+    --drop-shadow-02dp: 0px 1px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 1px 0px rgb(var(--drop-shadow-color) / 12%), 0px 2px 2px 0px rgb(var(--drop-shadow-color) / 14%);
+    --drop-shadow-03dp: 0px 1px 8px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 3px 0px rgb(var(--drop-shadow-color) / 12%), 0px 3px 4px 0px rgb(var(--drop-shadow-color) / 14%);
+    --drop-shadow-04dp: 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 20%), 0px 1px 10px 0px rgb(var(--drop-shadow-color) / 12%), 0px 4px 5px 0px rgb(var(--drop-shadow-color) / 14%);
+    --drop-shadow-06dp: 0px 3px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 1px 18px 0px rgb(var(--drop-shadow-color) / 12%), 0px 6px 10px 0px rgb(var(--drop-shadow-color) / 14%);
+    --drop-shadow-08dp: 0px 5px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 14px 0px rgb(var(--drop-shadow-color) / 12%), 0px 8px 10px 0px rgb(var(--drop-shadow-color) / 14%);
+    --drop-shadow-12dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 20%),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 12%),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 14%);
+    --drop-shadow-16dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 20%),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 12%),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 14%);
+    --drop-shadow-24dp: 0px 11px 15px 0px rgb(var(--drop-shadow-color) / 20%), 0px 9px 46px 0px rgb(var(--drop-shadow-color) / 12%), 0px 24px 38px 0px rgb(var(--drop-shadow-color) / 14%);
 
     // A11y
     --a11y-min-target-size: 44px;
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index dbc63e7fa..b45b05b10 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -78,15 +78,15 @@ html {
 
     --contrast-background: white;
 
-    --loader-background-color: rgba(0, 0, 0, .1);
-    --loader-shine: 251, 251, 251;
+    --loader-background-color: rgb(0 0 0 / 10%);
+    --loader-shine: 251 251 251;
     --loader-radius: var(--radius-xs);
     --loader-display: block;
 
-    --drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 0.5);
-    --drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 0.5);
-    --drop-shadow-end: -2px 0px 5px rgb(var(--drop-shadow-color) / 0.5);
-    --drop-shadow-start: 2px 0px 5px rgb(var(--drop-shadow-color) / 0.5);
+    --drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 50%);
+    --drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 50%);
+    --drop-shadow-end: -2px 0px 5px rgb(var(--drop-shadow-color) / 50%);
+    --drop-shadow-start: 2px 0px 5px rgb(var(--drop-shadow-color) / 50%);
 
     --ion-text-color: var(--text-color);
     --ion-text-color-rgb: #{$text-color-rgb};