124 lines
4.4 KiB
TypeScript
124 lines
4.4 KiB
TypeScript
import React from 'react';
|
|
import config from '../lib/config.json';
|
|
|
|
const Theme: React.FC = () => {
|
|
const headerFont = config.brand.fonts.header;
|
|
const bodyFont = config.brand.fonts.body;
|
|
const primaryColor = config.brand.colors.primary;
|
|
const secondaryColor = config.brand.colors.secondary;
|
|
|
|
return (
|
|
<>
|
|
{/* Font Imports */}
|
|
<link
|
|
href={`https://fonts.googleapis.com/css2?family=${headerFont}:wght@400;500;600;700;800&display=swap`}
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
href={`https://fonts.googleapis.com/css2?family=${bodyFont}:wght@300;400;500;600;700&display=swap`}
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
{/* Tailwind Browser Script */}
|
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4?plugins=typography,forms"></script>
|
|
|
|
{/* Theme Styles */}
|
|
<style type="text/tailwindcss">
|
|
{`
|
|
@theme {
|
|
/* Background and foreground */
|
|
--color-background: hsl(0 0% 100%);
|
|
--color-foreground: hsl(222.2 84% 4.9%);
|
|
|
|
/* Card */
|
|
--color-card: hsl(0 0% 100%);
|
|
--color-card-foreground: hsl(222.2 84% 4.9%);
|
|
|
|
/* Popover */
|
|
--color-popover: hsl(0 0% 100%);
|
|
--color-popover-foreground: hsl(222.2 84% 4.9%);
|
|
|
|
/* Primary */
|
|
--color-primary: ${primaryColor};
|
|
--color-primary-foreground: hsl(210 40% 98%);
|
|
|
|
/* Secondary */
|
|
--color-secondary: ${secondaryColor};
|
|
--color-secondary-foreground: hsl(222.2 47.4% 11.2%);
|
|
|
|
/* Muted */
|
|
--color-muted: hsl(210 40% 96.1%);
|
|
--color-muted-foreground: hsl(215.4 16.3% 46.9%);
|
|
|
|
/* Accent */
|
|
--color-accent: hsl(210 40% 96.1%);
|
|
--color-accent-foreground: hsl(222.2 47.4% 11.2%);
|
|
|
|
/* Destructive */
|
|
--color-destructive: hsl(0 84.2% 60.2%);
|
|
--color-destructive-foreground: hsl(210 40% 98%);
|
|
|
|
/* Border, input, ring */
|
|
--color-border: hsl(214.3 31.8% 91.4%);
|
|
--color-input: hsl(214.3 31.8% 91.4%);
|
|
--color-ring: hsl(222.2 84% 4.9%);
|
|
|
|
/* Sidebar */
|
|
--color-sidebar: hsl(0 0% 98%);
|
|
--color-sidebar-foreground: hsl(240 5.3% 26.1%);
|
|
--color-sidebar-primary: hsl(240 5.9% 10%);
|
|
--color-sidebar-primary-foreground: hsl(0 0% 98%);
|
|
--color-sidebar-accent: hsl(240 4.8% 95.9%);
|
|
--color-sidebar-accent-foreground: hsl(240 5.9% 10%);
|
|
--color-sidebar-border: hsl(220 13% 91%);
|
|
--color-sidebar-ring: hsl(217.2 91.2% 59.8%);
|
|
|
|
/* Border radius */
|
|
--radius-sm: 0.25rem;
|
|
--radius-md: 0.375rem;
|
|
--radius-lg: 0.5rem;
|
|
--radius-xl: 0.75rem;
|
|
|
|
/* Fonts from config */
|
|
--font-heading: "${headerFont.replace(/\+/g, ' ')}", sans-serif;
|
|
--font-body: "${bodyFont.replace(/\+/g, ' ')}", sans-serif;
|
|
}
|
|
|
|
/* Dark mode */
|
|
.dark {
|
|
--color-background: hsl(222.2 84% 4.9%);
|
|
--color-foreground: hsl(210 40% 98%);
|
|
--color-card: hsl(222.2 84% 4.9%);
|
|
--color-card-foreground: hsl(210 40% 98%);
|
|
--color-popover: hsl(222.2 84% 4.9%);
|
|
--color-popover-foreground: hsl(210 40% 98%);
|
|
--color-primary: hsl(210 40% 98%);
|
|
--color-primary-foreground: hsl(222.2 47.4% 11.2%);
|
|
--color-secondary: hsl(217.2 32.6% 17.5%);
|
|
--color-secondary-foreground: hsl(210 40% 98%);
|
|
--color-muted: hsl(217.2 32.6% 17.5%);
|
|
--color-muted-foreground: hsl(215 20.2% 65.1%);
|
|
--color-accent: hsl(217.2 32.6% 17.5%);
|
|
--color-accent-foreground: hsl(210 40% 98%);
|
|
--color-destructive: hsl(0 62.8% 30.6%);
|
|
--color-destructive-foreground: hsl(210 40% 98%);
|
|
--color-border: hsl(217.2 32.6% 17.5%);
|
|
--color-input: hsl(217.2 32.6% 17.5%);
|
|
--color-ring: hsl(212.7 26.8% 83.9%);
|
|
--color-sidebar: hsl(240 5.9% 10%);
|
|
--color-sidebar-foreground: hsl(240 4.8% 95.9%);
|
|
--color-sidebar-primary: hsl(224.3 76.3% 48%);
|
|
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
--color-sidebar-accent: hsl(240 3.7% 15.9%);
|
|
--color-sidebar-accent-foreground: hsl(240 4.8% 95.9%);
|
|
--color-sidebar-border: hsl(240 3.7% 15.9%);
|
|
--color-sidebar-ring: hsl(217.2 91.2% 59.8%);
|
|
}
|
|
`}
|
|
</style>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Theme;
|