diff --git a/src/lib/components/actions.svelte b/src/lib/components/actions.svelte
index 552a2c85..8a57e752 100644
--- a/src/lib/components/actions.svelte
+++ b/src/lib/components/actions.svelte
@@ -153,6 +153,6 @@
 
 <style>
 	.btn {
-		@apply rounded p-2 bg-blue-400 shadow flex-auto text-white hover:bg-blue-500;
+		@apply rounded p-2 bg-indigo-400 shadow flex-auto text-white hover:bg-indigo-500;
 	}
 </style>
diff --git a/src/lib/components/card/card.svelte b/src/lib/components/card/card.svelte
index 891289fa..a45b8e7d 100644
--- a/src/lib/components/card/card.svelte
+++ b/src/lib/components/card/card.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <div class={`bg-white rounded overflow-hidden shadow m-2 flex-grow flex flex-col `}>
-	<div class="bg-blue-400 border-gray-400 p-2 flex-none" on:click={() => (isOpen = !isOpen)}>
+	<div class="bg-indigo-400 border-gray-400 p-2 flex-none" on:click={() => (isOpen = !isOpen)}>
 		<div class="flex justify-between">
 			<Tabs on:select {tabs} bind:isOpen {title} {isCloseable} />
 			<div class="flex gap-x-4 text-white">
diff --git a/src/lib/components/card/tabs.svelte b/src/lib/components/card/tabs.svelte
index 02edaaeb..b2993a07 100644
--- a/src/lib/components/card/tabs.svelte
+++ b/src/lib/components/card/tabs.svelte
@@ -34,12 +34,9 @@
 					</style></defs
 				><path
 					class="cls-1"
-					d="M10.38.45,6,4.83,1.56.39h0A.84.84,0,0,0,.38,1.57h0l5,5h0a.83.83,0,0,0,.6.26H6a.83.83,0,0,0,.6-.26h0l5-5h0A.84.84,0,1,0,10.38.45Z"
-				/></svg
-			>
+					d="M10.38.45,6,4.83,1.56.39h0A.84.84,0,0,0,.38,1.57h0l5,5h0a.83.83,0,0,0,.6.26H6a.83.83,0,0,0,.6-.26h0l5-5h0A.84.84,0,1,0,10.38.45Z" /></svg>
 		{/if}
-		{title}</span
-	>
+		{title}</span>
 	{#if isOpen && tabs}
 		<ul class="flex list-none flex-wrap flex-row" transition:fade>
 			{#each tabs as tab}
@@ -47,10 +44,9 @@
 					<div
 						class="text cursor-pointer font-bold min-w-16 w-auto px-2 py-1 -mb-4 rounded-t  block leading-normal {activeTabID ===
 						tab.id
-							? 'text-blue-500 bg-white border-white'
-							: 'text-white bg-blue-500 border-blue-500'}"
-						on:click|stopPropagation={() => toggleTabs(tab)}
-					>
+							? 'text-indigo-500 bg-white border-white'
+							: 'text-white bg-indigo-500 border-indigo-500'}"
+						on:click|stopPropagation={() => toggleTabs(tab)}>
 						{tab.title}
 					</div>
 				</li>
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 6f751a28..93906b3a 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -27,7 +27,7 @@
 	];
 </script>
 
-<header class="p-2 bg-blue-400 text-white font-bold flex flex-wrap items-center">
+<header class="p-2 bg-indigo-400 text-white font-bold flex flex-wrap items-center">
 	<div class="flex-1 flex justify-between items-center">
 		<a href="/"> Mermaid Live Editor </a>
 	</div>
@@ -40,8 +40,7 @@
 			height="20"
 			viewBox="0 0 20 20"
 			><title>menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg
-		></label
-	>
+		></label>
 	<input class="hidden" type="checkbox" id="menu-toggle" />
 
 	<div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
diff --git a/src/lib/components/preset.svelte b/src/lib/components/preset.svelte
index 7db47cee..38c95261 100644
--- a/src/lib/components/preset.svelte
+++ b/src/lib/components/preset.svelte
@@ -81,9 +81,8 @@
 	<div class="flex gap-2 flex-wrap p-2">
 		{#each Object.keys(samples) as sample}
 			<button
-				class="rounded p-2 bg-blue-400 shadow flex-auto text-white hover:bg-blue-500"
-				on:click={() => loadSampleDiagram(sample)}>{sample}</button
-			>
+				class="rounded p-2 bg-indigo-400 shadow flex-auto text-white hover:bg-indigo-500"
+				on:click={() => loadSampleDiagram(sample)}>{sample}</button>
 		{/each}
 	</div>
 </Card>
diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte
index 2e798e78..f15db52a 100644
--- a/src/routes/edit.svelte
+++ b/src/routes/edit.svelte
@@ -108,7 +108,7 @@
 			<Card on:select={tabSelectHandler} {tabs} isCloseable={false} title="Mermaid">
 				<div slot="actions">
 					{#if !$codeStore.autoSync}
-						<button class="bg-blue-500 hover:bg-blue-700 rounded px-1" on:click={syncDiagram}
+						<button class="bg-indigo-500 hover:bg-indigo-700 rounded px-1" on:click={syncDiagram}
 							>🔄</button>
 					{/if}
 					<label for="autoSync">
@@ -131,7 +131,7 @@
 			<Card title="Diagram" isCloseable={false}>
 				<button
 					slot="actions"
-					class="rounded shadow px-2 bg-blue-500 hover:bg-blue-700"
+					class="rounded shadow px-2 bg-indigo-500 hover:bg-indigo-700"
 					on:click|stopPropagation={() => viewDiagram()}>View</button>
 
 				<div class="flex-1 overflow-auto">