Added natural dark mode

docker-entrypoint.sh

@@ -12,9 +12,9 @@ sed -i -e 's/(PAGEICON = ")\/logo\.png(")/'"$1${LOGO}$2"'/g' /app/src/variables.
 sed -i -e 's/(SHOWHEADER = )true/'"$1${HEADER}"'/g' /app/src/variables.ts
 sed -i -e 's/(SHOWHEADERLINE = )true/'"$1${HEADERLINE}"'/g' /app/src/variables.ts
 sed -i -e 's/(CATEGORIES = ")normal(")/'"$1${CATEGORIES}$2"'/g' /app/src/variables.ts
+sed -i -e 's/(THEME = ")light(")/'"$1${THEME}$2"'/g' /app/src/variables.ts
 
 # CSS replacement
-sed -i -e 's/(background-color: )#f8fafc/'"$1${BGCOLOR}"'/g' /app/src/tailwind.css
- #f8fafc
+sed -i -e 's/(background-color: )theme\(colors\.slate\.50\)/'"$1${BGCOLOR}"'/g' /app/src/tailwind.css
 
 exec "$@"

dockerfile

@@ -14,7 +14,8 @@ ENV LOGO "/logo.png"
 ENV HEADER "true"
 ENV HEADERLINE "true"
 ENV CATEGORIES "normal"
-ENV BGCOLOR "#f8fafc"
+ENV BGCOLOR "theme(colors.slate.50)"
+ENV THEME "light"
 
 EXPOSE 4173
 

readme.md

@@ -89,6 +89,7 @@ services:
 			- HEADERLINE=true # defaults to true, set to false to turn off the header border line
 			- CATEGORIES=small # defaults to normal, set to small for smaller, uppercase category labels
 			- BGCOLOR=#fff # defaults to theme(colors.slate.50), set to any hex color or Tailwind color using the theme syntax (e.g. BGCOLOR=theme(colors.sky.100) for bg-sky-100)
+			- THEME=light # defaults to light, set to dark for dark mode
         volumes:
             - ./config.json:/app/src/config.json # required
             - ./public/favicon.ico:/app/public/favicon.ico # optional

src/components/service-catalogs.tsx

@@ -23,22 +23,22 @@ interface ICatalogProps {
 }
 
 const ServiceCatalog: React.FunctionComponent<ICatalogProps> = ({ catalog, index }) => {
-	let categoryClassName = "";
+	let categoryClassName = "dark:text-slate-200";
 
 	switch (CATEGORIES as string) {
 		case "small":
-			categoryClassName = "text-sm text-slate-800 font-semibold py px-4 uppercase";
+			categoryClassName += " text-sm text-slate-800 font-semibold py px-4 uppercase";
 			break;
 		case "normal":
 		default:
-			categoryClassName = "text-2xl text-slate-600 font-light py-2 px-4";
+			categoryClassName += " text-2xl text-slate-600 font-light py-2 px-4";
 			break;
 	}
 
 	let liClassName = "mt-12 first:mt-0 xl:first:mt-6";
 
 	if (catalog.bubble) {
-		liClassName += " bg-white rounded-2xl px-6 py-8 ring-1 ring-slate-900/5 shadow-xl";
+		liClassName += " bg-white dark:bg-black rounded-2xl px-6 py-8 ring-1 ring-slate-900/5 shadow-xl";
 	}
 
 	return (

src/components/services.tsx

@@ -47,7 +47,7 @@ const Service: React.FunctionComponent<IServiceProps> = ({ service, index }) =>
 					</a>
 				</h3>
 				{!is.null(description) && (
-					<p className="text-sm text-black/50 line-clamp-1">
+					<p className="text-sm text-black/50 dark:text-white/50 line-clamp-1">
 						<a href={uri} target="_blank">
 							{description}
 						</a>

src/pages/index.tsx

@@ -16,18 +16,21 @@ export const IndexPage: React.FunctionComponent<IProps> = ({ icon, title }) => {
 	let headerClassName = "w-full xl:w-auto xl:max-w-xs xl:min-h-screen p-4";
 
 	if (SHOWHEADERLINE) {
-		headerClassName += "border-0 border-solid border-b xl:border-r xl:border-b-0 border-gray-300";
+		headerClassName +=
+			"border-0 border-solid border-b xl:border-r xl:border-b-0 border-gray-300 dark:border-gray-700";
 	}
 
 	return (
-		<div className="min-h-screen flex flex-col xl:flex-row max-w-screen-2xl mx-auto">
-			{SHOWHEADER && (
-				<div className={headerClassName}>
-					<Header title={title} icon={icon} />
+		<div className="min-h-screen dark:bg-gray-950">
+			<div className="min-h-screen flex flex-col xl:flex-row max-w-screen-2xl mx-auto">
+				{SHOWHEADER && (
+					<div className={headerClassName}>
+						<Header title={title} icon={icon} />
+					</div>
+				)}
+				<div className="min-h-screen p-4 flex-grow">
+					<ServiceCatalogList catalogs={mySerices} />
 				</div>
-			)}
-			<div className="min-h-screen p-4 flex-grow">
-				<ServiceCatalogList catalogs={mySerices} />
 			</div>
 		</div>
 	);

src/tailwind.css

@@ -8,6 +8,10 @@ html {
 
 body {
 	min-height: 100vh;
+
+	@media (prefers-color-scheme: dark) {
+		color: theme(colors.slate.200);
+	}
 }
 
 h1 {

src/variables.ts

@@ -3,3 +3,4 @@ export const PAGEICON = "/logo.png";
 export const SHOWHEADER = true;
 export const SHOWHEADERLINE = true;
 export const CATEGORIES = "small";
+export const THEME = "light";