Skip to content

Commit 7968fd2

Browse files
OliverSpeirOliverSpeir
authored
update dark mode and dynamic import script to v5 (#389)
- removes tailwind v4 alpha tip - updates dark mode content and example to v5 - updates dynamic script import content and example to v5
1 parent 6cf8ff7 commit 7968fd2

File tree

18 files changed

+88
-3879
lines changed

18 files changed

+88
-3879
lines changed

‎examples/dark-mode/README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66

77
## Features
88

9-
- View Transitions Compatible
109
- Allows for setting a default theme easily with a prop
1110
- Includes [button](./src/components/ThemeToggle.astro) and [select](./src/components/ThemeToggle.astro) [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) (which aren't necesary to use the script in `ThemeManager.astro`)
1211
- Exposes `theme` global for a nice API

‎examples/dark-mode/package.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,11 @@
55
"scripts": {
66
"dev": "astro dev",
77
"start": "astro dev",
8-
"build": "astro check && astro build",
8+
"build": "astro build",
99
"preview": "astro preview",
1010
"astro": "astro"
1111
},
1212
"dependencies": {
13-
"@astrojs/check": "^0.5.10",
14-
"astro": "^4.6.1",
15-
"typescript": "^5.4.5"
13+
"astro": "^5.10.2"
1614
}
1715
}

‎examples/dark-mode/public/favicon.svg‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎examples/dark-mode/src/components/Layout.astro‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
---
2-
import { ViewTransitions } from "astro:transitions";
32
import ThemeManager from "./ThemeManager.astro";
43
---
54

65
<html lang="en">
76
<head>
87
<meta charset="utf-8" />
9-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
108
<meta name="viewport" content="width=device-width" />
119
<meta name="generator" content={Astro.generator} />
1210
<title>Astro</title>
1311
<ThemeManager defaultTheme="dark" />
14-
<ViewTransitions />
1512
</head>
1613
<main>
1714
<body>
@@ -25,14 +22,21 @@ import ThemeManager from "./ThemeManager.astro";
2522
--text-color: #000000;
2623
color-scheme: light;
2724
}
28-
@media (prefers-color-scheme: dark), :root[data-theme="dark"] {
29-
:root {
25+
26+
@media (prefers-color-scheme: dark) {
27+
:root:not([data-theme="light"]) {
3028
--background-color: #333333;
3129
--text-color: #ffffff;
3230
color-scheme: dark;
3331
}
3432
}
3533

34+
:root[data-theme="dark"] {
35+
--background-color: #333333;
36+
--text-color: #ffffff;
37+
color-scheme: dark;
38+
}
39+
3640
body {
3741
background-color: var(--background-color);
3842
color: var(--text-color);

‎examples/dark-mode/src/components/ThemeManager.astro‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const { defaultTheme = "auto" } = Astro.props;
2020
let systemTheme = mediaMatcher.matches ? "light" : "dark";
2121
mediaMatcher.addEventListener("change", (event) => {
2222
systemTheme = event.matches ? "light" : "dark";
23-
applyTheme(theme.getTheme());
23+
applyTheme(getTheme());
2424
});
2525

2626
function applyTheme(theme) {
@@ -30,7 +30,7 @@ const { defaultTheme = "auto" } = Astro.props;
3030
document.dispatchEvent(
3131
new CustomEvent("theme-changed", {
3232
detail: { theme, systemTheme, defaultTheme },
33-
}),
33+
})
3434
);
3535
}
3636

@@ -55,8 +55,3 @@ const { defaultTheme = "auto" } = Astro.props;
5555
})();
5656
theme.setTheme(theme.getTheme());
5757
</script>
58-
<script>
59-
document.addEventListener("astro:after-swap", () =>
60-
window.theme.setTheme(window.theme.getTheme()),
61-
);
62-
</script>

‎examples/dark-mode/src/env.d.ts‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
/// <reference types="astro/client" />
2-
31
interface Window {
4-
theme: {
5-
setTheme: (theme: 'auto' | 'dark' | 'light') => void;
6-
getTheme: () => 'auto' | 'dark' | 'light';
7-
getSystemTheme: () => 'light' | 'dark';
8-
getDefaultTheme: () => 'auto' | 'dark' | 'light';
9-
};
2+
theme: {
3+
setTheme: (theme: "auto" | "dark" | "light") => void;
4+
getTheme: () => "auto" | "dark" | "light";
5+
getSystemTheme: () => "light" | "dark";
6+
getDefaultTheme: () => "auto" | "dark" | "light";
7+
};
108
}

‎examples/dark-mode/src/pages/index.astro‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,19 @@ import ThemeToggleButton from "../components/ThemeToggleButton.astro";
1010
<ThemeToggleButton />
1111
<button id="setTheme">theme.setTheme("auto")</button>
1212
<p><code>theme.getTheme()</code> returns: <code id="getTheme"></code></p>
13-
<script is:inline>
14-
document
15-
.getElementById("setTheme")
16-
.addEventListener("click", () => theme.setTheme("auto"));
13+
<script>
14+
const setThemeElem = document.getElementById("setTheme");
15+
setThemeElem &&
16+
setThemeElem.addEventListener("click", () =>
17+
window.theme.setTheme("auto")
18+
);
1719

18-
document.getElementById("getTheme").innerHTML = theme.getTheme();
20+
const getThemeElem = document.getElementById("getTheme");
21+
getThemeElem && (getThemeElem.innerHTML = window.theme.getTheme());
1922

2023
document.addEventListener("theme-changed", () => {
2124
const resultsElem = document.getElementById("getTheme");
22-
resultsElem && (resultsElem.innerHTML = theme.getTheme());
25+
resultsElem && (resultsElem.innerHTML = window.theme.getTheme());
2326
});
2427
</script>
2528
</Layout>

‎examples/dark-mode/tsconfig.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
{
2-
"extends": "astro/tsconfigs/strictest"
2+
"extends": "astro/tsconfigs/strict",
3+
"include": [".astro/types.d.ts", "**/*"],
4+
"exclude": ["dist"]
35
}

‎examples/script-tag-dynamic-imports/package.json‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,8 @@
1010
"astro": "astro"
1111
},
1212
"dependencies": {
13-
"@tsparticles/confetti": "^3.4.0",
14-
"astro": "^5.1.1",
15-
"js-confetti": "^0.12.0",
16-
"typescript": "^5.4.5"
13+
"@tsparticles/confetti": "^3.8.1",
14+
"astro": "^5.10.2",
15+
"js-confetti": "^0.12.0"
1716
}
1817
}

0 commit comments

Comments
 (0)