From ba2111621016f0b916fd2787e746afa42cfa50ab Mon Sep 17 00:00:00 2001 From: Stefan Imhoff Date: Thu, 23 Feb 2023 19:51:50 +0100 Subject: [PATCH] feat(astro): add theme provider for dark mode --- src/components/ThemeProvider.astro | 26 +++++++++++++++++++++ src/layouts/Layout.astro | 36 +++++++++++++++--------------- src/pages/index.astro | 4 +++- tailwind.config.cjs | 32 ++++++++++++++++++++++++++ 4 files changed, 79 insertions(+), 19 deletions(-) create mode 100644 src/components/ThemeProvider.astro diff --git a/src/components/ThemeProvider.astro b/src/components/ThemeProvider.astro new file mode 100644 index 0000000..718bfa3 --- /dev/null +++ b/src/components/ThemeProvider.astro @@ -0,0 +1,26 @@ +--- +--- + + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 775aba3..8982ad6 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -2,6 +2,7 @@ import '../styles/global.css'; import { Sprite } from 'astro-icon'; +import ThemeProvider from '../components/ThemeProvider.astro'; export interface Props { title: string; } @@ -10,10 +11,7 @@ const { title, frontmatter } = Astro.props; --- - + @@ -33,21 +31,24 @@ const { title, frontmatter } = Astro.props; + - +
+ - - diff --git a/src/pages/index.astro b/src/pages/index.astro index c966d60..e80f993 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,4 +2,6 @@ import Layout from '../layouts/Layout.astro'; --- -Homepage + +

Homepage

+ diff --git a/tailwind.config.cjs b/tailwind.config.cjs index f2809d0..810a0b0 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -1,6 +1,7 @@ /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], + darkMode: 'class', theme: { extend: { screens: { @@ -10,6 +11,7 @@ module.exports = { '3xl': '1800px', // --wide }, colors: { + accent: '#e60510', shibui: { 50: '#f3f3f1', 100: '#e6e6e3', // bg (light), fg (dark, 0.87 alpha) @@ -40,6 +42,36 @@ module.exports = { gridTemplateRows: ({ theme }) => ({ layout: `clamp(3rem, ${theme('spacing.55')}, 9rem)`, }), + columns: { + 13: '13', + 14: '14', + 15: '15', + 16: '16', + 17: '17', + 18: '18', + }, + gridColumn: { + 'span-13': 'span 13 / span 13', + 'span-14': 'span 14 / span 14', + 'span-15': 'span 15 / span 15', + 'span-16': 'span 16 / span 16', + 'span-17': 'span 17 / span 17', + 'span-18': 'span 18 / span 18', + }, + gridColumnStart: { + 14: '14', + 15: '15', + 16: '16', + 17: '17', + 18: '18', + }, + gridColumnEnd: { + 14: '14', + 15: '15', + 16: '16', + 17: '17', + 18: '18', + }, borderRadius: { 1: '2px', // --radius-1 2: '5px', // --radius-2