personal-website/src/style/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/*
Light Mode: https://www.realtimecolors.com/dashboard?colors=161618-f0f0f0-FFE500-dbddff-6120cf&fonts=Poppins-Poppins 
Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5-390068-ffe500&fonts=Poppins-Poppins
*/
@layer base {
    :root {
        /*
            Light mode
        */
        --light-color-bkg: 0deg, 0%, 94%;
        --light-color-bkgNavbar: 0deg, 0%, 50%;
        --light-color-content: 240deg, 4%, 9%;
        --light-color-primary: 54deg, 100%, 50%;
        --light-color-secondary: 237deg, 100%, 93%;
        --light-color-accent: 262deg, 73%, 47%;
        --light-color-accent-red: 0deg, 84%, 60%;
        --light-prose-pink: 336deg, 93%, 16%;

        --light-background: 0 0% 100%;
        --light-foreground: 222.2 47.4% 11.2%;
        --light-input: 214.3 31.8% 91.4%;
        --light-muted: 210 40% 96.1%;
        --light-muted-foreground: 215 17% 34%;
        --light-popover: 0 0% 100%; 
        --light-popover-foreground: 222.2 47.4% 11.2%; 
        --light-border: 214.3 31.8% 91.4%;
        --light-card: 0 0% 100%;
        --light-card-foreground: 222.2 47.4% 11.2%;
        --light-destructive: 0 100% 50%;
        --light-destructive-foreground: 210 40% 98%;
        --light-ring: 215 20.2% 65.1%;
        --light-radius: 0.5rem;

        /*
            Dark mode colours
        */
        --dark-color-bkg: 0deg, 0%, 6%;
        --dark-color-bkgNavbar: 0deg, 0%, 13%;
        --dark-color-content: 240deg, 4%, 91%;
        --dark-color-primary: 262deg, 77%, 44%;
        --dark-color-secondary: 273deg, 100%, 20%;
        --dark-color-accent: 54deg, 100%, 50%;
        --dark-color-accent-red: 0deg, 84%, 60%;
        --dark-prose-pink: 191deg, 51%, 53%;

        --dark-background: 224 71% 4%;
        --dark-foreground: 213 31% 91%;
        --dark-input: 216 34% 17%;
        --dark-muted: 0 0% 15%;
        --dark-muted-foreground: 215.4 31% 71%;
        --dark-popover: 224 71% 4%; 
        --dark-popover-foreground: 215 20.2% 65.1%; 
        --dark-border: 9 20% 21%;
        --dark-card: 0 0% 15%;
        --dark-card-foreground: 213 31% 91%;
        --dark-destructive: 0 63% 31%;
        --dark-destructive-foreground: 210 40% 98%;
        --dark-ring: 216 34% 17%;
        --dark-radius: 0.5rem;

        /* DEFAULT to light mode */
        --color-bkg: var(--light-color-bkg);
        --color-bkgNavbar: var(--light-color-bkgNavbar);
        --color-content: var(--light-color-content);
        --color-primary: var(--light-color-primary);
        --color-secondary: var(--light-color-secondary);
        --color-accent: var(--light-color-accent);
        --color-accent-red: var(--light-color-accent-red);
        --prose-pink: var(--light-prose-pink);

        --background: var(--light-background);
        --foreground: var(--light-foreground);
        --input: var(--light-input);
        --muted: var(--light-muted);
        --muted-foreground: var(--light-foreground);
        --popover: var(--light-popover);
        --popover-foreground: var(--light-popover-foreground);
        --border: var(--light-border);
        --card: var(--light-card);
        --card-foreground: var(--light-card-foreground);
        --destructive: var(--light-destructive);
        --destructive-foreground: var(--light-destructive-foreground);
        --ring: var(--light-ring);
        --radius: var(--light-radius);
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --color-bkg: var(--dark-color-bkg);
            --color-bkgNavbar: var(--dark-color-bkgNavbar);
            --color-content: var(--dark-color-content);
            --color-primary: var(--dark-color-primary);
            --color-secondary: var(--dark-color-secondary);
            --color-accent: var(--dark-color-accent);
            --color-accent-red: var(--dark-color-accent-red);
            --prose-pink: var(--dark-prose-pink);
    
            --background: var(--dark-background);
            --foreground: var(--dark-foreground);
            --input: var(--dark-input);
            --muted: var(--dark-muted);
            --muted-foreground: var(--dark-muted-foreground);
            --popover: var(--dark-popover);
            --popover-foreground: var(--dark-popover-foreground);
            --border: var(--dark-border);
            --card: var(--dark-card);
            --card-foreground: var(--dark-card-foreground);
            --destructive: var(--dark-destructive);
            --destructive-foreground: var(--dark-destructive-foreground);
            --ring: var(--dark-ring);
            --radius: var(--dark-radius);
        }
    }

    :root[data-theme="theme_dark"] {
        --color-bkg: var(--dark-color-bkg);
        --color-bkgNavbar: var(--dark-color-bkgNavbar);
        --color-content: var(--dark-color-content);
        --color-primary: var(--dark-color-primary);
        --color-secondary: var(--dark-color-secondary);
        --color-accent: var(--dark-color-accent);
        --color-accent-red: var(--dark-color-accent-red);
        --prose-pink: var(--dark-prose-pink);

        --background: var(--dark-background);
        --foreground: var(--dark-foreground);
        --input: var(--dark-input);
        --muted: var(--dark-muted);
        --muted-foreground: var(--dark-muted-foreground);
        --popover: var(--dark-popover);
        --popover-foreground: var(--dark-popover-foreground);
        --border: var(--dark-border);
        --card: var(--dark-card);
        --card-foreground: var(--dark-card-foreground);
        --destructive: var(--dark-destructive);
        --destructive-foreground: var(--dark-destructive-foreground);
        --ring: var(--dark-ring);
        --radius: var(--dark-radius);
    }

    :root[data-theme="theme_light"] {
        --color-bkg: var(--light-color-bkg);
        --color-bkgNavbar: var(--light-color-bkgNavbar);
        --color-content: var(--light-color-content);
        --color-primary: var(--light-color-primary);
        --color-secondary: var(--light-color-secondary);
        --color-accent: var(--light-color-accent);
        --color-accent-red: var(--light-color-accent-red);
        --prose-pink: var(--light-prose-pink);

        --background: var(--light-background);
        --foreground: var(--light-foreground);
        --input: var(--light-input);
        --muted: var(--light-muted);
        --muted-foreground: var(--light-foreground);
        --popover: var(--light-popover);
        --popover-foreground: var(--light-popover-foreground);
        --border: var(--light-border);
        --card: var(--light-card);
        --card-foreground: var(--light-card-foreground);
        --destructive: var(--light-destructive);
        --destructive-foreground: var(--light-destructive-foreground);
        --ring: var(--light-ring);
        --radius: var(--light-radius);
    }
}