[#1] Add default theme env variable

.env.defaults

@@ -18,6 +18,8 @@ PRISMA_HIDE_UPDATE_MESSAGE=true
 FIRST_NAME=firstname
 LAST_NAME=lastname
 
+DEFAULT_THEME=light
+
 COUNTRY=US
 
 SMTP_HOST=smtp.example.com

.env.example

@@ -6,6 +6,8 @@
 FIRST_NAME=firstname
 LAST_NAME=lastname
 
+DEFAULT_THEME=light
+
 COUNTRY=US
 
 SMTP_HOST=smtp.example.com

Dockerfile

@@ -62,6 +62,7 @@ FROM api_build as web_build_with_prerender
 
 ARG FIRST_NAME
 ARG LAST_NAME
+ARG DEFAULT_THEME
 ARG API_ADDRESS_PROD
 ARG API_ADDRESS_DEV
 
@@ -74,6 +75,7 @@ FROM base as web_build
 
 ARG FIRST_NAME
 ARG LAST_NAME
+ARG DEFAULT_THEME
 ARG API_ADDRESS_PROD
 ARG API_ADDRESS_DEV
 

README.md

@@ -25,6 +25,7 @@ services:
       - FIRST_NAME=first name                               # Your first name
       - LAST_NAME=lastname                                  # Your last name
       - COUNTRY=US                                          # ISO-3166-1 alpha-2 country code, https://en.wikipedia.org/wiki/ISO_3166-1#Codes
+      - DEFAULT_THEME=light                                 # 'light' or 'dark'
       - SMTP_HOST=smtp.example.com
       - SMTP_PORT=465
       - SMTP_SECURE=true

api/src/server.ts

@@ -9,6 +9,12 @@ import { createServer } from '@redwoodjs/api-server'
 
 import { logger } from 'src/lib/logger'
 import { handleTusUpload } from 'src/lib/tus'
+
+enum Theme {
+  light = 'light',
+  dark = 'dark',
+}
+
 ;(async () => {
   const { hasFlag } = await import('country-flag-icons')
 
@@ -17,6 +23,11 @@ import { handleTusUpload } from 'src/lib/tus'
       'Invalid COUNTRY environment variable, please select a valid ISO-3166-1 alpha-2 country code\n See https://en.wikipedia.org/wiki/ISO_3166-1#Codes'
     )
 
+  if (!(process.env.DEFAULT_THEME.toLowerCase() in Theme))
+    throw new Error(
+      'Invalid DEFAULT_THEME environment variable, please select either light or dark'
+    )
+
   const server = await createServer({
     logger,
     configureApiServer: async (server) => {

docker-compose.yml

@@ -13,6 +13,7 @@ services:
       - FIRST_NAME=first name                               # Your first name
       - LAST_NAME=lastname                                  # Your last name
       - COUNTRY=US                                          # ISO-3166-1 alpha-2 country code, https://en.wikipedia.org/wiki/ISO_3166-1#Codes
+      - DEFAULT_THEME=light                                 # 'light' or 'dark'
       - SMTP_HOST=smtp.example.com
       - SMTP_PORT=465
       - SMTP_SECURE=true

redwood.toml

@@ -9,7 +9,7 @@
   title = "${FIRST_NAME} ${LAST_NAME}"
   port = 8910
   apiUrl = "/api"
-  includeEnvironmentVariables = ["FIRST_NAME", "LAST_NAME", "COUNTRY", "API_ADDRESS_PROD", "API_ADDRESS_DEV"]
+  includeEnvironmentVariables = ["FIRST_NAME", "LAST_NAME", "COUNTRY", "DEFAULT_THEME", "API_ADDRESS_PROD", "API_ADDRESS_DEV"]
 [generate]
   tests = false
   stories = false

web/src/components/ThemeToggle/ThemeToggle.tsx

@@ -8,7 +8,10 @@ const DARK_THEME = 'dark'
 
 const ThemeToggle = () => {
   const [theme, setTheme] = useState(
-    localStorage.getItem('theme') ?? LIGHT_THEME
+    localStorage.getItem('theme') ||
+      ([LIGHT_THEME, DARK_THEME].includes(process.env.DEFAULT_THEME)
+        ? process.env.DEFAULT_THEME
+        : LIGHT_THEME)
   )
 
   const handleToggle = (e: React.ChangeEvent<HTMLInputElement>) => {

web/src/entry.client.tsx

@@ -8,6 +8,11 @@ import App from 'src/App'
  * rather than replacing it.
  * https://react.dev/reference/react-dom/client/hydrateRoot
  */
+enum Theme {
+  light = 'light',
+  dark = 'dark',
+}
+
 const redwoodAppElement = document.getElementById('redwood-app')
 
 if (!redwoodAppElement)
@@ -21,6 +26,11 @@ if (!hasFlag(process.env.COUNTRY))
     'Invalid COUNTRY environment variable, please select a valid ISO-3166-1 alpha-2 country code\n See https://en.wikipedia.org/wiki/ISO_3166-1#Codes'
   )
 
+if (!(process.env.DEFAULT_THEME.toLowerCase() in Theme))
+  throw new Error(
+    'Invalid DEFAULT_THEME environment variable, please select either light or dark'
+  )
+
 if (redwoodAppElement.children?.length > 0)
   hydrateRoot(redwoodAppElement, <App />)
 else {