Merge branch 'release/v1.11.0'

* release/v1.11.0: Bump version number to 1.11.0. Add controls to manipulate logo colour from backoffice. Adapt layout to screens with notches and overlapping browser UI. Give masthead a fixed height on desktop. Update theme-color meta tags for Safari 15. Redesign website masthead.
severnbronies · Jun 11, 2021 · 59e09df · 59e09df
2 parents e7a8755 + b26b4b8
commit 59e09df
Show file tree

Hide file tree

Showing 13 changed files with 154 additions and 62 deletions.
diff --git a/components/footer/_footer.scss b/components/footer/_footer.scss
@@ -10,7 +10,7 @@
 	$narrowPadding: tokens.$grid-gutter / 2;
 	margin-top: $padding * 2;
 	padding-top: $padding;
-	padding-bottom: $padding;
+	padding-bottom: calc(#{$padding} + env(safe-area-inset-bottom));
 	color: tokens.$color-white;
 	background-color: tokens.$color-off-black;
 	@include media.dark-mode {

diff --git a/components/masthead/_masthead.scss b/components/masthead/_masthead.scss
@@ -7,50 +7,57 @@
 
 .sb-masthead {
 	$self: &;
-	$flipBreakpoint: 25em;
+	$flipBreakpoint: 40em;
 	margin-bottom: tokens.$grid-gutter;
+	padding: 1rem 0;
+	position: sticky;
+	top: 0;
+	z-index: tokens.$layer-overlay;
+	background-color: var(--theme-background);
+	@include media.mq($flipBreakpoint) {
+		height: tokens.$masthead-height-desktop;
+	}
 	&__inner {
 		@include layout.container;
+		display: flex;
+		flex-direction: column;
 		position: relative;
+		@include media.mq($flipBreakpoint) {
+			flex-direction: row;
+			align-items: center;
+			height: 100%;
+		}
 	}
 	&__branding {
 		display: block;
-		overflow: hidden;
-		color: var(--theme-accent);
-		&:hover {
-			color: var(--theme-text);
-		}
-		&:focus {
-			@include a11y.focus-ring;
+		width: 100%;
+		max-width: 15rem;
+		margin: 0 auto;
+		line-height: 0;
+		@include media.mq($flipBreakpoint) {
+			margin-left: 0;
 		}
 	}
 	&__logo {
-		margin-top: -1.25vw;
-	}
-	&__logo-left,
-	&__logo-right {
-		fill: currentColor;
 	}
 	&__nav {
-		margin-top: 1em;
-	}
-	&__nav-list {
-		@include helpers.list-reset;
+		margin-top: 1rem;
 		@include media.mq($flipBreakpoint) {
-			display: flex;
-			flex-direction: row;
+			margin-top: 0;
 		}
 	}
-	&__nav-item {
-		@include media.mq($flipBreakpoint) {
-			& + & {
-				margin-left: 1.25em;
-			}
-		}
+	&__nav-list {
+		@include helpers.list-reset;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		gap: 1.25rem;
 	}
 	&__nav-link {
 		@include theme.default-link(var(--theme-accent), var(--theme-accent-mod));
-		font-size: tokens.$size-byline;
+		@include media.mq(60em) {
+			font-size: tokens.$size-byline;
+		}
 		&[aria-current] {
 			@include theme.default-link(var(--theme-text), var(--theme-accent-mod));
 		}

diff --git a/components/masthead/template.twig b/components/masthead/template.twig
@@ -1,30 +1,44 @@
 <header
-    data-module="sb-masthead"
-    class="sb-masthead {%- if params.classes %} {{ params.classes }}{% endif %}"
-    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-    <div class="sb-masthead__inner">
-	    <a class="sb-masthead__branding" href="{{ params.branding.href }}" role="banner" rel="home" aria-label="{{ params.branding.name }}">
-	    	<svg 
-			    class="sb-masthead__logo"
-			    xmlns="http://www.w3.org/2000/svg"
-			    viewBox="0 0 199 17"
-			    role="img"
-			    aria-labelledby="brandingName">
-			    <title id="brandingName">{{ params.branding.name }}</title>
-  				<path class="sb-masthead__logo-left" d="M9.14 3.62c-.76-.27-1.55-.41-2.35-.44-.52-.03-1.03.09-1.47.34-.35.21-.56.59-.55 1-.02.54.29 1.04.78 1.28.77.39 1.58.7 2.41.92.92.25 1.82.57 2.69.95.71.32 1.33.81 1.81 1.43.53.73.79 1.62.75 2.52.03.95-.25 1.88-.8 2.65-.56.76-1.33 1.34-2.21 1.67-1.02.39-2.11.59-3.2.57-1.29 0-2.58-.23-3.79-.68-1.18-.42-2.27-1.05-3.22-1.86l1.43-2.93c.81.73 1.75 1.32 2.76 1.74.9.41 1.87.63 2.86.66.61.04 1.21-.11 1.74-.41.41-.25.65-.7.62-1.18.01-.38-.15-.74-.42-1a3.2 3.2 0 00-1.06-.64c-.43-.17-1-.36-1.78-.57-.91-.24-1.81-.54-2.67-.91-.71-.33-1.32-.83-1.78-1.46-.53-.71-.8-1.59-.75-2.47-.02-.9.25-1.78.77-2.51C2.25 1.54 3 .96 3.87.63 4.89.23 5.99.03 7.09.05c1.09 0 2.18.16 3.22.48.99.29 1.94.71 2.81 1.27l-1.38 3c-.82-.5-1.69-.89-2.6-1.18zM15.73.27h12.1v3h-8.51v3.48h7.65v3h-7.65v3.52h8.29v3H15.73v-16zm30.82 4l3-4h9.1v3h-8.5v3.48h7.65v3h-7.65v3.52h8.76v3H46.55v-12zm24.94 12l-2.52-4.57h-3.66v4.57h-3.58v-16h6.9c1.73-.11 3.43.4 4.81 1.45a5.124 5.124 0 011.7 4.11c.03 1.1-.23 2.19-.76 3.16-.51.88-1.28 1.58-2.21 2l3.38 5.28h-4.06zm-6.18-7.59h3.32c.82.05 1.64-.19 2.3-.69.55-.52.85-1.25.81-2 .05-.76-.25-1.49-.81-2a3.51 3.51 0 00-2.3-.68h-3.32v5.37zM89.14.27h3.41v16h-3.26L81.55 5.98v10.29h-3.42v-16h3.26l7.72 10.33.03-10.33zm-59.09 0h3.5v12l9-12h4.5l-12 16h-5v-16z"></path>
-			    <path class="sb-masthead__logo-right" d="M107.32 1.43c.98.64 1.55 1.73 1.52 2.9.02.8-.24 1.58-.73 2.21-.51.64-1.21 1.09-2 1.29.95.15 1.81.64 2.43 1.37.6.75.91 1.68.88 2.64.05 1.27-.55 2.49-1.58 3.23a7.292 7.292 0 01-4.42 1.21h-7.58V.36h7.31c1.47-.08 2.93.29 4.17 1.07zm-2.73 4.85c.39-.32.6-.8.58-1.3.02-.49-.19-.96-.58-1.27-.47-.33-1.03-.48-1.6-.43h-3.54v3.47h3.54c.58.03 1.14-.14 1.6-.47zm.4 6.52c.47-.32.74-.85.72-1.42a1.56 1.56 0 00-.72-1.36c-.6-.36-1.3-.53-2-.48h-3.54v3.74h3.54c.7.05 1.4-.11 2-.48zm16.79 3.48l-2.52-4.53h-3.65v4.53h-3.59V.36h6.9c1.72-.11 3.43.4 4.81 1.44a5.044 5.044 0 011.7 4.07c.03 1.1-.23 2.19-.76 3.15-.51.88-1.28 1.58-2.21 2l3.38 5.26h-4.06zm-6.17-7.53h3.31c.82.05 1.64-.19 2.3-.69.56-.51.85-1.25.81-2 .06-.76-.24-1.5-.81-2-.67-.48-1.48-.72-2.3-.67h-3.31v5.36zm24.57-7.57c3.93 2.16 5.37 7.09 3.22 11.02a8.11 8.11 0 01-3.22 3.22 9.297 9.297 0 01-8.67 0 8.184 8.184 0 01-3.07-3 7.934 7.934 0 01-1.13-4.14 7.82 7.82 0 011.13-4.16 8.002 8.002 0 013.06-2.94 9.317 9.317 0 018.68 0zm-6.74 2.73c-.75.44-1.36 1.08-1.79 1.83-.44.77-.67 1.65-.66 2.54-.01 1.8.92 3.47 2.46 4.4 1.49.9 3.37.9 4.86 0 .73-.45 1.33-1.08 1.75-1.83.43-.79.65-1.67.64-2.57.01-.89-.21-1.76-.64-2.54a5.035 5.035 0 00-1.75-1.83c-.73-.43-1.57-.65-2.42-.63-.85-.01-1.7.2-2.45.63zM157.72.36h3.41v15.92h-3.29l-7.69-10.21v10.21h-3.41V.36h3.27l7.71 10.26V.36zm6.9 0h3.59v15.92h-3.59V.36zm7.1 0h12.12v3h-8.51v3.42h7.64v3h-7.64v3.5h8.76v3h-12.37V.36zm23.02 3.23c-.75-.26-1.54-.41-2.34-.44a2.81 2.81 0 00-1.48.34c-.35.21-.56.59-.54 1-.01.54.29 1.04.78 1.28.77.39 1.58.7 2.41.92.92.28 1.82.61 2.69 1 .71.32 1.33.81 1.81 1.43.53.73.79 1.62.75 2.52.02.94-.26 1.86-.81 2.62-.56.73-1.31 1.29-2.17 1.62-1.02.39-2.11.59-3.2.57-1.29 0-2.58-.23-3.79-.68-1.18-.42-2.27-1.05-3.22-1.86l1.43-2.93c.82.74 1.76 1.33 2.78 1.75.9.41 1.87.63 2.85.66a3.2 3.2 0 001.74-.41c.65-.45.82-1.34.37-1.99-.05-.07-.11-.14-.17-.2-.31-.28-.67-.51-1.06-.65-.43-.17-1-.36-1.78-.57-.91-.24-1.8-.54-2.67-.9-.71-.31-1.34-.78-1.83-1.39-.53-.71-.8-1.58-.75-2.47-.02-.9.25-1.78.77-2.51a4.91 4.91 0 012.16-1.66c1.03-.4 2.12-.59 3.22-.57 2.12.01 4.2.61 6 1.74l-1.39 3c-.8-.5-1.66-.91-2.56-1.22z"></path>
+	data-module="sb-masthead"
+	class="sb-masthead {%- if params.classes %} {{ params.classes }}{% endif %}"
+	{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+	<div class="sb-masthead__inner">
+		<a class="sb-masthead__branding" href="{{ params.branding.href }}" role="banner" rel="home" aria-label="{{ params.branding.name }}">
+			<svg 
+			class="sb-masthead__logo"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 221 18"
+			role="img"
+			aria-labelledby="brandingName">
+				<title id="brandingName">{{ params.branding.name }}</title>
+				<defs>
+					<style>
+						.sb-masthead__logo-left,
+						.sb-masthead__logo-icon {
+							fill: #212529;
+							fill: var(--custom-logo-1, var(--theme-accent, #212529));
+						}
+						.sb-masthead__logo-right {
+							fill: #5832ab;
+							fill: var(--custom-logo-2, var(--theme-text, #5832ab));
+						}
+					</style>
+				</defs>
+				<path class="sb-masthead__logo-left" d="M9.6,4.4A6.2,6.2,0,0,0,7.3,4a4,4,0,0,0-1.5.3.88.88,0,0,0-.5,1,1.56,1.56,0,0,0,.8,1.3,11.72,11.72,0,0,0,2.4.9c.9.3,1.8.6,2.7,1A4.89,4.89,0,0,1,13,9.9a4.38,4.38,0,0,1,.8,2.5A4.7,4.7,0,0,1,13,15a5.25,5.25,0,0,1-2.2,1.7,8.66,8.66,0,0,1-3.2.6,9.86,9.86,0,0,1-3.8-.7A8,8,0,0,1,.6,14.7L2,11.8a10,10,0,0,0,2.8,1.7,9.47,9.47,0,0,0,2.9.7,3.29,3.29,0,0,0,1.7-.4,1.14,1.14,0,0,0,.6-1.2,1.28,1.28,0,0,0-.4-1A2.38,2.38,0,0,0,8.5,11l-1.8-.6c-.9-.2-1.8-.6-2.7-.9A4.89,4.89,0,0,1,2.2,8.1a3.67,3.67,0,0,1-.7-2.5,4.38,4.38,0,0,1,.8-2.5A5.85,5.85,0,0,1,4.4,1.4,8.66,8.66,0,0,1,7.6.8a11.27,11.27,0,0,1,3.2.5,10.17,10.17,0,0,1,2.8,1.3l-1.4,3A20.62,20.62,0,0,0,9.6,4.4ZM16,17H28V14H19.6V10.5H27v-3H19.6V4H28V1H16Zm32,0H60V14H51.5V10.5H59v-3H51.5V4H60V1H50.9L48,5Zm29,0-3.4-5.3a4.73,4.73,0,0,0,2.2-2,6.09,6.09,0,0,0,.8-3.2,4.86,4.86,0,0,0-1.7-4.1A7.63,7.63,0,0,0,70,1H63V17h3.5V12.4h3.9L72.9,17ZM66.5,4h3.6a3.89,3.89,0,0,1,2.3.7,2.17,2.17,0,0,1,.8,2,2.17,2.17,0,0,1-.8,2,3.31,3.31,0,0,1-2.3.7H66.5Zm23.9,7.3L82.4,1H79V17h3.6V6.7l8,10.3H94V1H90.4ZM31,17h5L48,1H43.5l-9,12V1H31Z"/>
+				<path class="sb-masthead__logo-right" d="M108.88,2.11A3.36,3.36,0,0,1,110.49,5a3.45,3.45,0,0,1-.81,2.2,3.82,3.82,0,0,1-2.11,1.3,3.92,3.92,0,0,1,3.42,4,3.77,3.77,0,0,1-1.71,3.3,7.21,7.21,0,0,1-4.53,1.2H97V1h7.55A7,7,0,0,1,108.88,2.11ZM106.06,7a1.61,1.61,0,0,0,.6-1.3,1.61,1.61,0,0,0-.6-1.3,2,2,0,0,0-1.61-.4h-3.73v3.5h3.73A3.36,3.36,0,0,0,106.06,7Zm.4,6.5a1.73,1.73,0,0,0,.81-1.4,1.61,1.61,0,0,0-.81-1.4,3.68,3.68,0,0,0-2.11-.5h-3.63V14h3.73A3.55,3.55,0,0,0,106.46,13.51ZM122.9,17l-2.5-4.6h-3.9V17H113V1h7a7.81,7.81,0,0,1,4.9,1.4,4.86,4.86,0,0,1,1.7,4.1,6.09,6.09,0,0,1-.8,3.2,4.73,4.73,0,0,1-2.2,2L127,17Zm-6.4-7.6H120a3.41,3.41,0,0,0,2.4-.7,2.27,2.27,0,0,0,.8-2,2.17,2.17,0,0,0-.8-2A4,4,0,0,0,120,4h-3.5ZM141.35,2a8,8,0,0,1,3.2,10.9,7.6,7.6,0,0,1-3.2,3.2,9.33,9.33,0,0,1-8.6,0,8.11,8.11,0,0,1-3.1-3,8,8,0,0,1,2.7-11c.1-.1.2-.1.3-.2a9.24,9.24,0,0,1,8.7.1Zm-6.7,2.7a5.17,5.17,0,0,0-1.8,1.8,5.53,5.53,0,0,0-.7,2.5,4.3,4.3,0,0,0,.7,2.5,3.92,3.92,0,0,0,1.8,1.8,5.13,5.13,0,0,0,2.4.7,4.2,4.2,0,0,0,2.4-.7,4.9,4.9,0,0,0,1.7-1.8,4.75,4.75,0,0,0,.6-2.6,5.14,5.14,0,0,0-.6-2.5,4.9,4.9,0,0,0-1.7-1.8,4.75,4.75,0,0,0-2.4-.6A4.42,4.42,0,0,0,134.65,4.71ZM159.5,1l-.1,10.3L151.4,1H148V17h3.6V6.71l8,10.3H163V1ZM166,17h4V1h-4Zm7,0h12V14h-8.5v-3.5H184v-3h-7.5V4H185V1H173Zm26.1-11.4,1.4-3a10.17,10.17,0,0,0-2.8-1.3,11.27,11.27,0,0,0-3.2-.5,7.18,7.18,0,0,0-3.3.5A5.43,5.43,0,0,0,189,3a3.75,3.75,0,0,0-.8,2.5A4.38,4.38,0,0,0,189,8a5.94,5.94,0,0,0,1.8,1.3,14.26,14.26,0,0,0,2.7.9l1.8.6a4.13,4.13,0,0,1,1.1.7,1.28,1.28,0,0,1,.4,1,1.43,1.43,0,0,1-.6,1.2,3.29,3.29,0,0,1-1.7.4,9.47,9.47,0,0,1-2.9-.7,10,10,0,0,1-2.8-1.7l-1.4,2.9a9.38,9.38,0,0,0,3.2,1.9,9.86,9.86,0,0,0,3.8.7,8.66,8.66,0,0,0,3.2-.6,5.25,5.25,0,0,0,2.2-1.7,4.7,4.7,0,0,0,.8-2.6,4.38,4.38,0,0,0-.8-2.5,4.89,4.89,0,0,0-1.8-1.4c-.9-.4-1.8-.7-2.7-1a11.72,11.72,0,0,1-2.4-.9,1.56,1.56,0,0,1-.8-1.3,1,1,0,0,1,.5-1,4,4,0,0,1,1.5-.3,6.2,6.2,0,0,1,2.3.4A13.43,13.43,0,0,1,199.1,5.61Z"/>
+				<path class="sb-masthead__logo-icon" d="M212,1a8,8,0,0,0-7.12,11.62L204,17l4.38-.88A8,8,0,1,0,212,1Z"/>
 			</svg>
-	    </a>
-	    <nav class="sb-masthead__nav" aria-label="Main navigation" role="navigation">
-	    	<ul class="sb-masthead__nav-list">
-	    		{%- for item in params.navItems %}
-		    		<li class="sb-masthead__nav-item {{ item.classes | join(' ') }}">
-		    			<a class="sb-masthead__nav-link" href="{{ item.link }}" target="{{ item.target }}" {%- if item.current %} aria-current="page"{% endif %}>
-		    				{{- item.title -}}
-		    			</a>
-		    		</li>
-		    	{%- endfor %}
-	    	</ul>
-	    </nav>
+		</a>
+		<nav class="sb-masthead__nav" aria-label="Main navigation" role="navigation">
+			<ul class="sb-masthead__nav-list">
+				{%- for item in params.navItems %}
+					<li class="sb-masthead__nav-item {{ item.classes | join(' ') }}">
+						<a class="sb-masthead__nav-link" href="{{ item.link }}" target="{{ item.target }}" {%- if item.current %} aria-current="page"{% endif %}>
+							{{- item.title -}}
+						</a>
+					</li>
+				{%- endfor %}
+			</ul>
+		</nav>
 	</div>
 </header>
diff --git a/components/subnavigation/_subnavigation.scss b/components/subnavigation/_subnavigation.scss
@@ -4,7 +4,7 @@
 
 .sb-subnavigation {
 	position: sticky;
-	top: 2rem;
+	top: calc(#{tokens.$masthead-height-desktop} + 2rem);
 	&__list {
 		@include helpers.list-reset;
 		@include media.mq(50em) {

diff --git a/functions.php b/functions.php
@@ -115,6 +115,8 @@ public function add_to_context($context)
 		$context['primary_navigation'] = new Timber\Menu('primary', [
 			'depth' => 1,
 		]);
+		$context['logo_color_1'] = get_field('logo_color_1', 'option');
+		$context['logo_color_2'] = get_field('logo_color_2', 'option');
 
 		// Phase banner
 		$context['phase_banner_visible'] = get_field(

diff --git a/inc/header.php b/inc/header.php
@@ -7,6 +7,61 @@
 		'parent_slug' => 'website-settings',
 	]);
 
+	acf_add_local_field_group([
+		'key' => 'group_60c3ba96e91a4',
+		'title' => 'Logo colours',
+		'fields' => [
+			[
+				'key' => 'field_60c3baa0fff2d',
+				'label' => 'Color 1',
+				'name' => 'logo_color_1',
+				'type' => 'color_picker',
+				'instructions' =>
+					'Applied to the \'Severn\' text and speech bubble icon.',
+				'required' => 0,
+				'conditional_logic' => 0,
+				'wrapper' => [
+					'width' => '',
+					'class' => '',
+					'id' => '',
+				],
+				'default_value' => '',
+			],
+			[
+				'key' => 'field_60c3bacffff2e',
+				'label' => 'Color 2',
+				'name' => 'logo_color_2',
+				'type' => 'color_picker',
+				'instructions' => 'Applied to the \'Bronies\' text.',
+				'required' => 0,
+				'conditional_logic' => 0,
+				'wrapper' => [
+					'width' => '',
+					'class' => '',
+					'id' => '',
+				],
+				'default_value' => '',
+			],
+		],
+		'location' => [
+			[
+				[
+					'param' => 'options_page',
+					'operator' => '==',
+					'value' => 'acf-options-header',
+				],
+			],
+		],
+		'menu_order' => 0,
+		'position' => 'normal',
+		'style' => 'default',
+		'label_placement' => 'top',
+		'instruction_placement' => 'label',
+		'hide_on_screen' => '',
+		'active' => true,
+		'description' => '',
+	]);
+
 	acf_add_local_field_group([
 		'key' => 'group_5ec94f2745a73',
 		'title' => 'Banners',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sb-plimsoll",
 	"namespace": "sb",
-	"version": "1.10.0",
+	"version": "1.11.0",
 	"description": "",
 	"main": "./dist/js/all.js",
 	"browserslist": [

diff --git a/src/images/logo.svg b/src/images/logo.svg
diff --git a/src/sass/mixins/_layout.scss b/src/sass/mixins/_layout.scss
@@ -5,10 +5,14 @@
  */
 
 @mixin container {
-	width: 92%;
-	max-width: tokens.$grid-max-width;
+	width: 100%;
+	max-width: calc(
+		#{tokens.$grid-max-width} + env(safe-area-inset-left) + env(safe-area-inset-right)
+	);
 	margin-right: auto;
 	margin-left: auto;
+	padding-left: max(1rem, env(safe-area-inset-left));
+	padding-right: max(1rem, env(safe-area-inset-right));
 }
 
 /**

diff --git a/style.css b/style.css
@@ -5,6 +5,6 @@
 	Author: Kimberly Grey
 	Author URI: https://berly.kim/
 	Description: 
-	Version: 1.10.0
+	Version: 1.11.0
 	Text Domain: sb
  */
diff --git a/tokens/layout.yml b/tokens/layout.yml
@@ -15,3 +15,7 @@ props:
     value: 0
     category: border-radius
     type: size
+  masthead_height_desktop:
+    value: 4rem
+    category: sizing
+    type: size
diff --git a/views/global-partials/html-head.twig b/views/global-partials/html-head.twig
@@ -3,7 +3,7 @@
 <html class="no-js" {{ site.language_attributes }}>
 <head>
 	<meta charset="{{ site.charset }}">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
 	<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
@@ -25,6 +25,12 @@
 	<link rel="stylesheet" media="all" href="{{ site.theme.link }}/dist/css/all.css?v={{ cachebust_css_version }}">
 	<link rel="stylesheet" media="print" href="{{ googleFontsUrl }}" onload="this.media='all'">
 	<noscript><link rel="stylesheet" media="all" href="{{ googleFontsUrl }}"></noscript>
+	<style>
+		:root {
+			{%- if logo_color_1 %} --custom-logo-1: {{ logo_color_1 }};{% endif %}
+			{%- if logo_color_2 %} --custom-logo-2: {{ logo_color_2 }};{% endif %}
+		}
+	</style>
 
 	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 	<link rel="icon" type="image/svg" href="/favicon.svg">
@@ -33,7 +39,8 @@
 	<link rel="manifest" href="/site.webmanifest">
 	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5832ab">
 	<meta name="msapplication-TileColor" content="#5832ab">
-	<meta name="theme-color" content="#5832ab">
+	<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
+	<meta name="theme-color" content="#1f1631" media="(prefers-color-scheme: dark)">
 
 	{{ function('wp_head') }}
 </head>