diff --git a/gtk/theme/libadwaita/_colors.scss b/gtk/theme/libadwaita/_colors.scss
index 614055c575..1f13039502 100644
--- a/gtk/theme/libadwaita/_colors.scss
+++ b/gtk/theme/libadwaita/_colors.scss
@@ -4,67 +4,139 @@ $focus_border_opacity: if($contrast == 'high', 0.8, 0.5);
 
 // Colors from _defaults.scss
 
-$accent_bg_color: gtkcolor(accent_bg_color);
-$accent_fg_color: gtkcolor(accent_fg_color);
-$accent_color: gtkcolor(accent_color);
+:root {
+  --accent-color: @accent_color;
+  --accent-bg-color: @accent_bg_color;
+  --accent-fg-color: @accent_fg_color;
 
-$destructive_bg_color: gtkcolor(destructive_bg_color);
-$destructive_fg_color: gtkcolor(destructive_fg_color);
-$destructive_color: gtkcolor(destructive_color);
+  --destructive-color: @destructive_color;
+  --destructive-bg-color: @destructive_bg_color;
+  --destructive-fg-color: @destructive_fg_color;
 
-$success_bg_color: gtkcolor(success_bg_color);
-$success_fg_color: gtkcolor(success_fg_color);
-$success_color: gtkcolor(success_color);
+  --success-color: @success_color;
+  --success-bg-color: @success_bg_color;
+  --success-fg-color: @success_fg_color;
 
-$warning_bg_color: gtkcolor(warning_bg_color);
-$warning_fg_color: gtkcolor(warning_fg_color);
-$warning_color: gtkcolor(warning_color);
+  --warning-color: @warning_color;
+  --warning-bg-color: @warning_bg_color;
+  --warning-fg-color: @warning_fg_color;
 
-$error_bg_color: gtkcolor(error_bg_color);
-$error_fg_color: gtkcolor(error_fg_color);
-$error_color: gtkcolor(error_color);
+  --error-color: @error_color;
+  --error-bg-color: @error_bg_color;
+  --error-fg-color: @error_fg_color;
 
-$window_bg_color: gtkcolor(window_bg_color);
-$window_fg_color: gtkcolor(window_fg_color);
+  --window-bg-color: @window_bg_color;
+  --window-fg-color: @window_fg_color;
 
-$view_bg_color: gtkcolor(view_bg_color);
-$view_fg_color: gtkcolor(view_fg_color);
+  --view-bg-color: @view_bg_color;
+  --view-fg-color: @view_fg_color;
 
-$headerbar_bg_color: gtkcolor(headerbar_bg_color);
-$headerbar_fg_color: gtkcolor(headerbar_fg_color);
-$headerbar_border_color: gtkalpha(gtkcolor(headerbar_border_color), $border_opacity);
-$headerbar_backdrop_color: gtkcolor(headerbar_backdrop_color);
-$headerbar_shade_color: gtkcolor(headerbar_shade_color);
-$headerbar_darker_shade_color: gtkcolor(headerbar_darker_shade_color);
+  --headerbar-bg-color: @headerbar_bg_color;
+  --headerbar-fg-color: @headerbar_fg_color;
+  --headerbar-border-color: @headerbar_border_color;
+  --headerbar-backdrop-color: @headerbar_backdrop_color;
+  --headerbar-shade-color: @headerbar_shade_color;
+  --headerbar-darker-shade-color: @headerbar_darker_shade_color;
 
-$sidebar_bg_color: gtkcolor(sidebar_bg_color);
-$sidebar_fg_color: gtkcolor(sidebar_fg_color);
-$sidebar_backdrop_color: gtkcolor(sidebar_backdrop_color);
-$sidebar_border_color: gtkcolor(sidebar_border_color);
-$sidebar_shade_color: gtkcolor(sidebar_shade_color);
+  --sidebar-bg-color: @sidebar_bg_color;
+  --sidebar-fg-color: @sidebar_fg_color;
+  --sidebar-backdrop-color: @sidebar_backdrop_color;
+  --sidebar-border-color: @sidebar_border_color;
+  --sidebar-shade-color: @sidebar_shade_color;
 
-$secondary_sidebar_bg_color: gtkcolor(secondary_sidebar_bg_color);
-$secondary_sidebar_fg_color: gtkcolor(secondary_sidebar_fg_color);
-$secondary_sidebar_backdrop_color: gtkcolor(secondary_sidebar_backdrop_color);
-$secondary_sidebar_border_color: gtkcolor(secondary_sidebar_border_color);
-$secondary_sidebar_shade_color: gtkcolor(secondary_sidebar_shade_color);
+  --secondary-sidebar-bg-color: @secondary_sidebar_bg_color;
+  --secondary-sidebar-fg-color: @secondary_sidebar_fg_color;
+  --secondary-sidebar-backdrop-color: @secondary_sidebar_backdrop_color;
+  --secondary-sidebar-border-color: @secondary_sidebar_border_color;
+  --secondary-sidebar-shade-color: @secondary_sidebar_shade_color;
 
-$card_bg_color: gtkcolor(card_bg_color);
-$card_fg_color: gtkcolor(card_fg_color);
-$card_shade_color: gtkcolor(card_shade_color);
+  --card-bg-color: @card_bg_color;
+  --card-fg-color: @card_fg_color;
+  --card-shade-color: @card_shade_color;
 
-$dialog_bg_color: gtkcolor(dialog_bg_color);
-$dialog_fg_color: gtkcolor(dialog_fg_color);
+  --dialog-bg-color: @dialog_bg_color;
+  --dialog-fg-color: @dialog_fg_color;
 
-$popover_bg_color: gtkcolor(popover_bg_color);
-$popover_fg_color: gtkcolor(popover_fg_color);
-$popover_shade_color: gtkcolor(popover_shade_color);
+  --popover-bg-color: @popover_bg_color;
+  --popover-fg-color: @popover_fg_color;
+  --popover-shade-color: @popover_shade_color;
 
-$thumbnail_bg_color: gtkcolor(thumbnail_bg_color);
-$thumbnail_fg_color: gtkcolor(thumbnail_fg_color);
+  --thumbnail-bg-color: @thumbnail_bg_color;
+  --thumbnail-fg-color: @thumbnail_fg_color;
 
-$shade_color: gtkcolor(shade_color);
-$scrollbar_outline_color: gtkcolor(scrollbar_outline_color);
+  --shade-color: @shade_color;
+  --scrollbar-outline-color: @scrollbar_outline_color;
+
+  --backdrop-accent-color: #666666;
+  --backdrop-accent-bg-color: #7a7a7a;
+
+  &:backdrop {
+    --accent-color: var(--backdrop-accent-color);
+    --accent-bg-color: var(--backdrop-accent-bg-color);
+  }
+}
+
+$accent_bg_color: var(--accent-bg-color);
+$accent_fg_color: var(--accent-fg-color);
+$accent_color: var(--accent-color);
+
+$destructive_bg_color: var(--destructive-bg-color);
+$destructive_fg_color: var(--destructive-fg-color);
+$destructive_color: var(--destructive-color);
+
+$success_bg_color: var(--success-bg-color);
+$success_fg_color: var(--success-fg-color);
+$success_color: var(--success-color);
+
+$warning_bg_color: var(--warning-bg-color);
+$warning_fg_color: var(--warning-fg-color);
+$warning_color: var(--warning-color);
+
+$error_bg_color: var(--error-bg-color);
+$error_fg_color: var(--error-fg-color);
+$error_color: var(--error-color);
+
+$window_bg_color: var(--window-bg-color);
+$window_fg_color: var(--window-fg-color);
+
+$view_bg_color: var(--view-bg-color);
+$view_fg_color: var(--view-fg-color);
+
+$headerbar_bg_color: var(--headerbar-bg-color);
+$headerbar_fg_color: var(--headerbar-fg-color);
+$headerbar_border_color: gtkalpha(var(--headerbar-border-color), $border_opacity);
+$headerbar_backdrop_color: var(--headerbar-backdrop-color);
+$headerbar_shade_color: var(--headerbar-shade-color);
+$headerbar_darker_shade_color: var(--headerbar-darker-shade-color);
+
+$sidebar_bg_color: var(--sidebar-bg-color);
+$sidebar_fg_color: var(--sidebar-fg-color);
+$sidebar_backdrop_color: var(--sidebar-backdrop-color);
+$sidebar_border_color: var(--sidebar-border-color);
+$sidebar_shade_color: var(--sidebar-shade-color);
+
+$secondary_sidebar_bg_color: var(--secondary-sidebar-bg-color);
+$secondary_sidebar_fg_color: var(--secondary-sidebar-fg-color);
+$secondary_sidebar_backdrop_color: var(--secondary-sidebar-backdrop-color);
+$secondary_sidebar_border_color: var(--secondary-sidebar-border-color);
+$secondary_sidebar_shade_color: var(--secondary-sidebar-shade-color);
+
+$card_bg_color: var(--card-bg-color);
+$card_fg_color: var(--card-fg-color);
+$card_shade_color: var(--card-shade-color);
+
+$dialog_bg_color: var(--dialog-bg-color);
+$dialog_fg_color: var(--dialog-fg-color);
+
+$popover_bg_color: var(--popover-bg-color);
+$popover_fg_color: var(--popover-fg-color);
+$popover_shade_color: var(--popover-shade-color);
+
+$thumbnail_bg_color: var(--thumbnail-bg-color);
+$thumbnail_fg_color: var(--thumbnail-fg-color);
+
+$shade_color: var(--shade-color);
+$scrollbar_outline_color: var(--scrollbar-outline-color);
 
 // Other colors