diff --git a/configs/app/ui.ts b/configs/app/ui.ts
index 92474b0e4d..2ecf0679af 100644
--- a/configs/app/ui.ts
+++ b/configs/app/ui.ts
@@ -54,6 +54,7 @@ const defaultColorTheme = (() => {
 
 const UI = Object.freeze({
   theme: {
+    initialColorMode: (getEnvValue('NEXT_PUBLIC_THEME_INITIAL_COLOR_MODE') as ('system' | 'light' | 'dark' | undefined)) || 'system',
     statisticBgColor: getEnvValue('NEXT_PUBLIC_THEME_STATISTIC_BG_COLOR'),
     statisticBgDarkColor: getEnvValue('NEXT_PUBLIC_THEME_STATISTIC_BG_DARK_COLOR'),
     statisticTextColor: getEnvValue('NEXT_PUBLIC_THEME_STATISTIC_TEXT_COLOR'),
diff --git a/deploy/tools/envs-validator/schema.ts b/deploy/tools/envs-validator/schema.ts
index f65e1d5cfb..cf34c79307 100644
--- a/deploy/tools/envs-validator/schema.ts
+++ b/deploy/tools/envs-validator/schema.ts
@@ -917,6 +917,7 @@ const schema = yup
     NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN: yup.string(),
 
     // 7. Theme configuraton
+    NEXT_PUBLIC_THEME_INITIAL_COLOR_MODE: yup.string().oneOf([ 'system', 'light', 'dark' ]).optional(),
     NEXT_PUBLIC_THEME_STATISTIC_BG_COLOR: yup.string().optional(),
     NEXT_PUBLIC_THEME_STATISTIC_TEXT_COLOR: yup.string().optional(),
     NEXT_PUBLIC_THEME_LINK_COLOR: yup.string().optional(),
diff --git a/docs/ENVS.md b/docs/ENVS.md
index 4fe14aff7e..880a414771 100644
--- a/docs/ENVS.md
+++ b/docs/ENVS.md
@@ -127,6 +127,7 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
 
 | Variable | Type| Description | Compulsoriness | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_THEME_INITIAL_COLOR_MODE | `system \| light \| dark` | initial code mode | - | `light` | `light` |
 | NEXT_PUBLIC_THEME_STATISTIC_BG_COLOR | - | - | - |  |  |
 | NEXT_PUBLIC_THEME_STATISTIC_BG_DARK_COLOR | - | - | - |  |  |
 | NEXT_PUBLIC_THEME_STATISTIC_TEXT_COLOR | - | - | - |  |  |