finxol.io
Personal site
staging.colinozanne.co.uk
portfolio
astro
fix: apply theme to all pages
+132
-17
-17
src/components/customise.astro
-17
src/components/customise.astro
···
253
253
randomButton.addEventListener("click", () => {
254
254
applyRandomColors(...pickRandomColors());
255
255
});
256
-
257
-
// Restore random colors on load if they exist
258
-
window.onload = () => {
259
-
// Trigger theme initialization
260
-
store.theme;
261
-
262
-
// Restore random colors if saved
263
-
const saved = localStorage.getItem("randomColors");
264
-
if (saved) {
265
-
try {
266
-
const [primary, secondary, accent] = JSON.parse(saved);
267
-
applyRandomColors(primary, secondary, accent);
268
-
} catch {
269
-
localStorage.removeItem("randomColors");
270
-
}
271
-
}
272
-
};
273
256
</script>
274
257
275
258
<style>
+132
src/layouts/Layout.astro
+132
src/layouts/Layout.astro
···
24
24
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
25
25
<meta name="generator" content={Astro.generator} />
26
26
<title>Colin Ozanne</title>
27
+
<script is:inline>
28
+
// Theme initialization - runs before page renders to prevent flash
29
+
(function () {
30
+
const theme = localStorage.getItem("theme") || "light";
31
+
document.documentElement.dataset.theme = theme;
32
+
33
+
// Apply random colors if saved
34
+
const saved = localStorage.getItem("randomColors");
35
+
if (saved) {
36
+
try {
37
+
const [primary, secondary, accent] = JSON.parse(saved);
38
+
const isDark = theme === "dark";
39
+
const level = isDark ? "500" : "400";
40
+
const textLevel = "950";
41
+
const mutedLevel = isDark ? "600" : "300";
42
+
const bgLevel = isDark ? "900" : "100";
43
+
const root = document.documentElement;
44
+
45
+
root.style.setProperty(
46
+
"--primary",
47
+
`var(--${primary}-${level})`,
48
+
);
49
+
root.style.setProperty(
50
+
"--primary-text",
51
+
`var(--${primary}-${textLevel})`,
52
+
);
53
+
root.style.setProperty(
54
+
"--primary-muted",
55
+
`var(--${primary}-${mutedLevel})`,
56
+
);
57
+
root.style.setProperty(
58
+
"--secondary",
59
+
`var(--${secondary}-${level})`,
60
+
);
61
+
root.style.setProperty(
62
+
"--secondary-text",
63
+
`var(--${secondary}-${textLevel})`,
64
+
);
65
+
root.style.setProperty(
66
+
"--accent",
67
+
`var(--${accent}-${level})`,
68
+
);
69
+
root.style.setProperty(
70
+
"--accent-text",
71
+
`var(--${accent}-${textLevel})`,
72
+
);
73
+
root.style.setProperty(
74
+
"--link",
75
+
`var(--${accent}-${level})`,
76
+
);
77
+
root.style.setProperty(
78
+
"--link-text",
79
+
`var(--${accent}-${textLevel})`,
80
+
);
81
+
root.style.setProperty(
82
+
"--background",
83
+
`var(--${primary}-${bgLevel})`,
84
+
);
85
+
root.style.setProperty(
86
+
"--foreground",
87
+
`var(--${primary}-${isDark ? "100" : "950"})`,
88
+
);
89
+
root.style.setProperty(
90
+
"--name-color",
91
+
`var(--${primary}-${isDark ? "800" : "500"})`,
92
+
);
93
+
root.style.setProperty(
94
+
"--name-color-text",
95
+
`var(--${primary}-${isDark ? "100" : "950"})`,
96
+
);
97
+
root.style.setProperty(
98
+
"--lang-bg",
99
+
`var(--${primary}-${isDark ? "900" : "100"})`,
100
+
);
101
+
root.style.setProperty(
102
+
"--lang",
103
+
`var(--${primary}-${isDark ? "800" : "200"})`,
104
+
);
105
+
root.style.setProperty(
106
+
"--lang-hover",
107
+
`var(--${primary}-${isDark ? "700" : "300"})`,
108
+
);
109
+
root.style.setProperty(
110
+
"--lang-active",
111
+
`var(--${primary}-${isDark ? "600" : "400"})`,
112
+
);
113
+
root.style.setProperty(
114
+
"--lang-active-text",
115
+
`var(--${primary}-${textLevel})`,
116
+
);
117
+
root.style.setProperty(
118
+
"--lang-text",
119
+
`var(--${primary}-${isDark ? "200" : "800"})`,
120
+
);
121
+
root.style.setProperty(
122
+
"--intro-container",
123
+
`var(--${secondary}-${level})`,
124
+
);
125
+
root.style.setProperty(
126
+
"--blog-container",
127
+
`var(--${accent}-${level})`,
128
+
);
129
+
root.style.setProperty(
130
+
"--project-1",
131
+
`var(--${secondary}-${level})`,
132
+
);
133
+
root.style.setProperty(
134
+
"--project-1-text",
135
+
`var(--${secondary}-${textLevel})`,
136
+
);
137
+
root.style.setProperty(
138
+
"--project-2",
139
+
`var(--${primary}-${level})`,
140
+
);
141
+
root.style.setProperty(
142
+
"--project-2-text",
143
+
`var(--${primary}-${textLevel})`,
144
+
);
145
+
root.style.setProperty(
146
+
"--project-3",
147
+
`var(--${accent}-${level})`,
148
+
);
149
+
root.style.setProperty(
150
+
"--project-3-text",
151
+
`var(--${accent}-${textLevel})`,
152
+
);
153
+
} catch {
154
+
localStorage.removeItem("randomColors");
155
+
}
156
+
}
157
+
})();
158
+
</script>
27
159
</head>
28
160
<body>
29
161
<div class="wip-banner">