From 6c955e33e3196d667c2017e41bcabe4c989ed3f1 Mon Sep 17 00:00:00 2001 From: not-nullptr Date: Wed, 13 Nov 2024 18:33:19 +0000 Subject: [PATCH] feat: basic dark mode --- .vscode/settings.json | 3 + .vscode/tailwind.json | 55 ++++++++++++++++++ package.json | 1 + src/{app.css => app.scss} | 56 +++++++++++++++---- .../components/functional/FancyMenu.svelte | 2 +- src/lib/store/index.svelte.ts | 8 +++ src/routes/+layout.svelte | 4 +- tailwind.config.ts | 15 ++++- vite.config.ts | 7 +++ 9 files changed, 135 insertions(+), 16 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 .vscode/tailwind.json rename src/{app.css => app.scss} (72%) diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f791495 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "css.customData": [".vscode/tailwind.json"] +} diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json new file mode 100644 index 0000000..a45bccc --- /dev/null +++ b/.vscode/tailwind.json @@ -0,0 +1,55 @@ +{ + "version": 1.1, + "atDirectives": [ + { + "name": "@tailwind", + "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind" + } + ] + }, + { + "name": "@apply", + "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#apply" + } + ] + }, + { + "name": "@responsive", + "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#responsive" + } + ] + }, + { + "name": "@screen", + "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#screen" + } + ] + }, + { + "name": "@variants", + "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#variants" + } + ] + } + ] +} diff --git a/package.json b/package.json index 2d9c4cb..f620468 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "prettier": "^3.3.2", "prettier-plugin-svelte": "^3.2.6", "prettier-plugin-tailwindcss": "^0.6.5", + "sass": "^1.80.7", "svelte": "^5.0.0", "svelte-check": "^4.0.0", "tailwindcss": "^3.4.9", diff --git a/src/app.css b/src/app.scss similarity index 72% rename from src/app.css rename to src/app.scss index 00893ec..5eb4525 100644 --- a/src/app.css +++ b/src/app.scss @@ -1,24 +1,16 @@ -@import "tailwindcss/base"; -@import "tailwindcss/components"; -@import "tailwindcss/utilities"; +@tailwind base; +@tailwind components; +@tailwind utilities; @import url(@fontsource/lexend/400.css); @import url(@fontsource/lexend/500.css); @import url(@fontsource/azeret-mono/600.css); :root { - --accent-bg: hsl(303, 73%, 81%); - --accent-fg: hsl(0, 0, 10%); --font-body: "Lexend", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --font-display: "Azeret Mono", var(--font-body); - --bg: hsl(0, 0%, 100%); - --fg: hsl(0, 0%, 10%); - --fg-muted: hsl(0, 0%, 50%); - --fg-muted-alt: hsl(0, 0%, 75%); - --fg-highlight: hsl(303, 52%, 42%); - --fg-failure: hsl(0, 67%, 49%); --transition: linear( 0, 0.006, @@ -37,6 +29,48 @@ ); } +@mixin light { + --accent-bg: hsl(303, 73%, 81%); + --accent-fg: hsl(0, 0, 10%); + --bg: hsl(0, 0%, 100%); + --fg: hsl(0, 0%, 10%); + --fg-muted: hsl(0, 0%, 50%); + --fg-muted-alt: hsl(0, 0%, 75%); + --fg-highlight: hsl(303, 52%, 42%); + --fg-failure: hsl(0, 67%, 49%); +} + +@mixin dark { + --accent-bg: hsl(303, 73%, 35%); + --accent-fg: hsl(0, 0%, 90%); + --bg: hsl(0, 0%, 10%); + --fg: hsl(0, 0%, 90%); + --fg-muted: hsl(0, 0%, 65%); + --fg-muted-alt: hsl(0, 0%, 50%); + --fg-highlight: hsl(303, 52%, 60%); + --fg-failure: hsl(0, 67%, 80%); +} + +@media (prefers-color-scheme: dark) { + body { + @include dark; + } +} + +@media (prefers-color-scheme: light) { + body { + @include light; + } +} + +body.light { + @include light; +} + +body.dark { + @include dark; +} + body { @apply text-foreground bg-background font-body overflow-x-hidden; width: 100vw; diff --git a/src/lib/components/functional/FancyMenu.svelte b/src/lib/components/functional/FancyMenu.svelte index bfff5e0..3c2157e 100644 --- a/src/lib/components/functional/FancyMenu.svelte +++ b/src/lib/components/functional/FancyMenu.svelte @@ -55,7 +55,7 @@
{#key name} { + this.dark = !this.dark; + }; +} + export const files = new Files(); +export const theme = new Theme(); diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index dc85a70..5143fd1 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,9 +1,9 @@