From 40411fd32800f9971ad7e712d13eed87b027c818 Mon Sep 17 00:00:00 2001 From: thiloho <123883702+thiloho@users.noreply.github.com> Date: Thu, 18 May 2023 20:20:43 +0200 Subject: [PATCH] Add ThemeToggle component --- flake.lock | 26 +++++++++++++ flake.nix | 31 +++++++++++++++ src/components/ArticleSearchWrapper.astro | 2 +- src/components/Dropdown.svelte | 2 +- src/components/Head.astro | 4 ++ src/components/Nav.astro | 2 + src/components/TableOfContents.svelte | 8 ++-- src/components/ThemeToggle.svelte | 47 +++++++++++++++++++++++ src/layouts/ArticleLayout.astro | 2 +- src/pages/index.astro | 2 +- src/styles/global.css | 22 +++++++++++ 11 files changed, 139 insertions(+), 9 deletions(-) create mode 100644 flake.lock create mode 100644 flake.nix create mode 100644 src/components/ThemeToggle.svelte diff --git a/flake.lock b/flake.lock new file mode 100644 index 0000000..d2aaff0 --- /dev/null +++ b/flake.lock @@ -0,0 +1,26 @@ +{ + "nodes": { + "nixpkgs": { + "locked": { + "lastModified": 1684428141, + "narHash": "sha256-yaMyF02+Wr4H9NQc0HDxQTUon8yqU0GrSzeDlnc1N3M=", + "owner": "NixOS", + "repo": "nixpkgs", + "rev": "edcd3d30564ca6d4c1f2442c4149fa908228243e", + "type": "github" + }, + "original": { + "owner": "NixOS", + "repo": "nixpkgs", + "type": "github" + } + }, + "root": { + "inputs": { + "nixpkgs": "nixpkgs" + } + } + }, + "root": "root", + "version": 7 +} diff --git a/flake.nix b/flake.nix new file mode 100644 index 0000000..b3a6968 --- /dev/null +++ b/flake.nix @@ -0,0 +1,31 @@ +{ + description = "JavaScript development environment"; + + inputs = { + nixpkgs.url = "github:NixOS/nixpkgs"; + }; + + outputs = { self, nixpkgs }: + let + # Systems supported + allSystems = [ + "x86_64-linux" + "aarch64-linux" + "x86_64-darwin" + "aarch64-darwin" + ]; + + forAllSystems = f: nixpkgs.lib.genAttrs allSystems (system: f { + pkgs = nixpkgs.legacyPackages.${system}; + }); + in + { + devShells = forAllSystems ({ pkgs }: { + default = pkgs.mkShell { + packages = with pkgs; [ + nodejs # Node.js, plus npm, npx, and corepack + ]; + }; + }); + }; +} diff --git a/src/components/ArticleSearchWrapper.astro b/src/components/ArticleSearchWrapper.astro index bfabbb5..d6a2f40 100644 --- a/src/components/ArticleSearchWrapper.astro +++ b/src/components/ArticleSearchWrapper.astro @@ -7,4 +7,4 @@ const articles = (await getCollection("blog")).sort( ); --- - + diff --git a/src/components/Dropdown.svelte b/src/components/Dropdown.svelte index 2b948ba..d1b60be 100644 --- a/src/components/Dropdown.svelte +++ b/src/components/Dropdown.svelte @@ -1,7 +1,7 @@ diff --git a/src/components/Nav.astro b/src/components/Nav.astro index cda1920..3179d09 100644 --- a/src/components/Nav.astro +++ b/src/components/Nav.astro @@ -1,5 +1,6 @@ --- import ArticleSearchWrapper from "../components/ArticleSearchWrapper.astro"; +import ThemeToggle from "../components/ThemeToggle.svelte"; --- diff --git a/src/components/TableOfContents.svelte b/src/components/TableOfContents.svelte index afcba35..99659bb 100644 --- a/src/components/TableOfContents.svelte +++ b/src/components/TableOfContents.svelte @@ -4,19 +4,17 @@ export let headings: MarkdownHeading[] = []; import Dropdown from "./Dropdown.svelte"; - - let dropdown; - + - Table of contents (Shift + t) + Table of contents (Shift + c)
    {#each headings.filter(({ depth }) => depth === 2) as { slug, text }}
  • - {text} + {text}
    • {/each}
diff --git a/src/components/ThemeToggle.svelte b/src/components/ThemeToggle.svelte new file mode 100644 index 0000000..40edc70 --- /dev/null +++ b/src/components/ThemeToggle.svelte @@ -0,0 +1,47 @@ + + + + + Toggle theme (Shift + t) + + +
+ {#each themeOptions as option, index} +
+ + +
+ {/each} +
+ + + \ No newline at end of file diff --git a/src/layouts/ArticleLayout.astro b/src/layouts/ArticleLayout.astro index ec0587e..6d2312a 100644 --- a/src/layouts/ArticleLayout.astro +++ b/src/layouts/ArticleLayout.astro @@ -7,7 +7,7 @@ import PublicationDate from "../components/PublicationDate.astro"; --- - +

Published on diff --git a/src/pages/index.astro b/src/pages/index.astro index 57bf4cf..c7bd350 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -13,7 +13,7 @@ const articles = (await getCollection("blog")).sort( --- - + { articles.map((article) => ( diff --git a/src/styles/global.css b/src/styles/global.css index 527607b..8b48d0c 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -6,6 +6,8 @@ --tertiary-background-color: hsl(0 0% 90%); --text-color: hsl(0 0% 10%); --accent-color: #1e40af; + + color-scheme: light; } @media (prefers-color-scheme: dark) { @@ -20,6 +22,26 @@ } } +html.Light { + --background-color: hsl(0 0% 100%); + --secondary-background-color: hsl(0 0% 95%); + --tertiary-background-color: hsl(0 0% 90%); + --text-color: hsl(0 0% 10%); + --accent-color: #1e40af; + + color-scheme: light; +} + +html.Dark { + --background-color: hsl(0 0% 10%); + --secondary-background-color: hsl(0 0% 15%); + --tertiary-background-color: hsl(0 0% 20%); + --text-color: hsl(0 0% 90%); + --accent-color: #93c5fd; + + color-scheme: dark; +} + html { scroll-behavior: smooth; }