feat: dark mode samples

AmadeusITGroup · Feb 15, 2024 · 1710af4 · 1710af4
1 parent 0d8b725
commit 1710af4
Show file tree

Hide file tree

Showing 15 changed files with 90 additions and 10 deletions.
diff --git a/angular/demo/src/app/app.component.ts b/angular/demo/src/app/app.component.ts
@@ -1,3 +1,4 @@
+import type {OnInit} from '@angular/core';
 import {Component} from '@angular/core';
 import {RouterModule} from '@angular/router';
 
@@ -11,4 +12,14 @@ import {RouterModule} from '@angular/router';
 		</div>
 	`,
 })
-export class AppComponent {}
+export class AppComponent implements OnInit {
+	ngOnInit() {
+		window.addEventListener('storage', (event) => {
+			if (event.key === 'theme') {
+				if (event.newValue) {
+					document.documentElement.setAttribute('data-bs-theme', event.newValue);
+				}
+			}
+		});
+	}
+}
diff --git a/angular/demo/src/app/samples/rating/form.route.ts b/angular/demo/src/app/samples/rating/form.route.ts
@@ -13,7 +13,7 @@ import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
 				<div class="text-success">Thanks!</div>
 			}
 			@if (ctrl.invalid) {
-				<div class="text-danger">Please rate us</div>
+				<div class="text-danger-emphasis">Please rate us</div>
 			}
 		</div>
 		<pre>Model: <span id="form-model"><b>{{ ctrl.value }}</b></span></pre>

diff --git a/angular/demo/src/index.html b/angular/demo/src/index.html
@@ -6,6 +6,12 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<title>Demo</title>
 		<link rel="icon" type="image/svg+xml" href="agnosui-logo.svg" />
+		<script>
+			const theme = window.localStorage.getItem('theme');
+			if (theme === 'dark' || ((theme === 'auto' || !theme) && (window.parent ?? window).matchMedia('(prefers-color-scheme: dark)').matches)) {
+				document.documentElement.setAttribute('data-bs-theme', 'dark');
+			}
+		</script>
 	</head>
 	<body>
 		<div id="root">

diff --git a/common/demo.scss b/common/demo.scss
@@ -14,3 +14,18 @@ main {
 		height: 30px;
 	}
 }
+
+[data-bs-theme='dark'] {
+	.btn-outline-primary {
+		--bs-btn-color: #3f8bfd;
+	}
+	.btn-outline-secondary {
+		--bs-btn-color: #848d94;
+	}
+	.btn-outline-danger {
+		--bs-btn-color: #e36370;
+	}
+	.btn-outline-success {
+		--bs-btn-color: #1d9f63;
+	}
+}
diff --git a/common/samples/progressbar/custom.scss b/common/samples/progressbar/custom.scss
@@ -2,7 +2,7 @@
 	padding: 0;
 	height: 210px;
 	width: 190px;
-	border: 10px solid #030303;
+	border: 10px solid var(--bs-body-color);
 	position: absolute;
 	transform: translate(-50%, -50%);
 	top: 50%;
@@ -42,7 +42,7 @@
 	position: absolute;
 	height: 80px;
 	width: 60px;
-	border: 10px solid #030303;
+	border: 10px solid var(--bs-body-color);
 	border-left: none;
 	right: -70px;
 	top: 30px;
@@ -53,7 +53,7 @@
 	content: '';
 	height: 10px;
 	width: 260px;
-	background-color: #030303;
+	background-color: var(--bs-body-color);
 	left: -45px;
 	bottom: -10px;
 	border-radius: 10px;

diff --git a/demo/src/lib/layout/Sample.svelte b/demo/src/lib/layout/Sample.svelte
@@ -83,7 +83,7 @@
 </script>
 
 <div class="mb-4 py-2 px-0 px-sm-3">
-	<div class={`position-relative ${isDoc ? 'border-bottom' : 'border'} `}>
+	<div class={`position-relative ${isDoc ? 'border-bottom' : 'border'} iframe-container`}>
 		{#if $showSpinner$}
 			<div class="position-absolute top-50 start-50 translate-middle iframeSpinner">
 				<div class="spinner-border text-primary-emphasis" role="status">

diff --git a/demo/src/lib/layout/iframe.ts b/demo/src/lib/layout/iframe.ts
@@ -41,6 +41,7 @@ export function createIframeHandler(defaultHeight: number, resize = true, messag
 	const onLoad = (event: Event) => {
 		if (event.target instanceof HTMLIFrameElement) {
 			setupObserver(event.target);
+			event.target.classList.add('loaded');
 		}
 	};
 
@@ -58,7 +59,12 @@ export function createIframeHandler(defaultHeight: number, resize = true, messag
 			}
 
 			const update = (baseSrc: string) => {
-				if (!iframe.contentWindow?.location?.href?.startsWith(baseSrc)) {
+				if (
+					!iframe.contentWindow?.location?.href?.startsWith(baseSrc) ||
+					!iframe.contentDocument ||
+					iframe.contentDocument.readyState === 'loading'
+				) {
+					iframe.classList.remove('loaded');
 					_iframeLoaded$.set(false);
 					if (spinnerTimer) {
 						clearTimeout(spinnerTimer);
@@ -79,6 +85,7 @@ export function createIframeHandler(defaultHeight: number, resize = true, messag
 					}
 					_iframeLoaded$.set(true);
 					_showSpinner$.set(false);
+					iframe.classList.add('loaded');
 				}
 			};
 			window.addEventListener('message', sampleLoad, false);

diff --git a/demo/src/routes/styles.scss b/demo/src/routes/styles.scss
@@ -204,11 +204,22 @@ header {
 	}
 }
 
+iframe {
+	opacity: 0;
+	&.loaded {
+		opacity: 1;
+	}
+}
+
 // Dark mode override
 @if $enable-dark-mode {
 	@include color-mode(dark, true) {
 		color-scheme: dark;
 
+		.iframe-container {
+			background-color: #212529;
+		}
+
 		@each $color, $value in $theme-colors-dark-rgb {
 			--#{$prefix}#{$color}-rgb: #{$value};
 		}

diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-form.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/rating-form.html
@@ -139,7 +139,7 @@
 			 id="form-msg"
 			>
 				<div
-				 class="text-danger"
+				 class="text-danger-emphasis"
 				>
 					"Please rate us"
 				</div>

diff --git a/react/demo/src/app/samples/rating/Form.route.tsx b/react/demo/src/app/samples/rating/Form.route.tsx
@@ -27,7 +27,7 @@ const RatingDemo = () => {
 			<Rating rating={ctrl.value} disabled={ctrl.disabled} onRatingChange={(value) => updateCtrl({value})} ariaLabelledBy="ratingLabel" />
 			<div id="form-msg" className="form-text small">
 				{ctrl.valid && <div className="text-success">Thanks!</div>}
-				{ctrl.invalid && <div className="text-danger">Please rate us</div>}
+				{ctrl.invalid && <div className="text-danger-emphasis">Please rate us</div>}
 			</div>
 			<pre>
 				Model:{' '}

diff --git a/react/demo/src/index.html b/react/demo/src/index.html
@@ -6,6 +6,12 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="icon" type="image/svg+xml" href="./agnosui-logo.svg" />
 		<title>Vite App</title>
+		<script>
+			const theme = window.localStorage.getItem('theme');
+			if (theme === 'dark' || ((theme === 'auto' || !theme) && (window.parent ?? window).matchMedia('(prefers-color-scheme: dark)').matches)) {
+				document.documentElement.setAttribute('data-bs-theme', 'dark');
+			}
+		</script>
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/react/demo/src/main.tsx b/react/demo/src/main.tsx
@@ -53,6 +53,14 @@ const router = createHashRouter([
 	},
 ]);
 
+window.addEventListener('storage', (event) => {
+	if (event.key === 'theme') {
+		if (event.newValue) {
+			document.documentElement.setAttribute('data-bs-theme', event.newValue);
+		}
+	}
+});
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
 	<React.StrictMode>
 		<div className="container p-3">

diff --git a/svelte/demo/src/app/App.svelte b/svelte/demo/src/app/App.svelte
@@ -1,7 +1,17 @@
 <script lang="ts">
+	import {onMount} from 'svelte';
 	import AppCommon from '../common/AppCommon.svelte';
 	import 'bootstrap/dist/css/bootstrap.css';
 	const componentsToBeProcessed = import.meta.glob('./samples/*/*.route.svelte');
+	onMount(() => {
+		window.addEventListener('storage', (event) => {
+			if (event.key === 'theme') {
+				if (event.newValue) {
+					document.documentElement.setAttribute('data-bs-theme', event.newValue);
+				}
+			}
+		});
+	});
 </script>
 
 <div class="container p-3">

diff --git a/svelte/demo/src/app/index.html b/svelte/demo/src/app/index.html
@@ -6,6 +6,12 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="icon" type="image/svg+xml" href="../common/agnosui-logo.svg" />
 		<title>Svelte App</title>
+		<script>
+			const theme = window.localStorage.getItem('theme');
+			if (theme === 'dark' || ((theme === 'auto' || !theme) && (window.parent ?? window).matchMedia('(prefers-color-scheme: dark)').matches)) {
+				document.documentElement.setAttribute('data-bs-theme', 'dark');
+			}
+		</script>
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/svelte/demo/src/app/samples/rating/Form.route.svelte b/svelte/demo/src/app/samples/rating/Form.route.svelte
@@ -17,7 +17,7 @@
 		<div class="text-success">Thanks!</div>
 	{/if}
 	{#if ctrl.invalid}
-		<div class="text-danger">Please rate us</div>
+		<div class="text-danger-emphasis">Please rate us</div>
 	{/if}
 </div>
 <pre>Model: <span id="form-model"><b>{ctrl.value}</b></span></pre>