diff --git a/app/javascript/styles/contrast/variables.scss b/app/javascript/styles/contrast/variables.scss
index 4453c4a911..3a667ab9fd 100644
--- a/app/javascript/styles/contrast/variables.scss
+++ b/app/javascript/styles/contrast/variables.scss
@@ -1,9 +1,6 @@
 @use '../mastodon/functions' as *;
 
 $ui-base-color: hsl(240deg, 16%, 19%) !default;
-$ui-primary-color: hsl(240deg, 29%, 70%) !default;
-$ui-secondary-color: hsl(255deg, 25%, 88%) !default;
-$ui-highlight-color: hsl(240deg, 100%, 69%) !default;
 
 @use '../mastodon/variables' with (
   $action-button-color: lighten($ui-base-color, 50%),
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 9cbded460f..2fdaa47c90 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -200,19 +200,6 @@
   }
 }
 
-.react-toggle-track {
-  background: $ui-primary-color;
-}
-
-.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background: lighten($ui-primary-color, 10%);
-}
-
-.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
-  .react-toggle-track {
-  background: lighten($ui-highlight-color, 10%);
-}
-
 // Change the default color used for the text in an empty column or on the error column
 .empty-column-indicator,
 .error-column {
@@ -293,11 +280,11 @@
   input[type='url'],
   input[type='datetime-local'],
   textarea {
-    background: darken($ui-base-color, 10%);
+    background: var(--clr-bg-secondary);
   }
 
   select {
-    background: darken($ui-base-color, 10%)
+    background: var(--clr-bg-secondary)
       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
       no-repeat right 8px center / auto 14px;
   }
diff --git a/app/javascript/styles/mastodon/_variables.scss b/app/javascript/styles/mastodon/_variables.scss
index 4900138a62..561c3268be 100644
--- a/app/javascript/styles/mastodon/_variables.scss
+++ b/app/javascript/styles/mastodon/_variables.scss
@@ -13,17 +13,12 @@ $blurple-300: #858afa; // Faded Blue
 $grey-600: hsl(240deg, 8%, 33%); // Trout
 $grey-100: hsl(240deg, 51%, 90%); // Topaz
 
-// Variables for defaults in UI
-$base-border-color: $white !default;
-$simple-background-color: $white !default;
-
 // Tell UI to use selected colors
 $ui-base-color: hsl(240deg, 16%, 19%) !default; // Darkest
 $ui-base-lighter-color: lighten(
   $ui-base-color,
   26%
 ) !default; // Lighter darkest
-$ui-primary-color: hsl(240deg, 29%, 70%) !default; // Lighter
 $ui-secondary-color: hsl(255deg, 25%, 88%) !default; // Lightest
 $ui-highlight-color: $blurple-500 !default;
 $ui-button-color: $white !default;
@@ -54,7 +49,7 @@ $action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;
 // For texts on inverted backgrounds
 $inverted-text-color: $ui-base-color !default;
 $lighter-text-color: $ui-base-lighter-color !default;
-$light-text-color: $ui-primary-color !default;
+$light-text-color: hsl(240deg, 29%, 70%) !default;
 
 // Keep this filter a SCSS variable rather than
 // a CSS Custom Property due to this Safari bug:
diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss
index c7a61d697f..e549d20015 100644
--- a/app/javascript/styles/mastodon/accounts.scss
+++ b/app/javascript/styles/mastodon/accounts.scss
@@ -114,9 +114,9 @@
   }
 
   .current {
-    background: $simple-background-color;
+    color: var(--clr-bg-inverted);
+    background: var(--clr-text-on-inverted);
     border-radius: 100px;
-    color: $inverted-text-color;
     cursor: default;
     margin: 0 10px;
   }
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 5d30249df1..2a27bcfbfa 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -571,7 +571,7 @@
     display: block;
     line-height: 16px;
     font-size: 12px;
-    color: $ui-primary-color;
+    color: var(--clr-text-secondary);
   }
 }
 
@@ -638,16 +638,15 @@
   }
 
   &__warning {
-    color: $inverted-text-color;
-    background: $ui-primary-color;
-    box-shadow: 0 2px 6px var(--clr-shadow-primary);
+    color: var(--clr-text-primary);
+    background: var(--clr-bg-warning-subtle);
+    border: 1px solid var(--clr-border-on-bg-warning-subtle);
     padding: 8px 10px;
     border-radius: 4px;
     font-size: 13px;
     font-weight: 400;
 
     strong {
-      color: $inverted-text-color;
       font-weight: 500;
 
       @each $lang in $cjk-langs {
@@ -658,7 +657,7 @@
     }
 
     a {
-      color: $lighter-text-color;
+      color: var(--clr-text-accent);
       font-weight: 500;
       text-decoration: underline;
 
@@ -694,8 +693,6 @@
     width: 100%;
     margin: 0;
     color: var(--clr-text-primary);
-
-    // background: var(--clr-bg-secondary);
     background: transparent;
     font-family: inherit;
     font-size: 14px;
@@ -3961,6 +3958,16 @@ a.account__display-name {
   -webkit-tap-highlight-color: transparent;
 }
 
+.react-toggle--focus,
+.react-toggle:focus-within {
+  outline: var(--outline-focus-default);
+  outline-offset: 2px;
+
+  .react-toggle-track {
+    border-color: transparent;
+  }
+}
+
 .react-toggle-screenreader-only,
 .sr-only {
   border: 0;
@@ -3984,15 +3991,25 @@ a.account__display-name {
   height: 20px;
   padding: 0;
   border-radius: 10px;
-  background-color: $ui-primary-color;
-}
+  background-color: rgb(from var(--clr-bg-accent-subtle) r g b / 50%);
+  border: 1px solid rgb(from var(--clr-text-accent) r g b / 50%);
+  box-sizing: border-box;
 
-.react-toggle--focus {
-  outline: $ui-button-focus-outline;
-}
+  .react-toggle:hover:not(.react-toggle--disabled) & {
+    background-color: rgb(
+      from var(--clr-bg-accent-subtle) r g b /
+        calc(50% + var(--clr-bg-accent-subtle-strength))
+    );
+  }
 
-.react-toggle--checked .react-toggle-track {
-  background-color: $ui-highlight-color;
+  .react-toggle--checked & {
+    background-color: var(--clr-bg-accent-strong);
+    border-color: var(--clr-bg-accent-strong);
+  }
+
+  .react-toggle--checked:not(.react-toggle--disabled):hover & {
+    background-color: var(--clr-bg-accent-strong-highlighted);
+  }
 }
 
 .react-toggle-track-check,
@@ -4007,24 +4024,15 @@ a.account__display-name {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background-color: $ui-button-color;
+  background-color: var(--clr-text-on-accent-strong);
   box-sizing: border-box;
   transition: all 0.25s ease;
   transition-property: border-color, left;
-}
 
-.react-toggle--checked .react-toggle-thumb {
-  inset-inline-start: 32px - 16px - 2px;
-  border-color: $ui-highlight-color;
-}
-
-.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background: darken($ui-primary-color, 5%);
-}
-
-.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
-  .react-toggle-track {
-  background: lighten($ui-highlight-color, 5%);
+  .react-toggle--checked & {
+    inset-inline-start: 32px - 16px - 2px;
+    border-color: var(--clr-bg-accent-strong);
+  }
 }
 
 .follow_requests-unlocked_explanation,
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index 23afd45ae9..dc14a53e80 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -972,7 +972,7 @@ code {
 
 .qr-code {
   flex: 0 0 auto;
-  background: $simple-background-color;
+  background: white;
   padding: 4px;
   margin: 0 10px 20px 0;
   box-shadow: 0 0 15px var(--clr-shadow-primary);
diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss
index ef2d6c8533..1e63ce554b 100644
--- a/app/javascript/styles/mastodon/polls.scss
+++ b/app/javascript/styles/mastodon/polls.scss
@@ -14,12 +14,12 @@
   &__chart {
     border-radius: 4px;
     display: block;
-    background: darken($ui-primary-color, 5%);
+    background: rgb(from var(--clr-text-accent) r g b / 60%);
     height: 5px;
     min-width: 1%;
 
     &.leading {
-      background: $ui-highlight-color;
+      background: var(--clr-text-accent);
     }
   }
 
@@ -39,12 +39,12 @@
     // duplication
     &::-moz-progress-bar {
       border-radius: 4px;
-      background: darken($ui-primary-color, 5%);
+      background: rgb(from var(--clr-text-accent) r g b / 60%);
     }
 
     &::-webkit-progress-value {
       border-radius: 4px;
-      background: darken($ui-primary-color, 5%);
+      background: rgb(from var(--clr-text-accent) r g b / 60%);
     }
   }
 
@@ -81,13 +81,13 @@
       color: var(--clr-text-primary);
       outline: 0;
       font-family: inherit;
-      background: $ui-base-color;
+      background: var(--clr-bg-primary);
       border: 1px solid var(--clr-text-secondary);
       border-radius: 4px;
       padding: 8px 12px;
 
       &:focus {
-        border-color: $ui-highlight-color;
+        border-color: var(--clr-text-accent);
       }
 
       @media screen and (width <= 600px) {
@@ -165,7 +165,7 @@
     &:active,
     &:focus,
     &:hover {
-      border-color: $ui-primary-color;
+      border-color: var(--clr-text-primary);
       border-width: 1px;
     }
   }
@@ -224,10 +224,10 @@
   color: var(--clr-text-tertiary);
 
   &__chart {
-    background: rgba(darken($ui-primary-color, 14%), 0.7);
+    background: rgb(from var(--clr-text-accent) r g b / 40%);
 
     &.leading {
-      background: color.change($ui-highlight-color, $alpha: 0.5);
+      background: rgb(from var(--clr-text-accent) r g b / 60%);
     }
   }
 }