Skip to content

Commit 19808f5

Browse files
YatekiiYatekii
committed
Implement dark theme
1 parent 24e4880 commit 19808f5

File tree

10 files changed

+52
-50
lines changed

10 files changed

+52
-50
lines changed

‎src/components/CodeSnippet.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,19 @@ export default function CodeSnippet({ snippets }: Props) {
2222
`}</style>
2323
<ul
2424
aria-label="Code Tabs"
25-
class="flex list-none p-0 m-0 mt-0 mb-0 h-full probe-rs-code-menu bg-slate-200 rounded-t-md overflow-hidden"
25+
class="flex list-none p-0 m-0 mt-0 mb-0 h-full probe-rs-code-menu bg-slate-200 dark:bg-slate-600 rounded-t-md overflow-hidden"
2626
>
2727
<li class={"code-tabs-decorator mt-0 mb-0"}></li>
2828
{snippets.map((snippet: any, index) => (
2929
<li class="p-0 m-0 mt-0 mb-0 whitespace-nowrap">
3030
<button
3131
className={clsx(
3232
{
33-
"bg-slate-100": selectedSnippet == index,
34-
"bg-slate-200": selectedSnippet != index,
33+
"bg-slate-100 dark:bg-slate-700": selectedSnippet == index,
34+
"bg-slate-200 dark:bg-slate-600": selectedSnippet != index,
3535
"font-bold": selectedSnippet == index,
3636
},
37-
"p-2 px-4 hover:bg-slate-100 cursor-pointer"
37+
"p-2 px-4 hover:bg-slate-100 dark:hover:bg-slate-700 cursor-pointer"
3838
)}
3939
onClick={() => setSelectedSnippet(index)}
4040
>

‎src/components/HeaderLink.astro

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,13 @@ const finalHref = href?.toString().startsWith("http")
1616
<li
1717
class:list={[
1818
"flex items-center content-center mx-2 border-b-2 font-bold active:mx-2 hover:border-b-green text-sm md:text-md",
19-
{ "border-b-green": isActive, "border-white": !isActive },
19+
{
20+
"border-b-green": isActive,
21+
"border-white dark:border-gray-800": !isActive,
22+
},
2023
]}
2124
>
22-
<a
23-
href={finalHref}
24-
class:list={[className, "hover:text-green"]}
25-
style={{ color: isActive ? "#15846f" : "black" }}
26-
{...props}
27-
>
25+
<a href={finalHref} class:list={[className, "hover:text-green"]} {...props}>
2826
<slot />
2927
</a>
3028
</li>

‎src/components/Socials.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const socials = [
4141
{
4242
socials.map((s) => (
4343
<a href={s.href} title={s.title} target="_blank">
44-
<div class="py-1 px-2 m-1 rounded-sm align-middle hover:bg-slate-200">
44+
<div class="py-1 px-2 m-1 rounded-sm align-middle hover:bg-slate-200 dark:hover:bg-slate-800">
4545
{s.title} <Icon name={s.icon} class="inline -mt-1" />
4646
</div>
4747
</a>

‎src/components/TargetsView.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -103,12 +103,12 @@ export default function TargetsView({ targets, manufacturers }: Props) {
103103

104104
return (
105105
<>
106-
<div class="sticky top-0 bg-slate-100 border-b-[1px] border-slate-200 p-5">
106+
<div class="sticky top-0 bg-slate-100 dark:bg-slate-700 border-b-[1px] border-slate-200 dark:border-slate-800 p-5">
107107
<div class="flex flex-col md:flex-row items-center justify-between gap-2">
108108
<label>
109109
<input
110110
onChange={(e) => setSearch((e.target as HTMLSelectElement).value)}
111-
class="w-full bg-gray-100 p-2 py-1 border-slate-300 border-2 rounded-md"
111+
class="w-full bg-slate-100 dark:bg-slate-700 p-2 py-1 border-slate-300 dark:border-slate-400 border-2 rounded-md"
112112
placeholder="Search"
113113
/>
114114
</label>
@@ -193,24 +193,23 @@ function Paginate({
193193
{pages.map((page) => {
194194
if (page === current + 1) {
195195
return (
196-
<li className="px-4 pt-3 mt-0 mb-0 text-green border-t-2 border-green">
196+
<li className="px-4 pt-3 mt-0 mb-0 text-green border-t-2 border-green cursor-default">
197197
{page}
198198
</li>
199199
);
200200
} else if (page === "…") {
201201
return (
202-
<li className="px-4 pt-3 mt-0 mb-0 border-t-2 border-transparent">
202+
<li className="px-4 pt-3 mt-0 mb-0 border-t-2 border-transparent cursor-default dark:text-slate-400">
203203
{page}
204204
</li>
205205
);
206206
} else {
207207
return (
208-
<li class="px-4 pt-3 mt-0 mb-0 border-t-2 border-transparent hover:border-slate-200 cursor-pointer">
208+
<li class="px-4 pt-3 mt-0 mb-0 border-t-2 border-transparent hover:border-slate-200 hover:dark:bg-slate-800 cursor-pointer dark:text-slate-400">
209209
<button
210210
onClick={() => {
211211
setCurrentPage(+page - 1);
212212
}}
213-
style={{ color: "black" }}
214213
class="cursor-pointer"
215214
>
216215
{page}

‎src/layouts/BlogPost.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const { title, description, date, authors } = Astro.props;
1111
---
1212

1313
<Html title={`${title} | ${SITE_TITLE}`} description={description}>
14-
<main class="prosecw-full max-w-3xl mx-auto">
14+
<main class="prose dark:prose-invert w-full max-w-3xl mx-auto">
1515
<article>
1616
<h2 class="text-4xl">{title}</h2>
1717
<p class="italic">

‎src/layouts/Doc.astro

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@ const {
2525
>
2626
<Icon
2727
name="carbon--table-of-contents"
28-
class="text-[#459087] text-4xl bg-gray-200 p-1 opacity-80"
28+
class="text-[#459087] text-4xl bg-slate-200 dark:bg-slate-800 p-1 opacity-80"
2929
/>
3030
<input type="checkbox" class="hidden" />
3131
</label>
3232
<nav
33-
class="fixed top-[65px] h-full min-w-svw md:min-w-3xs pb-10 md:left-[initial] md:overflow-auto font-[Inter] border-r-[1px] bg-white border-slate-200 px-5 left-[-100%] transition-[left_1s_ease_out] peer-has-checked:left-0 not-prose"
33+
class="fixed top-[65px] h-full min-w-svw md:min-w-3xs pb-10 md:left-[initial] md:overflow-auto font-[Inter] border-r-[1px] bg-white dark:bg-gray-800 border-slate-200 dark:border-slate-600 px-5 left-[-100%] transition-[left_1s_ease_out] peer-has-checked:left-0 not-prose"
3434
>
3535
{
3636
docFolders.map((folder) => (
@@ -43,8 +43,8 @@ const {
4343
>
4444
<p
4545
class:list={[
46-
"hover:bg-gray-300 px-3 py-1 my-1 rounded-md transition",
47-
{ "bg-gray-200": id == doc.id },
46+
"hover:bg-slate-300 dark:bg-gray-800 px-3 py-1 my-1 rounded-md transition",
47+
{ "bg-slate-200 dark:bg-slate-700": id == doc.id },
4848
]}
4949
>
5050
{doc.data.title}
@@ -59,7 +59,7 @@ const {
5959
<h3 class="text-4xl font-extrabold mb-3 mt-10 font-[Inter] tracking-wide">
6060
{title}
6161
</h3>
62-
<article class="prose">
62+
<article class="prose dark:prose-invert">
6363
<slot />
6464
</article>
6565
</div>

‎src/layouts/Html.astro

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,10 @@ const { title, description, image, fluid } = Astro.props;
1212
<html lang="en">
1313
<Head title={title} description={description} image={image} />
1414

15-
<body class="h-svh w-full">
16-
<div class="border-b-[1px] border-slate-200 bg-white">
15+
<body class="h-svh w-full dark:bg-gray-800">
16+
<div
17+
class="border-b-[1px] border-slate-200 dark:border-slate-600 bg-white dark:bg-gray-800"
18+
>
1719
<header class="h-full px-4 md:px-16">
1820
<nav
1921
class="h-28 md:h-16 flex flex-col md:flex-row justify-around place-items-center max-w-7xl mx-auto"
@@ -23,7 +25,7 @@ const { title, description, image, fluid } = Astro.props;
2325
class="py-5 text-lg w-max font-semibold font-[Inter] transition"
2426
>
2527
<Icon name="banner" class="inline text-4xl mr-3" />
26-
<span class="inline-block text-xl" style={{ color: "black" }}
28+
<span class="inline-block text-xl text-black dark:text-white"
2729
>{SITE_TITLE}</span
2830
>
2931
</h1>
@@ -49,25 +51,26 @@ const { title, description, image, fluid } = Astro.props;
4951
<div class="overflow-y-auto h-[calc(100vh-65px)] min-h-[calc(100vh-65px)]">
5052
<main
5153
class:list={[
52-
"mx-auto prose min-h-[calc(100vh-64px-154px)]",
54+
"prose dark:prose-invert mx-auto min-h-[calc(100vh-64px-154px)]",
5355
{ "max-w-7xl p-10": !fluid, "w-full max-w-full": fluid },
5456
]}
5557
>
5658
<slot />
5759
</main>
5860

59-
<footer class="bg-slate-100 py-5">
60-
<div class="text-gray-500 text-center max-w-4xl mx-auto">
61+
<footer class="bg-slate-100 dark:bg-gray-900 py-5">
62+
<div class="text-slate-500 text-center max-w-4xl mx-auto">
6163
<Socials class="mx-auto py-3" />
62-
<div class="w-full h-[1px] bg-slate-200"></div>
64+
<div class="w-full h-[1px] bg-slate-200 dark:bg-gray-800"></div>
6365
<p class="py-3">
6466
by the <a
6567
class="hover:underline underline-offset-2"
6668
href="https://github.com/probe-rs/probe-rs/graphs/contributors"
6769
>probe-rs contributors</a
68-
> &mdash; <a
69-
class="border-[1px] border-slate-200 rounded-sm px-2 py-1 cursor-pointer"
70-
href="#">Light theme</a
70+
> &mdash; <button
71+
data-theme-toggle
72+
class="border-[1px] border-slate-200 dark:border-slate-800 rounded-sm px-2 py-1 cursor-pointer"
73+
>Light theme</button
7174
>
7275
</p>
7376
</div>

‎src/pages/blog/index.astro

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ import { posts } from "../../utils";
99
<ul class="not-prose">
1010
{
1111
posts.map((post) => (
12-
<li class="hover:bg-slate-100 rounded-md p-5 mb-2">
12+
<li class="hover:bg-slate-100 dark:hover:bg-slate-700 rounded-md p-5 mb-2">
1313
<a href={import.meta.env.BASE_URL + "blog/" + post.id}>
14-
<h2 class="font-bold text-black text-2xl">{post.data.title}</h2>
14+
<h2 class="font-bold text-gray-800 dark:text-white text-2xl">
15+
{post.data.title}
16+
</h2>
1517
<p class="italic text-slate-500 my-1">
1618
by {post.data.authors.join(", ")} |
1719
<FormattedDate date={post.data.date} />

‎src/pages/index.astro

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -203,37 +203,37 @@ core.write_32(0x2000_0000, &data)?;`,
203203
<Image
204204
src={arm}
205205
alt="arm"
206-
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto"
206+
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto bg-white rounded-md"
207207
/>
208208
<Image
209209
src={nordic}
210210
alt="nordic"
211-
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto"
211+
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto bg-white rounded-md"
212212
/>
213213
<Image
214214
src={st}
215215
alt="st"
216-
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto"
216+
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto bg-white rounded-md"
217217
/>
218218
<Image
219219
src={nxp}
220220
alt="nxp"
221-
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto"
221+
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto bg-white rounded-md"
222222
/>
223223
<Image
224224
src={espressif}
225225
alt="espressif"
226-
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto"
226+
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto bg-white rounded-md"
227227
/>
228228
<Image
229229
src={raspberrypi}
230230
alt="raspberrypi"
231-
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto"
231+
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto bg-white rounded-md"
232232
/>
233233
<Image
234234
src={riscv}
235235
alt="risc-v"
236-
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto"
236+
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto bg-white rounded-md"
237237
/>
238238
</div>
239239
</div>
@@ -254,22 +254,22 @@ core.write_32(0x2000_0000, &data)?;`,
254254
<Image
255255
src={cmsis}
256256
alt="cmsis"
257-
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto"
257+
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto bg-white rounded-md"
258258
/>
259259
<Image
260260
src={jlink}
261261
alt="jlink"
262-
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto"
262+
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto bg-white rounded-md"
263263
/>
264264
<Image
265265
src={stlink}
266266
alt="stlink"
267-
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto"
267+
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto bg-white rounded-md"
268268
/>
269269
<Image
270270
src={ftdi}
271271
alt="ftdi"
272-
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto"
272+
class="mt-[8px] mb-[8px] m-[8px] p-[10px] max-h-[105px] w-auto bg-white rounded-md"
273273
/>
274274
</div>
275275
</div>

‎src/styles/global.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ a {
1414
}
1515

1616
@layer components {
17-
a {
17+
*:not(.prose) a {
1818
@apply text-green no-underline
1919
}
2020

@@ -41,7 +41,7 @@ div.expressive-code {
4141
}
4242

4343
pre.astro-code, pre.shiki {
44-
@apply mt-0 mb-0 rounded-b-md border-[1px] border-slate-200
44+
@apply mt-0 mb-0 rounded-b-md border-[1px] border-slate-200 dark:border-slate-800
4545
}
4646

4747
.code-snippet > pre.shiki {
@@ -68,6 +68,6 @@ figure {
6868

6969
.shiki,
7070
.shiki span {
71-
@apply !bg-slate-100
71+
@apply !bg-slate-100 dark:!bg-slate-700
7272
}
7373
}

0 commit comments

Comments
 (0)