Removed manual dark mode

Added dark mode BG color option

docker-entrypoint.sh

@@ -16,5 +16,6 @@ sed -i -e 's/(THEME = ")light(")/'"$1${THEME}$2"'/g' /app/src/variables.ts
 
 # CSS replacement
 sed -i -e 's/(background-color: )theme\(colors\.slate\.50\)/'"$1${BGCOLOR}"'/g' /app/src/tailwind.css
+sed -i -e 's/(background-color: )theme\(colors\.gray\.950\)/'"$1${BGCOLORDARK}"'/g' /app/src/tailwind.css
 
 exec "$@"

dockerfile

@@ -15,7 +15,7 @@ ENV HEADER "true"
 ENV HEADERLINE "true"
 ENV CATEGORIES "normal"
 ENV BGCOLOR "theme(colors.slate.50)"
-ENV THEME "light"
+ENV BGCOLORDARK "theme(colors.gray.950)"
 
 EXPOSE 4173
 

readme.md

@@ -8,7 +8,7 @@
 
 A nice looking homepage for Docker containers or any services and links.
 
-No actual integration with Docker. Loads instantly. No dark theme.
+No actual integration with Docker. Loads instantly. Dark mode follows your OS.
 
 If you make a change to the config JSON, restart this container and refresh.
 
@@ -88,8 +88,8 @@ services:
 			- HEADER=true # defaults to true, set to false to hide the title and logo
 			- 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
+			- BGCOLOR=#fff # defaults to theme(colors.slate.50), set to any hex color or Tailwind color using the theme syntax
+			- BGCOLORDARK=#000 # defaults to theme(colors.gray.950), set to any hex color or Tailwind color using the theme syntax
         volumes:
             - ./config.json:/app/src/config.json # required
             - ./public/favicon.ico:/app/public/favicon.ico # optional

src/components/service-catalogs.tsx

@@ -38,7 +38,7 @@ const ServiceCatalog: React.FunctionComponent<ICatalogProps> = ({ catalog, index
 	let liClassName = "mt-12 first:mt-0 xl:first:mt-6";
 
 	if (catalog.bubble) {
-		liClassName += " bg-white dark:bg-black 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-6 ring-1 ring-slate-900/5 shadow-xl";
 	}
 
 	return (

src/pages/index.tsx

@@ -21,7 +21,7 @@ export const IndexPage: React.FunctionComponent<IProps> = ({ icon, title }) => {
 	}
 
 	return (
-		<div className="min-h-screen dark:bg-gray-950">
+		<div className="min-h-screen">
 			<div className="min-h-screen flex flex-col xl:flex-row max-w-screen-2xl mx-auto">
 				{SHOWHEADER && (
 					<div className={headerClassName}>

src/tailwind.css

@@ -4,6 +4,10 @@
 
 html {
 	background-color: theme(colors.slate.50);
+
+	@media (prefers-color-scheme: dark) {
+		background-color: theme(colors.gray.950);
+	}
 }
 
 body {