Bulldogs-R-Us

1//TAILWIND.CONFIG.TS
2import type { Config } from "tailwindcss";
3
4const config = {
5  darkMode: ["class"],
6  content: [
7    "./pages/**/*.{ts,tsx}",
8    "./components/**/*.{ts,tsx}",
9    "./app/**/*.{ts,tsx}",
10    "./src/**/*.{ts,tsx}",
11  ],
12  prefix: "",
13  theme: {
14    container: {
15      center: true,
16      padding: "2rem",
17      screens: {
18        "2xl": "1400px",
19      },
20    },
21    extend: {
22      colors: {
23        border: "hsl(var(--border))",
24        input: "hsl(var(--input))",
25        ring: "hsl(var(--ring))",
26        background: "hsl(var(--background))",
27        foreground: "hsl(var(--foreground))",
28        
29        //START HERE
30        primary: "var(--color-primary",
31        secondary: "var(--color-secondary)",
32        bgPrimary: "var(--color-bg-primary)",
33        tBase: "var(--color-text-base)",
34        //END HERE
35
36      },
37    },
38  },
39  plugins: [require("tailwindcss-animate")],
40} satisfies Config;
41
42export default config;

1//GLOBALS.CSS
2    
3@tailwind base;
4@tailwind components;
5@tailwind utilities;
6
7:root {
8  --foreground-rgb: 0, 0, 0;
9  --background-start-rgb: 214, 219, 220;
10  --background-end-rgb: 255, 255, 255;
11}
12
13//YOU NEED TO ADD THIS:
14@layer base {
15  :root {
16  //START 
17    --color-primary: hsl(0,0%, 0%);
18    --color-secondary: hsl(0,0%, 50%);
19    --color-text-base: hsl(0,0%, 100%);
20    --color-bg-primary: hsl(0,0%, 100%);
21  //END
22  }
23}
24...
25AND THIS:
26//(still in your @layer base)
27//START
28.theme-Black {
29  --color-primary: hsl(0,0%, 0%);
30  --color-secondary: hsl(0,0%, 50%);
31}
32
33.theme-Red {
34  --color-primary: hsl(25,100%, 50%);
35  --color-secondary: hsl(0,100%, 65%);
36}
37
38.theme-Purple {
39  --color-primary: hsl(270,100%, 50%);
40  --color-secondary: hsl(270,100%, 75%);
41}
42
43.theme-Green {
44  --color-primary: hsl(25,100%, 35%);
45  --color-secondary: hsl(120,100%, 45%);
46}
47
48.theme-Blue {
49  --color-primary: hsl(220,100%, 50%);
50  --color-secondary: hsl(220,100%, 75%);
51}
52//END

1//PAGE.TSX
2'use client'
3
4import Image from "next/image";
5import React from 'react';
6import Photo from "../../public/img.png";
7import {useState} from 'react'
8
9//DECLARE AN ARRAY OF COLOR NAMES, WHICH ARE ACTUALLY THE SECOND NAMES OF YOUR THEMES FROM GLOBALS.CSS (".theme-Black")
10const themes = ["Black", "Red", "Purple", "Green", "Blue"];
11
12export default function cssThemeStarter() {
13
14    //DECLARE YOUR themes ARRAY INTO REACT STATE
15    const [theme, setTheme] = useState<string>(themes[0]);
16
17    return (
18        //THIS IS IMPORTANT - USE A STRING LITERAL (BACK TICKS) TO DEFINE YOUR CLASSNAMES AND DYNAMICALLY ASSIGN THE 
19        //THEME VALUE AT THE END OF THIS MAIN TAGS CLASSNAME ATTRIBUTE (CLEAN UP SPACE CHARS AROUND THEME-$...)
20        <main className={'flex flex-col gap-16 min-h-screen p-24 bg-bgPrimary theme- $ {theme}' }>
21            <div className="flex flex-col">
22                <h3 className="font-semibold">Click to choose your theme:</h3>
23                //MAP OVER THE THEMES ARRAY TO DISPLAY THE COLORS SO USER CAN CLICK (I'm using text here, add buttons as you like)
24                <div className="flex gap-4">
25                    {themes.map((t) => (
26                        <div className="cursor-pointer" style={{color:t}} key={t} onClick={() => setTheme(t)}>
27                            {t}
28                        </div>
29                    ))}
30                </div>
31            </div>
32            <div className="grid grid-cols-12 gap-8">
33                <div className="col-start-1 col-span-6 relative aspect-video rounded-lg">
34                    <Image src={Photo} alt="Image" height={220} width={400} className="rounded-md"  />
35                    
36                    //YOU'LL NEED TO ADD THE HOVER PROPERTY TO TAKE ADVANTAGE OF YOUR SELECTED THEME
37                    <div className="absolute inset-0 bg-transparent hover:bg-secondary opacity-50" />
38                </div>
39                <div className="col-start-7  col-span-7 flex flex-col items-start">
40                    //ADD "SECONDARY" TO ENSURE TEXT CHANGES COLOR WITH THEME SELECTIONS
41                    <h1 className="text-secondary font-bold text-4xl pb-3">
42                        Bulldogs-R-Us
43                    </h1>
44                    <p className="flex-2 text-sm pb-3">
45                        The Mighty Bulldog who has long been confused as an icon of fear, dominance and intimidation 
46                        is actually one of the most docile and loving breeds available today.
47                        Amicable and affectionate, the irony is not lost on this breed that was originally bred 
48                        for bull baiting back in the 1600's. Today their reputation of loyalty and affection - especially 
49                        towards children - makes them a fine and sought-after companion.
50                    </p>
51                    <div className="flex gap-4">
52                    //THESE BUTTONS HAVE ALSO BEEN ENHANCED WITH THE SECONDARY STYLE DECLARATION OF THE SELECTED 
53                    //THEME (BACKGROUND, BORDER AND TEXT COLOR)
54                        <button className="bg-secondary border-secondary hover:bg-secondary text-tBase font-medium px-6 py-2 rounded-md">
55                            Adopt Now
56                        </button>
57                        <button className="bg-bgPrimary border-secondary border-2 hover:border-primary font-medium px-6 py-2 rounded-md">
58                            Explore
59                        </button>
60                    </div>
61                </div>
62            </div>
63        </main>
64    );
65}