diff --git a/_sass/buttons.scss b/_sass/buttons.scss
index 7953f7f..790718f 100644
--- a/_sass/buttons.scss
+++ b/_sass/buttons.scss
@@ -1,6 +1,8 @@
 // Buttons and things that look like buttons
 // stylelint-disable color-named
 
+@use "sass:color";
+
 .btn {
   display: inline-block;
   box-sizing: border-box;
@@ -35,7 +37,7 @@
 
   &:hover,
   &.zeroclipboard-is-hover {
-    color: darken($link-color, 2%);
+    color: color.adjust($link-color, $lightness: -2%);
   }
 
   &:hover,
@@ -43,19 +45,19 @@
   &.zeroclipboard-is-hover,
   &.zeroclipboard-is-active {
     text-decoration: none;
-    background-color: darken($base-button-color, 1%);
+    background-color: color.adjust($base-button-color, $lightness: -1%);
   }
 
   &:active,
   &.selected,
   &.zeroclipboard-is-active {
-    background-color: darken($base-button-color, 3%);
+    background-color: color.adjust($base-button-color, $lightness: -3%);
     background-image: none;
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
   }
 
   &.selected:hover {
-    background-color: darken(#dcdcdc, 5%);
+    background-color: color.adjust(#dcdcdc, $lightness: -5%);
   }
 
   &:disabled,
@@ -80,7 +82,7 @@
   &:active,
   &.zeroclipboard-is-hover,
   &.zeroclipboard-is-active {
-    color: darken($link-color, 4%);
+    color: color.adjust($link-color, $lightness: -4%);
     text-decoration: none;
     background-color: transparent;
     box-shadow: inset 0 0 0 3px $grey-lt-300;
diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss
index 6d0999b..0b5b5cd 100644
--- a/_sass/color_schemes/dark.scss
+++ b/_sass/color_schemes/dark.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $color-scheme: dark;
 $body-background-color: $grey-dk-300;
 $body-heading-color: $grey-lt-000;
@@ -9,7 +11,7 @@ $base-button-color: $grey-dk-250;
 $btn-primary-color: $blue-200;
 $code-background-color: #31343f; // OneDarkJekyll default for syntax-one-dark-vivid
 $code-linenumber-color: #dee2f7; // OneDarkJekyll .nf for syntax-one-dark-vivid
-$feedback-color: darken($sidebar-color, 3%);
+$feedback-color: color.adjust($sidebar-color, $lightness: -3%);
 $table-background-color: $grey-dk-250;
 $search-background-color: $grey-dk-250;
 $search-result-preview-color: $grey-dk-000;
diff --git a/_sass/color_schemes/light.scss b/_sass/color_schemes/light.scss
index 799e9c6..8c41ff4 100644
--- a/_sass/color_schemes/light.scss
+++ b/_sass/color_schemes/light.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $color-scheme: light !default;
 $body-background-color: $white !default;
 $body-heading-color: $grey-dk-300 !default;
@@ -8,7 +10,7 @@ $sidebar-color: $grey-lt-000 !default;
 $base-button-color: #f7f7f7 !default;
 $btn-primary-color: $purple-100 !default;
 $code-background-color: $grey-lt-000 !default;
-$feedback-color: darken($sidebar-color, 3%) !default;
+$feedback-color: color.adjust($sidebar-color, $lightness: -3%) !default;
 $table-background-color: $white !default;
 $search-background-color: $white !default;
 $search-result-preview-color: $grey-dk-000 !default;
diff --git a/_sass/support/mixins/_buttons.scss b/_sass/support/mixins/_buttons.scss
index cd51da3..b1aaa5c 100644
--- a/_sass/support/mixins/_buttons.scss
+++ b/_sass/support/mixins/_buttons.scss
@@ -1,9 +1,11 @@
 // Colored button
 
+@use "sass:color";
+
 @mixin btn-color($fg, $bg) {
   color: $fg;
-  background-color: darken($bg, 2%);
-  background-image: linear-gradient(lighten($bg, 5%), darken($bg, 2%));
+  background-color: color.adjust($bg, $lightness: -2%);
+  background-image: linear-gradient(color.adjust($bg, $lightness: 5%), color.adjust($bg, $lightness: -2%));
   box-shadow:
     0 1px 3px rgba(0, 0, 0, 0.25),
     0 4px 10px rgba(0, 0, 0, 0.12);
@@ -11,19 +13,19 @@
   &:hover,
   &.zeroclipboard-is-hover {
     color: $fg;
-    background-color: darken($bg, 4%);
-    background-image: linear-gradient((lighten($bg, 2%), darken($bg, 4%)));
+    background-color: color.adjust($bg, $lightness: -4%);
+    background-image: linear-gradient((color.adjust($bg, $lightness: 2%), color.adjust($bg, $lightness: -4%)));
   }
 
   &:active,
   &.selected,
   &.zeroclipboard-is-active {
-    background-color: darken($bg, 5%);
+    background-color: color.adjust($bg, $lightness: -5%);
     background-image: none;
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
   }
 
   &.selected:hover {
-    background-color: darken($bg, 10%);
+    background-color: color.adjust($bg, $lightness: -10%);
   }
 }