dark mode logo (#160)

Rich-Harris · web-flow · commit 2555b1720eb7 · 2024-09-28T15:29:47.000-04:00
diff --git a/packages/site-kit/src/lib/branding/svelte-dark.svg b/packages/site-kit/src/lib/branding/svelte-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 634.6 177.4"><path d="M138.2 23.5c7.9 11.1 11 24.8 8.6 38.2-1.1 6.3-3.6 12.3-7.1 17.7 5.2 9.8 6.9 21.1 4.9 32-2.4 13.1-10.1 24.6-21.4 31.7l-41.3 26.3c-23.5 15-56.1 8-72.5-15.6-7.9-10.9-11-24.7-8.6-38.1 1.1-6.3 3.6-12.3 7.1-17.7C2.7 88.2 1 76.9 3 66c2.4-13.1 10.1-24.7 21.4-31.7L65.7 7.9c23.5-15 56-8 72.5 15.6" style="fill:#ff3e00"/><path d="M61.6 156.2c3-.8 5.8-2 8.4-3.7l41.3-26.3c6.8-4.3 11.5-11.2 12.9-19.1 1.4-8-.4-16.3-5.2-23-7.8-11.3-21.9-16.5-35.2-13.1-3 .8-5.8 2-8.4 3.7l-15.8 10c-.8.5-1.6.9-2.5 1.1-4 1-8.3-.5-10.6-3.9-1.4-2-2-4.5-1.6-6.9.4-2.4 1.8-4.5 3.9-5.7L90.1 43c.8-.5 1.6-.9 2.5-1.1 4-1 8.3.5 10.6 3.9 1.3 1.8 1.9 4 1.7 6.1v1.5c-.1 0 1.4.5 1.4.5 5.8 1.8 11.3 4.5 16.2 8.1l2.1 1.6.8-2.4c.4-1.3.7-2.6 1-3.9 1.4-8-.4-16.3-5.2-23C113.4 23 99.3 17.8 86 21.2c-3 .8-5.8 2-8.4 3.7L36.3 51.2c-6.8 4.3-11.5 11.2-12.9 19.1-1.4 8 .4 16.3 5.2 23 7.8 11.3 21.9 16.5 35.2 13.1 3-.8 5.8-2 8.4-3.7L88 92.6c.8-.5 1.6-.9 2.5-1.1 4-1 8.3.5 10.6 3.9 1.4 2 2 4.5 1.6 6.9-.4 2.4-1.8 4.5-3.9 5.8l-41.3 26.3c-.8.5-1.6.9-2.5 1.1-4 1-8.3-.5-10.6-3.9-1.3-1.8-1.9-4-1.7-6.1V124c.1 0-1.4-.5-1.4-.5-5.8-1.8-11.3-4.5-16.2-8.1l-2.1-1.6-.8 2.4c-.4 1.3-.7 2.6-1 3.9-1.4 8 .4 16.3 5.2 23 7.8 11.3 21.9 16.5 35.2 13.1" style="fill:#fff"/><path d="M242 127.9c-6.2.2-12.3-1.6-17.4-4.9-4.8-3.2-8.4-8-10.2-13.5l10.6-3.9c1.5 3.4 3.9 6.3 6.9 8.4 3.1 2.1 6.8 3.2 10.5 3.1 3.6.2 7.1-.9 10-3 2.5-2.1 3.9-5.4 3.7-8.7 0-1.5-.3-3-1-4.4-.6-1.2-1.4-2.3-2.3-3.3-1.2-1.1-2.5-2-4-2.7-1.8-.9-3.3-1.6-4.5-2.1-1.2-.5-2.9-1.1-5.3-1.9-2.9-1-5.1-1.8-6.5-2.4-2-.8-3.9-1.8-5.7-2.9-2-1-3.8-2.4-5.3-4-1.3-1.6-2.4-3.3-3.2-5.3-3.1-7.5-1-16.1 5.1-21.3 4.3-3.8 10.2-5.7 17.7-5.7 6.2 0 11.3 1.4 15.3 4.1 3.9 2.6 6.7 6.5 8.1 10.9l-10.4 3.5c-1-2.3-2.8-4.3-5-5.6-2.7-1.5-5.7-2.2-8.8-2.1-3-.2-6 .7-8.5 2.4-2.1 1.6-3.2 4.1-3.1 6.7 0 2 .9 3.9 2.4 5.2 1.4 1.4 3.1 2.6 5 3.4 1.7.7 4.4 1.7 7.9 2.9 2.2.8 3.8 1.4 4.8 1.8 1 .4 2.6 1.1 4.6 2 1.6.7 3.2 1.6 4.7 2.5 1.3 1 2.6 2 3.8 3.1 1.3 1.1 2.4 2.5 3.3 4 .8 1.5 1.5 3.2 1.9 4.9.6 2 .8 4.1.8 6.1 0 7.1-2.4 12.6-7.3 16.6-4.8 4-11.1 6-18.6 6Zm69.4-1.3-26-75.8h12.1l17.2 52.9c1 2.8 1.7 5.7 2.4 8.7.6-2.9 1.4-5.8 2.4-8.7l17-52.9h12l-25.9 75.8h-11.3Zm60.2 0V50.8h47v10.6h-35.8v20.8h23.1v10.6h-23.1V116h38.1v10.6h-49.4Zm78.1 0V50.8H461v65h37.1v10.8h-48.3Zm90.8-65v65h-11.3v-65h-21.5V50.8h54.2v10.8h-21.5Zm44.7 65V50.8h47v10.6h-35.8v20.8h23.1v10.6h-23.1V116h38.1v10.6h-49.4Z" style="fill:#ffffffcc"/></svg>
diff --git a/packages/site-kit/src/lib/branding/svelte-logo.svg b/packages/site-kit/src/lib/branding/svelte-logo.svg
@@ -1,10 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 358.464 235.952">
-	<defs>
-		<style>.a{fill:#ff3e00;}.b{fill:#fff;}.c{fill:#1273ff;}.d{fill:#ffd815;}</style>
-		<symbol id="a" viewBox="0 0 93.224 112">
-			<path class="a" d="M87.269,14.819C76.869-.066,56.328-4.478,41.477,4.984L15.4,21.608A29.921,29.921,0,0,0,1.876,41.651,31.514,31.514,0,0,0,4.984,61.882,30.006,30.006,0,0,0,.507,73.065,31.892,31.892,0,0,0,5.955,97.181c10.4,14.887,30.942,19.3,45.791,9.835L77.829,90.392A29.915,29.915,0,0,0,91.347,70.349a31.522,31.522,0,0,0-3.1-20.232,30.019,30.019,0,0,0,4.474-11.182,31.878,31.878,0,0,0-5.447-24.116"/>
-			<path class="b" d="M38.929,98.582a20.72,20.72,0,0,1-22.237-8.243,19.176,19.176,0,0,1-3.276-14.5,18.143,18.143,0,0,1,.623-2.435l.491-1.5,1.337.981a33.633,33.633,0,0,0,10.2,5.1l.969.294-.089.968A5.844,5.844,0,0,0,28,83.122a6.24,6.24,0,0,0,6.7,2.485,5.748,5.748,0,0,0,1.6-.7L62.382,68.281a5.43,5.43,0,0,0,2.451-3.631,5.794,5.794,0,0,0-.988-4.371,6.244,6.244,0,0,0-6.7-2.487,5.755,5.755,0,0,0-1.6.7l-9.953,6.345a19.06,19.06,0,0,1-5.3,2.326,20.719,20.719,0,0,1-22.237-8.243,19.171,19.171,0,0,1-3.277-14.5A17.992,17.992,0,0,1,22.915,32.37L49,15.747a19.03,19.03,0,0,1,5.3-2.329,20.72,20.72,0,0,1,22.237,8.243,19.176,19.176,0,0,1,3.277,14.5,18.453,18.453,0,0,1-.624,2.435l-.491,1.5-1.336-.979a33.616,33.616,0,0,0-10.2-5.1l-.97-.294.09-.968a5.859,5.859,0,0,0-1.052-3.878,6.241,6.241,0,0,0-6.7-2.485,5.748,5.748,0,0,0-1.6.7L30.842,43.719a5.421,5.421,0,0,0-2.449,3.63,5.79,5.79,0,0,0,.986,4.372,6.245,6.245,0,0,0,6.7,2.487,5.773,5.773,0,0,0,1.6-.7l9.952-6.342a18.978,18.978,0,0,1,5.3-2.328,20.718,20.718,0,0,1,22.236,8.243,19.171,19.171,0,0,1,3.277,14.5,18,18,0,0,1-8.13,12.054L44.229,96.253a19.017,19.017,0,0,1-5.3,2.329"/>
-		</symbol>
-	</defs>
-	<use width="93.224" height="112" transform="translate(34.228 29.267) scale(1.584)" xlink:href="#a"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 147.6 177.4"><path d="M138.2 23.5c7.9 11.1 11 24.8 8.6 38.2-1.1 6.3-3.6 12.3-7.1 17.7 5.2 9.8 6.9 21.1 4.9 32-2.4 13.1-10.1 24.6-21.4 31.7l-41.3 26.3c-23.5 15-56.1 8-72.5-15.6-7.9-10.9-11-24.7-8.6-38.1 1.1-6.3 3.6-12.3 7.1-17.7C2.7 88.2 1 76.9 3 66c2.4-13.1 10.1-24.7 21.4-31.7L65.7 7.9c23.5-15 56-8 72.5 15.6" style="fill:#ff3e00"/><path d="M61.6 156.2c3-.8 5.8-2 8.4-3.7l41.3-26.3c6.8-4.3 11.5-11.2 12.9-19.1 1.4-8-.4-16.3-5.2-23-7.8-11.3-21.9-16.5-35.2-13.1-3 .8-5.8 2-8.4 3.7l-15.8 10c-.8.5-1.6.9-2.5 1.1-4 1-8.3-.5-10.6-3.9-1.4-2-2-4.5-1.6-6.9.4-2.4 1.8-4.5 3.9-5.7L90.1 43c.8-.5 1.6-.9 2.5-1.1 4-1 8.3.5 10.6 3.9 1.3 1.8 1.9 4 1.7 6.1v1.5c-.1 0 1.4.5 1.4.5 5.8 1.8 11.3 4.5 16.2 8.1l2.1 1.6.8-2.4c.4-1.3.7-2.6 1-3.9 1.4-8-.4-16.3-5.2-23C113.4 23 99.3 17.8 86 21.2c-3 .8-5.8 2-8.4 3.7L36.3 51.2c-6.8 4.3-11.5 11.2-12.9 19.1-1.4 8 .4 16.3 5.2 23 7.8 11.3 21.9 16.5 35.2 13.1 3-.8 5.8-2 8.4-3.7L88 92.6c.8-.5 1.6-.9 2.5-1.1 4-1 8.3.5 10.6 3.9 1.4 2 2 4.5 1.6 6.9-.4 2.4-1.8 4.5-3.9 5.8l-41.3 26.3c-.8.5-1.6.9-2.5 1.1-4 1-8.3-.5-10.6-3.9-1.3-1.8-1.9-4-1.7-6.1V124c.1 0-1.4-.5-1.4-.5-5.8-1.8-11.3-4.5-16.2-8.1l-2.1-1.6-.8 2.4c-.4 1.3-.7 2.6-1 3.9-1.4 8 .4 16.3 5.2 23 7.8 11.3 21.9 16.5 35.2 13.1" style="fill:#fff"/></svg>
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -207,6 +207,10 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		background: url(../branding/svelte.svg) no-repeat var(--sk-page-padding-side) 50% /
 			calc(100% - var(--sk-page-padding-side) - var(--padding-right)) auto;
 		padding: 0 var(--padding-right) 0 calc(var(--sk-page-padding-side) + 0rem);
+
+		:global(.dark) & {
+			background-image: url(../branding/svelte-dark.svg);
+		}
 	}
 
 	.mobile-menu {
