Update UI Theme

src/ui/app.css

@@ -3,16 +3,6 @@
 // SPDX-FileCopyrightText: 2021-Present The Zarf Authors 
  */
 :root {
-	/* Theme | vars */
-	--mdc-theme-primary: #4adede;
-	--mdc-theme-primary-dark: #00acac;
-	--mdc-theme-secondary: #787ff6;
-	--mdc-theme-on-primary: #171717;
-	--mdc-theme-on-secondary: white;
-	--mdc-theme-surface: white;
-	--mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.6);
-	--mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
-
 	/* Typography | vars */
 	--mdc-typography-font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
 		Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -41,9 +31,11 @@
 	font-family: var(--mdc-typography-font-family);
 }
 
+/* temporary addition of !important while theme updates are in flux */
+
 .mdc-typography--body2,
 .mdc-typography--caption {
-	color: var(--mdc-theme-text-secondary-on-light);
+	color: var(--mdc-theme-text-secondary-on-light) !important;
 }
 
 .mdc-typography--body3 {
@@ -60,7 +52,7 @@
 	font-size: var(--mdc-typography-th-font-size);
 	line-height: var(--mdc-typography-th-line-height);
 	letter-spacing: var(--mdc-typography-th-letter-spacing);
-	color: var(--mdc-theme-text-primary-on-light);
+	color: var(--mdc-theme-text-primary-on-light) !important;
 }
 
 *,
@@ -73,7 +65,6 @@ html,
 body {
 	margin: 0;
 	padding: 0;
-	background-color: #f5f5f5;
 }
 
 .card {

src/ui/lib/components/header.svelte

@@ -6,6 +6,7 @@
 	import { clusterStore } from '$lib/store';
 	import logo from '@images/zarf-logo.png';
 	import Icon from './icon.svelte';
+	import ThemeToggle from './theme-toggle.svelte';
 </script>
 
 <header class="header mdc-elevation--z8">
@@ -19,7 +20,7 @@
 	</div>
 
 	<div class="header-end">
-		<div class="header-end-icon"><Icon variant="sun" /></div>
+		<ThemeToggle />
 		<div class="header-end-icon"><Icon variant="cancelCloud" /></div>
 	</div>
 </header>
@@ -37,7 +38,7 @@
 		display: flex;
 		align-items: center;
 		background-color: #0d133d;
-		color: #ffffffdd;
+		color: var(--mdc-theme-text-secondary-on-dark);
 		padding: 0.5rem 1rem;
 		justify-content: space-between;
 	}
@@ -51,6 +52,7 @@
 		justify-content: flex-end;
 		gap: 1rem;
 		margin-right: 0.5rem;
+		align-items: center;
 	}
 	.header-end-icon {
 		cursor: pointer;

src/ui/lib/components/theme-toggle.svelte

@@ -0,0 +1,24 @@
+<!-- 
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2021-Present The Zarf Authors
+ -->
+<script lang="ts">
+	import { themeStore } from '$lib/store';
+	import { IconButton } from '@ui';
+
+	const toggle = () => {
+		themeStore.update((theme) => {
+			return theme === 'dark' ? 'light' : 'dark';
+		});
+	};
+</script>
+
+<IconButton
+	on:click={toggle}
+	iconContent="dark_mode"
+	toggledIconContent="light_mode"
+	toggleable
+	toggled={$themeStore === 'dark'}
+	iconClass="material-symbols-outlined"
+    toggledIconClass="material-symbols-outlined"
+/>

src/ui/lib/palette.ts

@@ -0,0 +1,69 @@
+import type { Palettes } from '@ui';
+
+// Current default from @ui
+export const ZarfPalettes: Palettes = {
+	shared: {
+		primary: '#68c4ff',
+		secondary: '#787ff6',
+		surface: '#244a8f',
+		success: '#2e7d32',
+		warning: '#ed6c02',
+		info: '#0288d1',
+		error: '#b00020',
+		on: {
+			primary: 'black',
+			secondary: 'white',
+			surface: 'white',
+			success: 'white',
+			warning: 'white',
+			info: 'white',
+			error: 'white'
+		},
+		text: {
+			primary: {
+				onDark: 'white',
+				onLight: 'rgb(0, 0, 0, 0.87)',
+				onBackground: 'rgb(255, 255, 255, 0.87)'
+			},
+			secondary: {
+				onLight: 'rgb(0, 0, 0, 0.6)',
+				onDark: 'rgba(255, 255, 255, 0.7)',
+				onBackground: 'rgba(255, 255, 255, 0.7)'
+			},
+			hint: {
+				onLight: 'rgba(0, 0, 0, 0.38)',
+				onDark: 'rgba(255, 255, 255, 0.5)',
+				onBackground: 'rgba(255, 255, 255, 0.5)'
+			},
+			disabled: {
+				onLight: 'rgba(0, 0, 0, 0.38)',
+				onDark: 'rgba(255, 255, 255, 0.5)',
+				onBackground: 'rgba(255, 255, 255, 0.5)'
+			},
+			icon: {
+				onLight: 'rgba(0, 0, 0, 0.38)',
+				onDark: 'rgba(255, 255, 255, 0.5)',
+				onBackground: 'rgba(255, 255, 255, 0.5)'
+			}
+		}
+	},
+	// custom dark + light palettes
+	dark: {
+		background: '#0a0e2e',
+		onBackground: '#ffffff',
+		primary: '#00acac'
+	},
+	// source: figma
+	light: {
+		primary: '#4adede',
+		secondary: '#787ff6',
+		background: '#f5f5f5',
+		surface: 'white',
+		on: {
+			background: 'black',
+			surface: 'black',
+			secondary: 'white',
+			primary: '#171717'
+		}
+	}
+};

src/ui/lib/store.ts

@@ -1,11 +1,19 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: 2021-Present The Zarf Authors
 
+import { getPreferredTheme } from '@defense-unicorns/unicorn-ui';
 import { writable } from 'svelte/store';
 import type { APIZarfPackage, ClusterSummary } from './api-types';
 
 const clusterStore = writable<ClusterSummary>();
 const pkgStore = writable<APIZarfPackage>();
 const pkgComponentDeployStore = writable<number[]>([]);
+// check localstorage for theme, if not found, use the preferred theme, otherwise default to light
+const storedTheme = localStorage.theme ?? getPreferredTheme(window) ?? 'light';
+const themeStore = writable<'dark' | 'light'>(storedTheme);
+// update localstorage when theme changes
+themeStore.subscribe((theme) => {
+	localStorage.theme = theme;
+});
 
-export { clusterStore, pkgStore, pkgComponentDeployStore };
+export { clusterStore, pkgStore, pkgComponentDeployStore, themeStore };

src/ui/routes/+layout.svelte

@@ -10,6 +10,9 @@
 	import { clusterStore } from '$lib/store';
 	import Header from '$lib/components/header.svelte';
 	import 'material-symbols/';
+	import { Theme } from '@ui';
+	import { ZarfPalettes } from '$lib/palette';
+	import { themeStore } from '$lib/store';
 
 	function getClusterSummary() {
 		// Try to get the cluster summary
@@ -23,10 +26,14 @@
 	}
 
 	getClusterSummary();
+
+	$: theme = $themeStore;
 </script>
 
 <Header />
 
-<main class="mdc-typography">
-	<slot />
-</main>
+<Theme {theme} palettes={ZarfPalettes}>
+	<main class="mdc-typography">
+		<slot />
+	</main>
+</Theme>