From 442250600326d9eec66f2157111e76e642496069 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Sat, 7 Mar 2026 00:49:34 +1300
Subject: [PATCH] Update Interface.svelte

---
 .../src/lib/components/settings/Interface.svelte       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/materialious/src/lib/components/settings/Interface.svelte b/materialious/src/lib/components/settings/Interface.svelte
index 35010066..77abf0ee 100644
--- a/materialious/src/lib/components/settings/Interface.svelte
+++ b/materialious/src/lib/components/settings/Interface.svelte
@@ -166,12 +166,12 @@
 		</form>
 		{#if isOwnBackend()?.internalAuth && $invidiousInstanceStore}
 			{#if !$invidiousAuthStore}
-				<button onclick={goToInvidiousLogin}>
+				<button class="surface-container-highest" onclick={goToInvidiousLogin}>
 					<i>link</i>
 					<span>{$_('linkInvidious')}</span>
 				</button>
 			{:else}
-				<button onclick={invidiousLogout}>
+				<button class="surface-container-highest" onclick={invidiousLogout}>
 					<i>link_off</i>
 					<span>{$_('unlinkInvidious')}</span>
 				</button>
@@ -202,7 +202,7 @@
 	{/if}
 {/if}
 
-<button onclick={toggleDarkMode} class="no-margin">
+<button onclick={toggleDarkMode} class="no-margin surface-container-highest">
 	{#if !$darkModeStore}
 		<i>dark_mode</i>
 		<span>{$_('layout.theme.darkMode')}</span>
@@ -211,7 +211,7 @@
 		<span>{$_('layout.theme.lightMode')}</span>
 	{/if}
 </button>
-<button onclick={() => (colorPickerOpen = !colorPickerOpen)}>
+<button class="surface-container-highest" onclick={() => (colorPickerOpen = !colorPickerOpen)}>
 	<i>palette</i>
 	<span>{$_('layout.theme.color')}</span>
 </button>
@@ -455,7 +455,7 @@
 		<h6>{$_('layout.bookmarklet')}</h6>
 		<div class="space"></div>
 		<button
-			class="no-margin"
+			class="no-margin surface-container-highest"
 			onclick={async () => {
 				await shareURL(bookmarkletSaveToUrl());
 			}}