Changing dockerfile to accept primary styling

apps/docs/content/docs/3.2-beta/quick-start.mdx

@@ -68,6 +68,9 @@ Choose your storage method based on your needs:
           # - PALMR_UID=1000 # UID for the container processes (default is 1000)
           # - PALMR_GID=1000 # GID for the container processes (default is 1000)
           # - SECURE_SITE=false # Set to true if you are using a reverse proxy
+          # UI Theming (if you don`t use, you can remove)
+          # - PUBLIC_PRIMARY_COLOR_LIGHT=oklch(0.5927 0.1767 142.49)(OPTIONAL - default is (oklch(0.5927 0.1767 142.49))
+          # - PUBLIC_PRIMARY_COLOR_DARK=oklch(0.5927 0.1767 142.49)(OPTIONAL - default is (oklch(0.5927 0.1767 142.49))
           # - DEFAULT_LANGUAGE=en-US # Default language for the application (optional, defaults to en-US)
           # - PRESIGNED_URL_EXPIRATION=3600 # Duration in seconds for presigned URL expiration (optional, defaults to 3600 seconds / 1 hour)
           # - DOWNLOAD_MAX_CONCURRENT=5 # Maximum simultaneous downloads (auto-scales if not set)
@@ -122,6 +125,9 @@ Choose your storage method based on your needs:
           # - PALMR_UID=1000 # UID for the container processes (default is 1000)
           # - PALMR_GID=1000 # GID for the container processes (default is 1000)
           # - SECURE_SITE=false # Set to true if you are using a reverse proxy
+          # UI Theming (if you don`t use, you can remove)
+          # - PUBLIC_PRIMARY_COLOR_LIGHT=oklch(0.5927 0.1767 142.49)(OPTIONAL - default is (oklch(0.5927 0.1767 142.49))
+          # - PUBLIC_PRIMARY_COLOR_DARK=oklch(0.5927 0.1767 142.49)(OPTIONAL - default is (oklch(0.5927 0.1767 142.49))
           # - DEFAULT_LANGUAGE=en-US # Default language for the application (optional, defaults to en-US)
           # - PRESIGNED_URL_EXPIRATION=3600 # Duration in seconds for presigned URL expiration (optional, defaults to 3600 seconds / 1 hour)
           # - DOWNLOAD_MAX_CONCURRENT=5 # Maximum simultaneous downloads (auto-scales if not set)
@@ -177,6 +183,8 @@ Customize Palmr's behavior with these environment variables:
 | `DOWNLOAD_QUEUE_SIZE`           | auto-scale | Maximum queue size for pending downloads                                                                               |
 | `DOWNLOAD_MIN_FILE_SIZE_GB`     | `3.0`      | Minimum file size in GB to activate memory management                                                                  |
 | `DOWNLOAD_AUTO_SCALE`           | `true`     | Enable auto-scaling based on system memory                                                                             |
+| `PUBLIC_PRIMARY_COLOR_LIGHT`    | -          | Allows to set the Primary Color for the light theme                                                                    |
+| `PUBLIC_PRIMARY_COLOR_DARK`     | -          | Allows to set the Primary Color for the dark theme                                                                     |
 
 <Callout type="info">
   **Performance First**: Palmr runs without encryption by default for optimal speed and lower resource usage—perfect for
@@ -237,6 +245,9 @@ Prefer Docker commands over Compose? Here are the equivalent commands:
       # -e PALMR_UID=1000 # UID for the container processes (default is 1000)
       # -e PALMR_GID=1000 # GID for the container processes (default is 1000)
       # -e SECURE_SITE=false # Set to true if you are using a reverse proxy
+      # UI Theming (if you don`t use, you can remove)
+      # - PUBLIC_PRIMARY_COLOR_LIGHT=oklch(0.5927 0.1767 142.49)(OPTIONAL - default is (oklch(0.5927 0.1767 142.49))
+      # - PUBLIC_PRIMARY_COLOR_DARK=oklch(0.5927 0.1767 142.49)(OPTIONAL - default is (oklch(0.5927 0.1767 142.49))
       # -e DEFAULT_LANGUAGE=en-US # Default language for the application (optional, defaults to en-US)
       -p 5487:5487 \
       -p 3333:3333 \
@@ -264,6 +275,9 @@ Prefer Docker commands over Compose? Here are the equivalent commands:
       # -e PALMR_UID=1000 # UID for the container processes (default is 1000)
       # -e PALMR_GID=1000 # GID for the container processes (default is 1000)
       # -e SECURE_SITE=false # Set to true if you are using a reverse proxy
+      # UI Theming (if you don`t use, you can remove)
+      # - PUBLIC_PRIMARY_COLOR_LIGHT=oklch(0.5927 0.1767 142.49)(OPTIONAL - default is (oklch(0.5927 0.1767 142.49))
+      # - PUBLIC_PRIMARY_COLOR_DARK=oklch(0.5927 0.1767 142.49)(OPTIONAL - default is (oklch(0.5927 0.1767 142.49))
       # -e DEFAULT_LANGUAGE=en-US # Default language for the application (optional, defaults to en-US)
       -p 5487:5487 \
       -p 3333:3333 \

apps/web/src/app/globals.css

@@ -52,7 +52,7 @@
   --card-foreground: oklch(0.141 0.005 285.823);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.5927 0.1767 142.49);
+  --primary: var(--primary-light, oklch(0.5927 0.1767 142.49));
   --primary-foreground: oklch(0.982 0.018 155.826);
   --secondary: oklch(0.967 0.001 286.375);
   --secondary-foreground: oklch(0.21 0.006 285.885);
@@ -87,7 +87,7 @@
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.21 0.006 285.885);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.5927 0.1767 142.49);
+  --primary: var(--primary-dark, oklch(0.5927 0.1767 142.49));
   --primary-foreground: oklch(0.393 0.095 152.535);
   --secondary: oklch(0.274 0.006 286.033);
   --secondary-foreground: oklch(0.985 0 0);

apps/web/src/app/layout.tsx

@@ -95,6 +95,9 @@ const workSans = Work_Sans({
   display: "swap",
 });
 
+ const primaryLight = process.env.PUBLIC_PRIMARY_COLOR_LIGHT;
+ const primaryDark = process.env.PUBLIC_PRIMARY_COLOR_DARK;
+
 export default async function RootLayout({
   children,
 }: Readonly<{
@@ -103,6 +106,9 @@ export default async function RootLayout({
   const locale = await getLocale();
   const isRTL = locale === "ar-SA";
 
+  const primaryLight = process.env.NEXT_PUBLIC_PRIMARY_COLOR_LIGHT;
+  const primaryDark = process.env.NEXT_PUBLIC_PRIMARY_COLOR_DARK;
+
   if (typeof window !== "undefined") {
     useAppInfo.getState().refreshAppInfo();
   }
@@ -114,6 +120,10 @@ export default async function RootLayout({
       </head>
       <body
         className={`${outfit.variable} ${inter.variable} ${roboto.variable} ${openSans.variable} ${poppins.variable} ${nunito.variable} ${lato.variable} ${montserrat.variable} ${sourceSans.variable} ${raleway.variable} ${workSans.variable} font-sans antialiased`}
+        style={{
+          ...(primaryLight ? ({ ["--primary-light" as any]: primaryLight }) : null),
+          ...(primaryDark ? ({ ["--primary-dark" as any]: primaryDark }) : null),
+        }}
       >
         <NextIntlClientProvider>
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
@@ -131,3 +141,4 @@ export default async function RootLayout({
     </html>
   );
 }
+

docker-compose.yaml

@@ -13,7 +13,9 @@ services:
       # - DEFAULT_LANGUAGE=en-US # Default language for the application (optional, defaults to en-US) | See the docs to see all supported languages
       # - PRESIGNED_URL_EXPIRATION=3600 # Duration in seconds for presigned URL expiration (OPTIONAL - default is 3600 seconds / 1 hour)
       # - SECURE_SITE=true # Set to true if you are using a reverse proxy (OPTIONAL - default is false)
-
+      # UI Theming (if you don`t use, you can remove)
+      # - PUBLIC_PRIMARY_COLOR_LIGHT=oklch(0.5927 0.1767 142.49)(OPTIONAL - default is (oklch(0.5927 0.1767 142.49))
+      # - PUBLIC_PRIMARY_COLOR_DARK=oklch(0.5927 0.1767 142.49)(OPTIONAL - default is (oklch(0.5927 0.1767 142.49))
       # Download Memory Management Configuration (OPTIONAL - See documentation for details)
       # - DOWNLOAD_MAX_CONCURRENT=5 # Maximum number of simultaneous downloads (OPTIONAL - auto-scales based on system memory if not set)
       # - DOWNLOAD_MEMORY_THRESHOLD_MB=2048 # Memory threshold in MB before throttling (OPTIONAL - auto-scales based on system memory if not set)