centralize the theming

README.md

@@ -9,6 +9,7 @@
 
 - Node.js & Express
 - PostgreSQL
+- Prisma
 
 #### Containerization:
 
@@ -18,4 +19,4 @@
 
 - Tailwind CSS
 
-You can find a production build of the app at https://recipe-app.fredzernia.com
+I have a production build of the app hosted in docker served with caddy on a vps running nixos that you can access here: https://recipe-app.fredzernia.com

backend/Dockerfile

@@ -4,7 +4,7 @@ WORKDIR /usr/src/app
 
 COPY package*.json ./
 
-RUN if [ "$NODE_ENV" = "dev" ]; then npm install; else npm install --only=production; fi
+RUN if [ "$NODE_ENV" = "dev" ]; then npm install; else npm install --omit=dev; fi
 
 COPY . .
 

backend/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
-    "dev": "nodemon ./src/index.js",
+    "dev": "nodemon ./src/index.ts",
     "production": "tsc && node ./dist/index.js",
     "demo": "tsc && node ./dist/index.js"
   },

frontend/Dockerfile

@@ -4,7 +4,7 @@ WORKDIR /usr/src/app
 
 COPY package*.json ./
 
-RUN if [ "$NODE_ENV" = "dev" ]; then npm install; else npm install --only=production; fi
+RUN if [ "$NODE_ENV" = "dev" ]; then npm install; else npm install --omit=dev; fi
 
 COPY . .
 

frontend/package-lock.json

@@ -8,17 +8,17 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
-        "@types/node": "^24.2.0",
-        "autoprefixer": "^10.4.21",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-router-dom": "^7.6.3"
       },
       "devDependencies": {
         "@eslint/js": "^9.29.0",
+        "@types/node": "^24.2.0",
         "@types/react": "^19.1.8",
         "@types/react-dom": "^19.1.6",
         "@vitejs/plugin-react": "^4.5.2",
+        "autoprefixer": "^10.4.21",
         "eslint": "^9.29.0",
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-refresh": "^0.4.20",
@@ -1469,6 +1469,7 @@
       "version": "24.2.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.2.0.tgz",
       "integrity": "sha512-3xyG3pMCq3oYCNg7/ZP+E1ooTaGB4cG8JWRsqqOYQdbWNY4zbaV0Ennrd7stjiJEFZCaybcIgpTjJWHRfBSIDw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~7.10.0"
@@ -1893,6 +1894,7 @@
       "version": "10.4.21",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
       "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -1974,6 +1976,7 @@
       "version": "4.25.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
       "integrity": "sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -2026,6 +2029,7 @@
       "version": "1.0.30001727",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001727.tgz",
       "integrity": "sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -2235,6 +2239,7 @@
       "version": "1.5.180",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.180.tgz",
       "integrity": "sha512-ED+GEyEh3kYMwt2faNmgMB0b8O5qtATGgR4RmRsIp4T6p7B8vdMbIedYndnvZfsaXvSzegtpfqRMDNCjjiSduA==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
@@ -2290,6 +2295,7 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
       "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -2632,6 +2638,7 @@
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
       "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "*"
@@ -3135,6 +3142,7 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
       "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3160,6 +3168,7 @@
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
       "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/normalize-path": {
@@ -3176,6 +3185,7 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
       "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -3326,6 +3336,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -3365,6 +3376,7 @@
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
       "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3507,6 +3519,7 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/prelude-ls": {
@@ -3810,6 +3823,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -4174,12 +4188,14 @@
       "version": "7.10.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.10.0.tgz",
       "integrity": "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
       "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",

frontend/src/App.css

@@ -7,5 +7,5 @@
 }
 
 .page-outer {
-  @apply bg-amber-100 border border-amber-200 rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif;
+  @apply bg-[var(--color-primaryBg)] border border-[var(--color-primaryBorder)] rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif;
 }

frontend/src/components/AddBulkIngredients.tsx

@@ -35,7 +35,7 @@ const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, on
 
   return (
     <div>
-      <h3 className="text-xl font-bold">Ingredients:</h3>
+      <h3 className="text-xl font-bold text-[var(--color-secondaryTextDark)]">Ingredients:</h3>
       <textarea
         rows={8}
         value={textValue}
@@ -43,7 +43,7 @@ const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, on
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
         placeholder="Enter ingredients separated by new line"
-        className="mb-4 p-2 border border-gray-300 rounded w-full"
+        className="mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
       />
     </div>
   );

frontend/src/components/AddBulkSteps.tsx

@@ -47,7 +47,7 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
 
   return (
     <div>
-      <h3 className="text-xl font-bold">Steps:</h3>
+      <h3 className="text-xl font-bold text-[var(--color-secondaryTextDark)]">Steps:</h3>
       <textarea
         rows={8}
         value={textValue}
@@ -55,7 +55,7 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
         placeholder="Enter steps separated by new line"
-        className="mb-4 p-2 border border-gray-300 rounded w-full"
+        className="mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
       />
     </div>
   );

frontend/src/components/CookbookRecipeTile.tsx

@@ -6,14 +6,14 @@ import TimeDisplay from "../components/TimeDisplay.tsx"
 function CookbookRecipeTile({ recipe }: { recipe: RecipeSmall }) {
 
   return (
-    <div className="recipe-card m-2 bg-amber-200 p-4 rounded shadow">
+    <div className="recipe-card m-2 bg-[var(--color-secondaryBg)] p-4 rounded shadow">
       <div className="flex justify-between items-center recipe-name">
-        <h3 className="font-bold text-xl"><Link to={`/recipe/${recipe.id}`} className="text-blue-500">{recipe.name}</Link></h3>
+        <h3 className="font-bold text-xl"><Link to={`/recipe/${recipe.id}`} className="text-[var(--color-textLink)]">{recipe.name}</Link></h3>
-        <div className="ar-button bg-amber-600 text-white py-0 px-2 rounded m-2">
+        <div className="ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-0 px-2 rounded m-2">
           {recipe.cuisine}
         </div>
       </div>
-      <div className="flex justify-between items-center">
+      <div className="flex justify-between items-center text-[var(--color-textDark)]">
         ⏰ <TimeDisplay minutes={recipe.prep_minutes + recipe.cook_minutes} />
         <StarRating rating={recipe.stars} onRatingChange={() => { }} />
       </div>

frontend/src/components/DemoModal.tsx

@@ -11,14 +11,14 @@ const DemoModal = ({ isOpen, onClose, closeModal }: DemoModalProps) => {
 
   return (
     <div className={`z-50 modal-overlay fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center`} onClick={onClose}>
-      <div className="modal-content bg-amber-200 p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
+      <div className="modal-content bg-[var(--color-primaryBg)] p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
         <div className="modal-msg">
           <p>Thanks for checking out my app! Database write operations are disabled in demo mode.</p>
-          <p><a className="text-blue-600" href="mailto:access@fredzernia.com">access@fredzernia.com</a> to request access to the production build</p>
+          <p><a className="text-[var(--color-textLink)]" href="mailto:access@fredzernia.com">access@fredzernia.com</a> to request access to the production build</p>
           <p>Find out more about this app <Link to={'/about'} className="text-blue-600">here</Link></p>
         </div>
         <div className="modal-buttons">
-          <button className="bg-amber-600 rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={closeModal}>OK</button>
+          <button className="bg-[var(--color-buttonBg)] rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={closeModal}>OK</button>
         </div>
       </div>
     </div>

frontend/src/components/Modal.tsx

@@ -11,13 +11,13 @@ const Modal = ({ isOpen, onClose, message, confirmAction, cancelAction }: ModalP
 
   return (
     <div className={`z-50 modal-overlay fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center`} onClick={onClose}>
-      <div className="modal-content bg-amber-200 p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
+      <div className="modal-content bg-[var(--color-secondaryBg)] p-12 rounded-md shadow-md" onClick={(e) => e.stopPropagation()}>
         <div className="modal-msg">
           <span aria-labelledby="message">{message}</span>
         </div>
         <div className="modal-buttons">
-          <button className="bg-amber-600 rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={confirmAction}>Yes, Delete</button>
+          <button className="bg-[var(--color-buttonBg)] rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={confirmAction}>Yes, Delete</button>
-          <button className="bg-amber-600 rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={cancelAction}>Cancel</button>
+          <button className="bg-[var(--color-buttonBg)] rounded-md m-4 pt-1 pb-1 pr-2 pl-2" onClick={cancelAction}>Cancel</button>
         </div>
       </div>
     </div>

frontend/src/components/RecipeBookTabs.tsx

@@ -1,10 +1,12 @@
 import { useState, useEffect } from "react";
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from "react-router-dom";
 import { getRecipes } from "../services/frontendApi.js";
 
 const RecipeBookTabs = () => {
   const location = useLocation();
-  const [lastViewedRecipeId, setLastViewedRecipeId] = useState<number | null>(null);
+  const [lastViewedRecipeId, setLastViewedRecipeId] = useState<number | null>(
+    null,
+  );
 
   const loadRandomRecipeId = async () => {
     try {
@@ -14,7 +16,7 @@ const RecipeBookTabs = () => {
         setLastViewedRecipeId(recipes[randomIndex].id);
       }
     } catch (error) {
-      console.error('Error loading recipes:', error);
+      console.error("Error loading recipes:", error);
     }
   };
 
@@ -33,54 +35,61 @@ const RecipeBookTabs = () => {
     }
   }, []);
 
-
   const tabs = [
-    { id: '/', label: 'Cookbook', icon: '📚' },
+    { id: "/", label: "Cookbook", icon: "📚" },
-    { id: `/recipe/${lastViewedRecipeId}`, label: 'Recipe', icon: '🥗' },
+    { id: `/recipe/${lastViewedRecipeId}`, label: "Recipe", icon: "🥗" },
-    { id: '/add-recipe', label: 'Add', icon: '➕' },
+    { id: "/add-recipe", label: "Add", icon: "➕" },
-    { id: '/about', label: 'About', icon: '🍽️' },
+    { id: "/about", label: "About", icon: "🍽️" },
   ];
 
   return (
-    <div className="bg-amber-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
+    <div className="bg-[var(--color-backdrop)] h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
       <div className="relative h-full">
-        <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-amber-200"></div>
+        <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--color-primaryBg)]"></div>
 
         <div className="flex space-x-1 px-6 pt-4 h-full items-end justify-center">
           {tabs.map((tab) => {
-            const isActive = location.pathname === tab.id || (location.pathname.startsWith(tab.id) && tab.id === "/recipe/");
+            const isActive =
+              location.pathname === tab.id ||
+              (location.pathname.startsWith(tab.id) && tab.id === "/recipe/");
 
             return (
               <Link
                 key={tab.id}
                 to={tab.id}
                 className={`
-                  relative px-3 py-2 md:px-6 md:py-3 rounded-t-lg font-bold text-sm transform text-amber-800
+                  relative px-3 py-2 md:px-6 md:py-3 rounded-t-lg font-bold text-sm transform
                   ${isActive
-                    ? 'bg-amber-100 scale-105 z-10 border-t-2 border-amber-200'
+                    ? "bg-[var(--color-primaryBg)] scale-105 z-10 border-t-2 border-[var(--color-primaryBorder)] text-[var(--color-textDark)]"
-                    : 'bg-amber-200 hover:bg-amber-100 hover:text-amber-700 hover:scale-102 shadow-sm'
+                    : "bg-[var(--color-secondaryBg)] hover:bg-[var(--color-secondaryBgHover)] text-[var(--color-textDark)] hover:scale-102 shadow-sm"
                   }
                   before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5
-                  ${isActive ? '' : ''}
+                  ${isActive ? "" : ""}
                 `}
               >
                 <div className="flex items-center">
-                  <span className={`text-lg pr-2 ${window.innerWidth <= 640 ? 'hidden' : ''}`}>{tab.icon}</span>
+                  <span
+                    className={`text-lg pr-2 ${window.innerWidth <= 640 ? "hidden" : ""}`}
+                  >
+                    {tab.icon}
+                  </span>
                   <span>{tab.label}</span>
                 </div>
 
-                {
+                {isActive && (
-                  isActive && (
                   <>
-                      <div className={`absolute -left-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/' ? 'hidden' : ''}`}>
+                    <div
-                        <div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
+                      className={`absolute -left-2.5 bottom-0 w-2 h-2 bg-[var(--color-primaryBg)] ${location.pathname === "/" ? "hidden" : ""}`}
+                    >
+                      <div className="absolute top-0 left-0 w-2 h-2 bg-[var(--color-secondaryBg)] rounded-br-lg"></div>
                     </div>
-                      <div className={`absolute -right-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/about' ? 'hidden' : ''}`}>
+                    <div
-                        <div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
+                      className={`absolute -right-2.5 bottom-0 w-2 h-2 bg-[var(--color-primaryBg)] ${location.pathname === "/about" ? "hidden" : ""}`}
+                    >
+                      <div className="absolute top-0 right-0 w-2 h-2 bg-[var(--color-secondaryBg)] rounded-bl-lg"></div>
                     </div>
                   </>
-                  )
+                )}
-                }
               </Link>
             );
           })}

frontend/src/css/colorTheme.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --color-backdrop: #ffffff;
+    --color-primaryBg: #fef3c7;
+    --color-primaryBgHover: #fde68a;
+    --color-primaryBorder: #fde68a;
+    --color-secondaryBg: #fde68a;
+    --color-secondaryBgHover: #fef3c7;
+    --color-secondaryBorder: #0f087c;
+    --color-buttonBg: #d97706;
+    --color-buttonBgHover: #b45309;
+    --color-textDark: #78350f;
+    --color-secondaryTextDark: #2f2f2f;
+    --color-textLight: #ffffff;
+    --color-textLink: #3b82f6;
+  }
+}

frontend/src/pages/About.tsx

@@ -3,17 +3,17 @@ function About() {
   return (
     <div className="about page-outer">
       <div>
-        <h2 className="text-xl">This app uses the following components:</h2>
+        <h2 className="text-xl text-[var(--color-secondaryTextDark)]">This app uses the following components:</h2>
-        <h2 className="mt-4 font-bold text-xl">Frontend:</h2>
+        <h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">Frontend:</h2>
         <ul><li>React</li><li>TypeScript</li></ul>
-        <h2 className="mt-4 font-bold text-xl">Backend:</h2>
+        <h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">Backend:</h2>
-        <ul><li>Node.js & Express</li><li>PostgreSQL</li></ul>
+        <ul><li>Node.js & Express</li><li>PostgreSQL</li><li>Prisma</li></ul>
-        <h2 className="mt-4 font-bold text-xl">Containerization:</h2>
+        <h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">Containerization:</h2>
         <ul><li>Docker</li></ul>
-        <h2 className="mt-4 font-bold text-xl">Styling/UI:</h2>
+        <h2 className="mt-4 font-bold text-xl text-[var(--color-secondaryTextDark)]">Styling/UI:</h2>
         <ul><li>Tailwind CSS</li></ul>
-        <p className="mt-4">More about me <a className="text-blue-600" target="_blank" href="https://fredzernia.com">here</a> |
+        <p className="mt-4 text-[var(--color-secondaryTextDark)]">More about me <a className="text-[var(--color-textLink)]" target="_blank" href="https://fredzernia.com">here</a> |
-          Code for this app <a className="text-blue-600" target="_blank" href="https://forgejo.fredzernia.com/fred/recipe_app">here</a></p>
+          Code for this app <a className="text-[var(--color-textLink)]" target="_blank" href="https://forgejo.fredzernia.com/fred/recipe_app">here</a></p>
       </div>
     </div >
   )

frontend/src/pages/AddRecipe.tsx

@@ -5,6 +5,7 @@ import AddBulkIngredients from "../components/AddBulkIngredients.tsx"
 import AddBulkSteps from "../components/AddBulkSteps.tsx"
 import StarRating from "../components/StarRating.tsx"
 import DemoModal from '../components/DemoModal.tsx'
+import '../css/colorTheme.css';
 
 interface Step {
   step_number: number;
@@ -65,7 +66,7 @@ function AddRecipe() {
         <input
           type="text"
           placeholder="Title"
-          className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
+          className="recipe-name mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
           value={recipeName}
           maxLength={35}
           onChange={(e) => setRecipeName(e.target.value)}
@@ -73,7 +74,7 @@ function AddRecipe() {
         <input
           type="text"
           placeholder="Cuisine"
-          className="recipe-cusine mb-4 p-2 border border-gray-300 rounded w-full"
+          className="recipe-cusine mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
           value={recipeCuisine}
           maxLength={15}
           onChange={(e) => setRecipeCuisine(e.target.value)}
@@ -81,32 +82,32 @@ function AddRecipe() {
         <input
           type="text"
           placeholder="Author"
-          className="recipe-cusine mb-4 p-2 border border-gray-300 rounded w-full"
+          className="recipe-cusine mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
           value={author}
           onChange={(e) => setAuthor(e.target.value)}
         />
         <div className="flex items-center justify-between mb-4">
           <div>
-            <label htmlFor="prepTime" className="mr-2 font-bold">Prep Time:</label>
+            <label htmlFor="prepTime" className="mr-2 font-bold text-[var(--color-secondaryTextDark)]">Prep Time:</label>
             <input
               type="number"
               placeholder="prep time in minutes"
-              className="recipe-cusine p-2 border border-gray-300 rounded w-24"
+              className="recipe-cusine p-2 border border-[var(--color-primaryBorder)] rounded w-24"
               value={prepMinutes}
               onChange={(e) => setPrepMinutes(parseInt(e.target.value))}
             />
-            <span className="ml-2">minutes</span>
+            <span className="ml-2 text-[var(--color-secondaryTextDark)]">minutes</span>
           </div>
           <div>
-            <label htmlFor="cookTime" className="mr-2 font-bold">Cook Time:</label>
+            <label htmlFor="cookTime" className="mr-2 font-bold text-[var(--color-secondaryTextDark)]">Cook Time:</label>
             <input
               type="number"
               placeholder="cook time in minutes"
-              className="recipe-cusine p-2 border border-gray-300 rounded w-24"
+              className="recipe-cusine p-2 border border-[var(--color-primaryBorder)] rounded w-24"
               value={cookMinutes}
               onChange={(e) => setCookMinutes(parseInt(e.target.value))}
             />
-            <span className="ml-2">minutes</span>
+            <span className="ml-2 text-[var(--color-secondaryTextDark)]">minutes</span>
           </div>
           <div>
             <StarRating rating={stars} onRatingChange={(newRating: number) => setStars(newRating)} />
@@ -142,7 +143,7 @@ function AddRecipe() {
           </li>
         ))}
       </ul>*/}
-        <button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
+        <button type="submit" className="ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-2 px-4 rounded hover:bg-[var(--color-buttonBgHover)]">
           submit
         </button>
       </form>

frontend/src/pages/Index.tsx

@@ -1,8 +1,8 @@
 import { useState, useEffect } from "react";
-import CookbookRecipeTile from "../components/CookbookRecipeTile.tsx"
+import CookbookRecipeTile from "../components/CookbookRecipeTile.tsx";
 import { getRecipes } from "../services/frontendApi.js";
-import { type RecipeSmall } from "../types/Recipe.ts"
+import { type RecipeSmall } from "../types/Recipe.ts";
-
+import '../css/colorTheme.css'
 
 function AllRecipes() {
   const [searchQuery, setSearchQuery] = useState("");
@@ -18,13 +18,16 @@ function AllRecipes() {
       try {
         const recipes = await getRecipes();
         setRecipes(recipes);
-        if (process.env.NODE_ENV === 'dev') {
+        if (process.env.NODE_ENV === "dev") {
-          console.log(recipes)
+          console.log(recipes);
         }
-        const uniqueCuisines: string[] = recipes.length > 0
+        const uniqueCuisines: string[] =
-          ? Array.from(new Set(recipes.map((recipe: RecipeSmall) => recipe.cuisine)))
+          recipes.length > 0
+            ? Array.from(
+              new Set(recipes.map((recipe: RecipeSmall) => recipe.cuisine)),
+            )
             : [];
-        setCuisines(uniqueCuisines)
+        setCuisines(uniqueCuisines);
       } catch (error) {
         console.log(error);
         setError("Failed to load recipes...");
@@ -37,38 +40,51 @@ function AllRecipes() {
     }
   }, [shouldFetchRecipes]);
 
-  const filteredRecipes = selectedCuisine ? recipes.filter(recipe => recipe.cuisine === selectedCuisine) : recipes;
+  const filteredRecipes = selectedCuisine
+    ? recipes.filter((recipe) => recipe.cuisine === selectedCuisine)
+    : recipes;
 
   return (
-    <div className="add-recipe-card bg-amber-100 border border-amber-200 rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif">
+    <div className="add-recipe-card bg-[var(--color-primaryBg)] border border-[var(--color-primaryBorder)] rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif">
-      <h1 className="text-center text-3xl sm:text-4xl md:text-5xl font-bold mb-6 text-amber-800">Recipe Index</h1>
+      <h1 className="text-center text-3xl sm:text-4xl md:text-5xl font-bold mb-6 text-[var(--color-textDark)]">
+        Recipe Index
+      </h1>
       <div className="cuisines-buttons flex flex-wrap justify-center">
         <input
           type="text"
           placeholder="search"
-          className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
+          className="recipe-name mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
         />
         {cuisines.map((cuisine) => (
           <button
             key={cuisine}
-            className={`ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700 m-2 ${selectedCuisine === cuisine ? 'selected bg-amber-800' : ''}`}
+            className={`ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-2 px-4 rounded hover:bg-[var(--color-buttonBgHover)] m-2 ${selectedCuisine === cuisine ? "selected bg-[var(--color-buttonBgHover)]" : ""}`}
-            onClick={() => setSelectedCuisine((prevState => prevState === cuisine ? "" : cuisine))}
+            onClick={() =>
+              setSelectedCuisine((prevState) =>
+                prevState === cuisine ? "" : cuisine,
+              )
+            }
           >
             {cuisine}
           </button>
         ))}
-      </div>      {error && <div className="error-message">{error}</div>}
+      </div>{" "}
+      {error && <div className="error-message">{error}</div>}
       {loading ? (
         <div className="loading">Loading...</div>
       ) : (
-        <div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
+        <div className="recipe-outer bg-[var(--color-primaryBg)] p-4 md:p-8 lg:p-12">
           <div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
-            {filteredRecipes.map((recipe) => (
+            {filteredRecipes.map(
-              recipe.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
+              (recipe) =>
+                recipe.name
+                  .toLowerCase()
+                  .includes(searchQuery.toLowerCase()) && (
                   <CookbookRecipeTile recipe={recipe} key={recipe.id} />
-            ))}
+                ),
+            )}
           </div>
         </div>
       )}
@@ -76,4 +92,4 @@ function AllRecipes() {
   );
 }
 
-export default AllRecipes
+export default AllRecipes;

frontend/src/pages/RecipeIngredients.tsx

@@ -28,7 +28,7 @@ function RecipeIngredients() {
       {loading ? (
         <div className="loading">Loading...</div>
       ) : (
-        <div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
+        <div className="recipe-outer bg-[var(--color-primaryBg)] p-4 md:p-8 lg:p-12">
           <div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
             {recipeIngredients.map((ing, idx) => (
               <li key={idx}>{ing}</li>

frontend/src/pages/RecipePage.tsx

@@ -101,34 +101,34 @@ function RecipePage() {
           <div className="m-2">
             <Link
               to="/"
-              className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700"
+              className="ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-2 px-4 rounded hover:bg-[var(--color-buttonBgHover)]"
             >
               Return to Cookbook
             </Link>
           </div>
         </div>
       ) : (
-        <div className="border-b-2 border-amber-300 pb-4">
+        <div className="border-b-2 border-[var(--color-primaryBorder)] pb-4">
           <div className="recipe-card">
             <div className="flex relative justify-between">
               <button
-                onClick={() => {}}
+                onClick={() => { }}
                 className="invisible ar-button py-1 px-1 rounded self-start"
               >
                 🗑️
               </button>
-              <h3 className="text-center max-w-lg px-4 text-2xl lg:text-3xl font-bold text-amber-900">
+              <h3 className="text-center max-w-lg px-4 text-2xl lg:text-3xl font-bold text-[var(--color-textDark)]">
                 {recipe.details.name}
               </h3>
               <button
                 onClick={openModal}
-                className="ar-button bg-amber-500 text-white py-1 px-1 rounded hover:bg-amber-600 self-start"
+                className="ar-button bg-[var(--color-buttonBg)] text-[var(--color-textLight)] py-1 px-1 rounded hover:bg-[var(--color-buttonBgHover)] self-start"
               >
                 🗑️
               </button>
             </div>
             <div className="mt-1">
-              <p className="text-amber-700 italic text-lg">
+              <p className="text-[var(--color-textDark)] italic text-lg">
                 {recipe.details.cuisine}
               </p>
               <p>
@@ -140,22 +140,22 @@ function RecipePage() {
           </div>
 
           <div className="grid lg:grid-cols-2 gap-6 mb-6">
-            <div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
+            <div className="bg-[var(--color-backdrop)] rounded-lg p-4 shadow-sm border border-[var(--color-primaryBorder)]">
-              <h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
+              <h4 className="text-xl font-semibold text-[var(--color-textDark)] mb-3 flex items-center">
                 Ingredients:
               </h4>
               <ul className="space-y-2">
                 {recipe.ingredients.map((ingredient: string, index) => (
-                  <li key={index} className="text-gray-700 flex items-start">
+                  <li key={index} className="text-[var(--color-secondaryTextDark)] flex items-start">
-                    <span className="w-1.5 h-1.5 bg-amber-400 rounded-full mt-2 mr-3 flex-shrink-0"></span>
+                    <span className="w-1.5 h-1.5 bg-[var(--color-buttonBg)] rounded-full mt-2 mr-3 flex-shrink-0"></span>
                     <span className="font-medium text-left">{ingredient}</span>
                   </li>
                 ))}
               </ul>
             </div>
 
-            <div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
+            <div className="bg-[var(--color-backdrop)] rounded-lg p-4 shadow-sm border border-[var(--color-primaryBorder)]">
-              <h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
+              <h4 className="text-xl font-semibold text-[var(--color-textDark)] mb-3 flex items-center">
                 Instructions:
               </h4>
               <ol className="space-y-3">
@@ -163,9 +163,9 @@ function RecipePage() {
                   Object.keys(recipe.steps || {}).map((stepNumber) => (
                     <li
                       key={stepNumber}
-                      className="text-gray-700 flex items-start"
+                      className="text-[var(--color-secondaryTextDark)] flex items-start"
                     >
-                      <span className="bg-amber-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 mt-0.5 flex-shrink-0">
+                      <span className="bg-[var(--color-buttonBg)] text-[var(--color-textLight)] rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 mt-0.5 flex-shrink-0">
                         {recipe.steps[parseInt(stepNumber)].step_number}
                       </span>
                       <span className="leading-relaxed text-left">
@@ -177,8 +177,8 @@ function RecipePage() {
             </div>
           </div>
 
-          <div className="border-t-2 border-amber-300 pt-4">
+          <div className="border-t-2 border-[var(--color-primaryBorder)] pt-4">
-            <div className="flex justify-between items-center text-sm text-amber-600">
+            <div className="flex justify-between items-center text-sm text-[var(--color-textDark)]">
               {isWebSource ? (
                 <span>Source: {recipe.details.author}</span>
               ) : (

frontend/src/pages/RecipeSteps.tsx

@@ -30,7 +30,7 @@ function RecipeSteps() {
       {loading ? (
         <div className="loading">Loading...</div>
       ) : (
-        <div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
+        <div className="recipe-outer bg-[var(--color-primaryBg)] p-4 md:p-8 lg:p-12">
           <div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
             {recipeSteps.map(step => (
               <li key={step.id}>

frontend/tailwind.config.js

@@ -1,12 +1,17 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
   theme: {
+    extend: {
+      colors: {
+        primaryBg: "#fff8dc",
+        secondaryBg: "#87a96b",
+        buttonBg: "#d2691e",
+        darkText: "#2f2f2f",
+        primaryTextColor: "#87a96b",
+      },
+    },
     extend: {},
   },
   plugins: [],
-}
+};
-