From 57f73e904c6ed349e277493dc86a5dd1ad7cf330 Mon Sep 17 00:00:00 2001 From: Mia Winter Date: Sun, 2 Jun 2024 16:52:07 +0200 Subject: [PATCH] Implemented theme system --- astro.config.mjs | 7 +- src/components/Card.astro | 61 --------------- src/components/ThemeToggle.astro | 36 +++++++++ src/layouts/Layout.astro | 46 ++++------- src/layouts/logo.svg | 122 +++++++++++++++++++++++++++++ src/pages/index.astro | 128 +++---------------------------- src/styles/style.css | 73 ++++++++++++++++++ static/favicon.svg | 125 ++++++++++++++++++++++++++++-- tailwind.config.mjs | 31 +++++++- 9 files changed, 412 insertions(+), 217 deletions(-) delete mode 100644 src/components/Card.astro create mode 100644 src/components/ThemeToggle.astro create mode 100644 src/layouts/logo.svg create mode 100644 src/styles/style.css diff --git a/astro.config.mjs b/astro.config.mjs index 90ed6e5..95c9ee3 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,4 +1,4 @@ -import { defineConfig } from 'astro/config'; +import { defineConfig, squooshImageService } from 'astro/config'; import tailwind from "@astrojs/tailwind"; @@ -7,5 +7,8 @@ export default defineConfig({ publicDir: "static", outDir: "public", - integrations: [tailwind()] + integrations: [tailwind()], + image:{ + service: squooshImageService() + } }); \ No newline at end of file diff --git a/src/components/Card.astro b/src/components/Card.astro deleted file mode 100644 index bd6d597..0000000 --- a/src/components/Card.astro +++ /dev/null @@ -1,61 +0,0 @@ ---- -interface Props { - title: string; - body: string; - href: string; -} - -const { href, title, body } = Astro.props; ---- - -
  • - -

    - {title} - → -

    -

    - {body} -

    -     -
    • - diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro new file mode 100644 index 0000000..2a38bfb --- /dev/null +++ b/src/components/ThemeToggle.astro @@ -0,0 +1,36 @@ + + + + \ No newline at end of file diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 7b552be..2c95664 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,4 +1,9 @@ --- +import '../styles/style.css'; +import ThemeToggle from "../components/ThemeToggle.astro"; +import {Image} from "astro:assets" +import logo from "./logo.svg" + interface Props { title: string; } @@ -15,37 +20,20 @@ const { title } = Astro.props; {title} + +
    + Winter Software + +
    +
    +

    test bg-base-300

    +
    - diff --git a/src/layouts/logo.svg b/src/layouts/logo.svg new file mode 100644 index 0000000..c0efdf3 --- /dev/null +++ b/src/layouts/logo.svg @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/index.astro b/src/pages/index.astro index fb62628..eca4cb9 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,123 +1,19 @@ --- import Layout from '../layouts/Layout.astro'; -import Card from '../components/Card.astro'; --- -
    - -

    Welcome to Astro

    -

    - To get started, open the directory src/pages in your project.
    - Code Challenge: Tweak the "Welcome to Astro" message above. -

    -
      - - - - -
    +
    +

    Welcome to Astro

    + +
    +

    Test primary

    +
    +
    +

    Test secondary

    +
    +
    +

    Test neutral

    +
    - - diff --git a/src/styles/style.css b/src/styles/style.css new file mode 100644 index 0000000..e4b24a9 --- /dev/null +++ b/src/styles/style.css @@ -0,0 +1,73 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + html, body { + @apply bg-base-100 text-base-content; + } + + html, body, + header, footer, main, article, section, + div, span { + @apply transition-colors ease-linear duration-300; + } + + :root { + --color-primary: 117 0 174; + --color-primary-content: 255 255 255; + --color-secondary: 174 171 0; + --color-secondary-content: 0 0 0; + --color-neutral: 227 213 246; + --color-neutral-content: 0 0 0; + + --color-base-100: 15 15 10; + --color-base-200: 25 25 20; + --color-base-300: 50 50 45; + --color-base-content: 255 255 255; + } + + [data-theme="light"] { + --color-primary: 197 82 255; + --color-primary-content: 0 0 0; + --color-secondary: 255 252 82; + --color-secondary-content: 0 0 0; + --color-neutral: 23 9 42; + --color-neutral-content: 255 255 255; + + --color-base-100: 240 240 230; + --color-base-200: 225 225 215; + --color-base-300: 205 205 195; + --color-base-content: 0 0 0; + } + + @media (prefers-color-scheme: light) { + :root { + --color-primary: 197 82 255; + --color-primary-content: 0 0 0; + --color-secondary: 255 252 82; + --color-secondary-content: 0 0 0; + --color-neutral: 23 9 42; + --color-neutral-content: 255 255 255; + + --color-base-100: 240 240 230; + --color-base-200: 225 225 215; + --color-base-300: 205 205 195; + --color-base-content: 0 0 0; + } + + [data-theme="dark"] { + --color-primary: 117 0 174; + --color-primary-content: 255 255 255; + --color-secondary: 174 171 0; + --color-secondary-content: 0 0 0; + --color-neutral: 227 213 246; + --color-neutral-content: 0 0 0; + + --color-base-100: 15 15 10; + --color-base-200: 25 25 20; + --color-base-300: 50 50 45; + --color-base-content: 255 255 255; + } + } +} \ No newline at end of file diff --git a/static/favicon.svg b/static/favicon.svg index f157bd1..18c7119 100644 --- a/static/favicon.svg +++ b/static/favicon.svg @@ -1,9 +1,118 @@ - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tailwind.config.mjs b/tailwind.config.mjs index 19f0614..6c3cb85 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -1,8 +1,37 @@ /** @type {import('tailwindcss').Config} */ +import defaultTheme from 'tailwindcss/defaultTheme' + export default { + darkMode: ['selector', '[data-theme="dark"]'], content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], theme: { - extend: {}, + extend: { + colors: { + primary: 'rgb(var(--color-primary) / )', + 'primary-content': 'rgb(var(--color-primary-content) / )', + secondary: 'rgb(var(--color-secondary) / )', + 'secondary-content': 'rgb(var(--color-secondary-content) / )', + neutral: 'rgb(var(--color-neutral) / )', + 'neutral-content': 'rgb(var(--color-neutral-content) / )', + + base: { + 100: 'rgb(var(--color-base-100) / )', + 200: 'rgb(var(--color-base-200) / )', + 300: 'rgb(var(--color-base-300) / )', + }, + 'base-content': 'rgb(var(--color-base-content) / )', + }, + fontSize: { + sm: '0.750rem', + base: '1rem', + lg: '1.1rem', + xl: '1.333rem', + '2xl': '1.777rem', + '3xl': '2.369rem', + '4xl': '3.158rem', + '5xl': '4.210rem' + }, + }, }, plugins: [], }