diff --git a/systemres/main/resources/base/element/color.json b/systemres/main/resources/base/element/color.json
index 02d945e2c9668207d891d3a16ddbcb824d6a24ff..68029884e9521e646955ed4f95bda0428361f33a 100644
--- a/systemres/main/resources/base/element/color.json
+++ b/systemres/main/resources/base/element/color.json
@@ -1270,19 +1270,19 @@
         },
         {
             "name": "white",
-            "value": "#ffffff"
+            "value": "$color:white_light"
         },
         {
             "name": "gray_01",
-            "value": "#f1f3f5"
+            "value": "$color:gray_01_light"
         },
         {
             "name": "gray_02",
-            "value": "#e5e5ea"
+            "value": "$color:gray_02_light"
         },
         {
             "name": "gray_03",
-            "value": "#d1d1d6"
+            "value": "$color:gray_03_light"
         },
         {
             "name": "gray_04",
@@ -1378,7 +1378,7 @@
         },
         {
             "name": "brand",
-            "value": "#0a59f7"
+            "value": "$color:brand_light"
         },
         {
             "name": "brand_font",
@@ -1390,15 +1390,15 @@
         },
         {
             "name": "warning",
-            "value": "#e84026"
+            "value": "$color:warning_light"
         },
         {
             "name": "alert",
-            "value": "#ed6f21"
+            "value": "$color:alert_light"
         },
         {
             "name": "confirm",
-            "value": "#64bb5c"
+            "value": "$color:confirm_light"
         }
     ]
 }
diff --git a/systemres/main/resources/base/element/color_sys.json b/systemres/main/resources/base/element/color_sys.json
index 5960a0babaac568bc50b4f44837f7adfd129dbca..6add804e9218953190eda976b77a112f092e4482 100644
--- a/systemres/main/resources/base/element/color_sys.json
+++ b/systemres/main/resources/base/element/color_sys.json
@@ -2,63 +2,63 @@
     "color": [
         {
             "name": "font_primary",
-            "value": "#e5000000"
+            "value": "$color:font_primary_light"
         },
         {
             "name": "font_secondary",
-            "value": "#99000000"
+            "value": "$color:font_secondary_light"
         },
         {
             "name": "font_tertiary",
-            "value": "#66000000"
+            "value": "$color:font_tertiary_light"
         },
         {
             "name": "font_fourth",
-            "value": "#33000000"
+            "value": "$color:font_fourth_light"
         },
         {
             "name": "font_emphasize",
-            "value": "$color:brand_font"
+            "value": "$color:font_emphasize_light"
         },
         {
             "name": "font_on_primary",
-            "value": "$color:font_on"
+            "value": "$color:font_on_primary_light"
         },
         {
             "name": "font_on_secondary",
-            "value": "#99ffffff"
+            "value": "$color:font_on_secondary_light"
         },
         {
             "name": "font_on_tertiary",
-            "value": "#66ffffff"
+            "value": "$color:font_on_tertiary_light"
         },
         {
             "name": "font_on_fourth",
-            "value": "#33ffffff"
+            "value": "$color:font_on_fourth_light"
         },
         {
             "name": "icon_primary",
-            "value": "#e5000000"
+            "value": "$color:icon_primary_light"
         },
         {
             "name": "icon_secondary",
-            "value": "#99000000"
+            "value": "$color:icon_secondary_light"
         },
         {
             "name": "icon_tertiary",
-            "value": "#66000000"
+            "value": "$color:icon_tertiary_light"
         },
         {
             "name": "icon_fourth",
-            "value": "#33000000"
+            "value": "$color:icon_fourth_light"
         },
         {
             "name": "icon_emphasize",
-            "value": "$color:brand_font"
+            "value": "$color:icon_emphasize_light"
         },
         {
             "name": "icon_sub_emphasize",
-            "value": "#660a59f7"
+            "value": "$color:icon_sub_emphasize_light"
         },
         {
             "name": "mask_primary",
@@ -90,43 +90,43 @@
         },
         {
             "name": "comp_background_primary",
-            "value": "$color:white"
+            "value": "$color:comp_background_primary_light"
         },
         {
             "name": "comp_background_primary_contrary",
-            "value": "$color:white"
+            "value": "$color:comp_background_primary_contrary_light"
         },
         {
             "name": "comp_background_gray",
-            "value": "$color:gray_01"
+            "value": "$color:comp_background_gray_light"
         },
         {
             "name": "comp_background_secondary",
-            "value": "#19000000"
+            "value": "$color:comp_background_secondary_light"
         },
         {
             "name": "comp_background_tertiary",
-            "value": "#0c000000"
+            "value": "$color:comp_background_tertiary_light"
         },
         {
             "name": "comp_background_emphasize",
-            "value": "$color:brand"
+            "value": "$color:comp_background_emphasize_light"
         },
         {
             "name": "comp_emphasize_secondary",
-            "value": "#330a59f7"
+            "value": "$color:comp_emphasize_secondary_light"
         },
         {
             "name": "comp_emphasize_tertiary",
-            "value": "#190a59f7"
+            "value": "$color:comp_emphasize_tertiary_light"
         },
         {
             "name": "comp_divider",
-            "value": "#33000000"
+            "value": "$color:comp_divider_light"
         },
         {
             "name": "comp_common_contrary",
-            "value": "$color:white"
+            "value": "$color:comp_common_contrary_light"
         },
         {
             "name": "comp_background_focus",
@@ -146,67 +146,67 @@
         },
         {
             "name": "interactive_hover",
-            "value": "#0c000000"
+            "value": "$color:interactive_hover_light"
         },
         {
             "name": "interactive_pressed",
-            "value": "#19000000"
+            "value": "$color:interactive_pressed_light"
         },
         {
             "name": "interactive_focus",
-            "value": "$color:brand"
+            "value": "$color:interactive_focus_light"
         },
         {
             "name": "interactive_active",
-            "value": "#0a59f7"
+            "value": "$color:interactive_active_light"
         },
         {
             "name": "interactive_select",
-            "value": "#33000000"
+            "value": "$color:interactive_select_light"
         },
         {
             "name": "interactive_click",
-            "value": "#19000000"
+            "value": "$color:interactive_click_light"
         },
         {
             "name": "icon_on_primary",
-            "value": "$color:icon_on"
+            "value": "$color:icon_on_primary_light"
         },
         {
             "name": "icon_on_secondary",
-            "value": "#99ffffff"
+            "value": "$color:icon_on_secondary_light"
         },
         {
             "name": "icon_on_tertiary",
-            "value": "#66ffffff"
+            "value": "$color:icon_on_tertiary_light"
         },
         {
             "name": "icon_on_fourth",
-            "value": "#33ffffff"
+            "value": "$color:icon_on_fourth_light"
         },
         {
             "name": "background_primary",
-            "value": "$color:white"
+            "value": "$color:background_primary_light"
         },
         {
             "name": "background_secondary",
-            "value": "$color:gray_01"
+            "value": "$color:background_secondary_light"
         },
         {
             "name": "background_tertiary",
-            "value": "$color:gray_02"
+            "value": "$color:background_tertiary_light"
         },
         {
             "name": "background_fourth",
-            "value": "$color:gray_03"
+            "value": "$color:background_fourth_light"
         },
         {
             "name": "background_emphasize",
-            "value": "$color:brand"
+            "value": "$color:background_emphasize_light"
         },
         {
             "name": "neutral",
-            "value": "$color:black"
+            "value": "$color:neutral_light"
         },
         {
             "name": "font",
diff --git a/systemres/main/resources/base/element/color_theme_dark.json b/systemres/main/resources/base/element/color_theme_dark.json
new file mode 100644
index 0000000000000000000000000000000000000000..99e0ce08991cd3adcf06ef226811532de38609fd
--- /dev/null
+++ b/systemres/main/resources/base/element/color_theme_dark.json
@@ -0,0 +1,200 @@
+{
+    "color": [
+        {
+            "name": "white_dark",
+            "value": "#e5e5e5"
+        },
+        {
+            "name": "gray_01_dark",
+            "value": "#000000"
+        },
+        {
+            "name": "gray_02_dark",
+            "value": "#202224"
+        },
+        {
+            "name": "gray_03_dark",
+            "value": "#2e3033"
+        },
+        {
+            "name": "brand_dark",
+            "value": "#317af7"
+        },
+        {
+            "name": "warning_dark",
+            "value": "#d94838"
+        },
+        {
+            "name": "alert_dark",
+            "value": "#db6b42"
+        },
+        {
+            "name": "confirm_dark",
+            "value": "#5ba854"
+        },
+        {
+            "name": "font_primary_dark",
+            "value": "#e5ffffff"
+        },
+        {
+            "name": "font_secondary_dark",
+            "value": "#99ffffff"
+        },
+        {
+            "name": "font_tertiary_dark",
+            "value": "#66ffffff"
+        },
+        {
+            "name": "font_fourth_dark",
+            "value": "#33ffffff"
+        },
+        {
+            "name": "font_emphasize_dark",
+            "value": "$color:brand_dark"
+        },
+        {
+            "name": "font_on_primary_dark",
+            "value": "$color:white_dark"
+        },
+        {
+            "name": "font_on_secondary_dark",
+            "value": "#99ffffff"
+        },
+        {
+            "name": "font_on_tertiary_dark",
+            "value": "#66ffffff"
+        },
+        {
+            "name": "font_on_fourth_dark",
+            "value": "#33ffffff"
+        },
+        {
+            "name": "icon_primary_dark",
+            "value": "#e5ffffff"
+        },
+        {
+            "name": "icon_secondary_dark",
+            "value": "#99ffffff"
+        },
+        {
+            "name": "icon_tertiary_dark",
+            "value": "#66ffffff"
+        },
+        {
+            "name": "icon_fourth_dark",
+            "value": "#33ffffff"
+        },
+        {
+            "name": "icon_emphasize_dark",
+            "value": "$color:brand_dark"
+        },
+        {
+            "name": "icon_sub_emphasize_dark",
+            "value": "#665291ff"
+        },
+        {
+            "name": "icon_on_primary_dark",
+            "value": "$color:white_dark"
+        },
+        {
+            "name": "icon_on_secondary_dark",
+            "value": "#99ffffff"
+        },
+        {
+            "name": "icon_on_tertiary_dark",
+            "value": "#66ffffff"
+        },
+        {
+            "name": "icon_on_fourth_dark",
+            "value": "#33ffffff"
+        },
+        {
+            "name": "background_primary_dark",
+            "value": "$color:black"
+        },
+        {
+            "name": "background_secondary_dark",
+            "value": "$color:gray_01_dark"
+        },
+        {
+            "name": "background_tertiary_dark",
+            "value": "$color:gray_02_dark"
+        },
+        {
+            "name": "background_fourth_dark",
+            "value": "$color:gray_03_dark"
+        },
+        {
+            "name": "background_emphasize_dark",
+            "value": "$color:brand_dark"
+        },
+        {
+            "name": "comp_background_primary_dark",
+            "value": "$color:gray_02_dark"
+        },
+        {
+            "name": "comp_background_primary_contrary_dark",
+            "value": "$color:white_dark"
+        },
+        {
+            "name": "comp_background_gray_dark",
+            "value": "$color:black"
+        },
+        {
+            "name": "comp_background_secondary_dark",
+            "value": "#19ffffff"
+        },
+        {
+            "name": "comp_background_tertiary_dark",
+            "value": "#0cffffff"
+        },
+        {
+            "name": "comp_background_emphasize_dark",
+            "value": "$color:brand_dark"
+        },
+        {
+            "name": "neutral_dark",
+            "value": "$color:white_dark"
+        },
+        {
+            "name": "comp_emphasize_secondary_dark",
+            "value": "#330a59f7"
+        },
+        {
+            "name": "comp_emphasize_tertiary_dark",
+            "value": "#190a59f7"
+        },
+        {
+            "name": "comp_divider_dark",
+            "value": "#33ffffff"
+        },
+        {
+            "name": "comp_common_contrary_dark",
+            "value": "$color:black"
+        },
+        {
+            "name": "interactive_hover_dark",
+            "value": "#0cffffff"
+        },
+        {
+            "name": "interactive_pressed_dark",
+            "value": "#19ffffff"
+        },
+        {
+            "name": "interactive_focus_dark",
+            "value": "$color:brand_dark"
+        },
+        {
+            "name": "interactive_active_dark",
+            "value": "#317af7"
+        },
+        {
+            "name": "interactive_select_dark",
+            "value": "#33ffffff"
+        },
+        {
+            "name": "interactive_click_dark",
+            "value": "#19ffffff"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/systemres/main/resources/base/element/color_theme_light.json b/systemres/main/resources/base/element/color_theme_light.json
new file mode 100644
index 0000000000000000000000000000000000000000..3cd6347300aa5d411849f1730d739b917f02e78b
--- /dev/null
+++ b/systemres/main/resources/base/element/color_theme_light.json
@@ -0,0 +1,200 @@
+{
+    "color": [
+        {
+            "name": "white_light",
+            "value": "#ffffff"
+        },
+        {
+            "name": "gray_01_light",
+            "value": "#f1f3f5"
+        },
+        {
+            "name": "gray_02_light",
+            "value": "#e5e5ea"
+        },
+        {
+            "name": "gray_03_light",
+            "value": "#d1d1d6"
+        },
+        {
+            "name": "brand_light",
+            "value": "#0a59f7"
+        },
+        {
+            "name": "warning_light",
+            "value": "#e84026"
+        },
+        {
+            "name": "alert_light",
+            "value": "#ed6f21"
+        },
+        {
+            "name": "confirm_light",
+            "value": "#64bb5c"
+        },
+        {
+            "name": "font_primary_light",
+            "value": "#e5000000"
+        },
+        {
+            "name": "font_secondary_light",
+            "value": "#99000000"
+        },
+        {
+            "name": "font_tertiary_light",
+            "value": "#66000000"
+        },
+        {
+            "name": "font_fourth_light",
+            "value": "#33000000"
+        },
+        {
+            "name": "font_emphasize_light",
+            "value": "$color:brand_light"
+        },
+        {
+            "name": "font_on_primary_light",
+            "value": "$color:white_light"
+        },
+        {
+            "name": "font_on_secondary_light",
+            "value": "#99ffffff"
+        },
+        {
+            "name": "font_on_tertiary_light",
+            "value": "#66ffffff"
+        },
+        {
+            "name": "font_on_fourth_light",
+            "value": "#33ffffff"
+        },
+        {
+            "name": "icon_primary_light",
+            "value": "#e5000000"
+        },
+        {
+            "name": "icon_secondary_light",
+            "value": "#99000000"
+        },
+        {
+            "name": "icon_tertiary_light",
+            "value": "#66000000"
+        },
+        {
+            "name": "icon_fourth_light",
+            "value": "#33000000"
+        },
+        {
+            "name": "icon_emphasize_light",
+            "value": "$color:brand_light"
+        },
+        {
+            "name": "icon_sub_emphasize_light",
+            "value": "#660a59f7"
+        },
+        {
+            "name": "icon_on_primary_light",
+            "value": "$color:white_light"
+        },
+        {
+            "name": "icon_on_secondary_light",
+            "value": "#99ffffff"
+        },
+        {
+            "name": "icon_on_tertiary_light",
+            "value": "#66ffffff"
+        },
+        {
+            "name": "icon_on_fourth_light",
+            "value": "#33ffffff"
+        },
+        {
+            "name": "background_primary_light",
+            "value": "$color:white_light"
+        },
+        {
+            "name": "background_secondary_light",
+            "value": "$color:gray_01_light"
+        },
+        {
+            "name": "background_tertiary_light",
+            "value": "$color:gray_02_light"
+        },
+        {
+            "name": "background_fourth_light",
+            "value": "$color:gray_03_light"
+        },
+        {
+            "name": "background_emphasize_light",
+            "value": "$color:brand_light"
+        },
+        {
+            "name": "comp_background_primary_light",
+            "value": "$color:white_light"
+        },
+        {
+            "name": "comp_background_primary_contrary_light",
+            "value": "$color:white_light"
+        },
+        {
+            "name": "comp_background_gray_light",
+            "value": "$color:gray_01_light"
+        },
+        {
+            "name": "comp_background_secondary_light",
+            "value": "#19000000"
+        },
+        {
+            "name": "comp_background_tertiary_light",
+            "value": "#0c000000"
+        },
+        {
+            "name": "comp_background_emphasize_light",
+            "value": "$color:brand_light"
+        },
+        {
+            "name": "neutral_light",
+            "value": "$color:black"
+        },
+        {
+            "name": "comp_emphasize_secondary_light",
+            "value": "#330a59f7"
+        },
+        {
+            "name": "comp_emphasize_tertiary_light",
+            "value": "#190a59f7"
+        },
+        {
+            "name": "comp_divider_light",
+            "value": "#33000000"
+        },
+        {
+            "name": "comp_common_contrary_light",
+            "value": "$color:white_light"
+        },
+        {
+            "name": "interactive_hover_light",
+            "value": "#0c000000"
+        },
+        {
+            "name": "interactive_pressed_light",
+            "value": "#19000000"
+        },
+        {
+            "name": "interactive_focus_light",
+            "value": "$color:brand_light"
+        },
+        {
+            "name": "interactive_active_light",
+            "value": "#0a59f7"
+        },
+        {
+            "name": "interactive_select_light",
+            "value": "#33000000"
+        },
+        {
+            "name": "interactive_click_light",
+            "value": "#19000000"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/systemres/main/resources/base/element/id_defined.json b/systemres/main/resources/base/element/id_defined.json
index 9013406a8b3c56946a7d04b1086ef34eb5117396..5a8634b7296fb0fbb329f0a7dd86923062532994 100644
--- a/systemres/main/resources/base/element/id_defined.json
+++ b/systemres/main/resources/base/element/id_defined.json
@@ -9989,6 +9989,496 @@
             "type": "string",
             "name": "ohos_show_password_directly",
             "order": 1966
+        },
+        {
+            "type": "color",
+            "name": "white_light",
+            "order": 1967
+        },
+        {
+            "type": "color",
+            "name": "gray_01_light",
+            "order": 1968
+        },
+        {
+            "type": "color",
+            "name": "gray_02_light",
+            "order": 1969
+        },
+        {
+            "type": "color",
+            "name": "gray_03_light",
+            "order": 1970
+        },
+        {
+            "type": "color",
+            "name": "brand_light",
+            "order": 1971
+        },
+        {
+            "type": "color",
+            "name": "warning_light",
+            "order": 1972
+        },
+        {
+            "type": "color",
+            "name": "alert_light",
+            "order": 1973
+        },
+        {
+            "type": "color",
+            "name": "confirm_light",
+            "order": 1974
+        },
+        {
+            "type": "color",
+            "name": "font_primary_light",
+            "order": 1975
+        },
+        {
+            "type": "color",
+            "name": "font_secondary_light",
+            "order": 1976
+        },
+        {
+            "type": "color",
+            "name": "font_tertiary_light",
+            "order": 1977
+        },
+        {
+            "type": "color",
+            "name": "font_fourth_light",
+            "order": 1978
+        },
+        {
+            "type": "color",
+            "name": "font_emphasize_light",
+            "order": 1979
+        },
+        {
+            "type": "color",
+            "name": "font_on_primary_light",
+            "order": 1980
+        },
+        {
+            "type": "color",
+            "name": "font_on_secondary_light",
+            "order": 1981
+        },
+        {
+            "type": "color",
+            "name": "font_on_tertiary_light",
+            "order": 1982
+        },
+        {
+            "type": "color",
+            "name": "font_on_fourth_light",
+            "order": 1983
+        },
+        {
+            "type": "color",
+            "name": "icon_primary_light",
+            "order": 1984
+        },
+        {
+            "type": "color",
+            "name": "icon_secondary_light",
+            "order": 1985
+        },
+        {
+            "type": "color",
+            "name": "icon_tertiary_light",
+            "order": 1986
+        },
+        {
+            "type": "color",
+            "name": "icon_fourth_light",
+            "order": 1987
+        },
+        {
+            "type": "color",
+            "name": "icon_emphasize_light",
+            "order": 1988
+        },
+        {
+            "type": "color",
+            "name": "icon_sub_emphasize_light",
+            "order": 1989
+        },
+        {
+            "type": "color",
+            "name": "icon_on_primary_light",
+            "order": 1990
+        },
+        {
+            "type": "color",
+            "name": "icon_on_secondary_light",
+            "order": 1991
+        },
+        {
+            "type": "color",
+            "name": "icon_on_tertiary_light",
+            "order": 1992
+        },
+        {
+            "type": "color",
+            "name": "icon_on_fourth_light",
+            "order": 1993
+        },
+        {
+            "type": "color",
+            "name": "background_primary_light",
+            "order": 1994
+        },
+        {
+            "type": "color",
+            "name": "background_secondary_light",
+            "order": 1995
+        },
+        {
+            "type": "color",
+            "name": "background_tertiary_light",
+            "order": 1996
+        },
+        {
+            "type": "color",
+            "name": "background_fourth_light",
+            "order": 1997
+        },
+        {
+            "type": "color",
+            "name": "background_emphasize_light",
+            "order": 1998
+        },
+        {
+            "type": "color",
+            "name": "comp_background_primary_light",
+            "order": 1999
+        },
+        {
+            "type": "color",
+            "name": "comp_background_primary_contrary_light",
+            "order": 2000
+        },
+        {
+            "type": "color",
+            "name": "comp_background_gray_light",
+            "order": 2001
+        },
+        {
+            "type": "color",
+            "name": "comp_background_secondary_light",
+            "order": 2002
+        },
+        {
+            "type": "color",
+            "name": "comp_background_tertiary_light",
+            "order": 2003
+        },
+        {
+            "type": "color",
+            "name": "comp_background_emphasize_light",
+            "order": 2004
+        },
+        {
+            "type": "color",
+            "name": "neutral_light",
+            "order": 2005
+        },
+        {
+            "type": "color",
+            "name": "comp_emphasize_secondary_light",
+            "order": 2006
+        },
+        {
+            "type": "color",
+            "name": "comp_emphasize_tertiary_light",
+            "order": 2007
+        },
+        {
+            "type": "color",
+            "name": "comp_divider_light",
+            "order": 2008
+        },
+        {
+            "type": "color",
+            "name": "comp_common_contrary_light",
+            "order": 2009
+        },
+        {
+            "type": "color",
+            "name": "interactive_hover_light",
+            "order": 2010
+        },
+        {
+            "type": "color",
+            "name": "interactive_pressed_light",
+            "order": 2011
+        },
+        {
+            "type": "color",
+            "name": "interactive_focus_light",
+            "order": 2012
+        },
+        {
+            "type": "color",
+            "name": "interactive_active_light",
+            "order": 2013
+        },
+        {
+            "type": "color",
+            "name": "interactive_select_light",
+            "order": 2014
+        },
+        {
+            "type": "color",
+            "name": "interactive_click_light",
+            "order": 2015
+        },
+        {
+            "type": "color",
+            "name": "white_dark",
+            "order": 2016
+        },
+        {
+            "type": "color",
+            "name": "gray_01_dark",
+            "order": 2017
+        },
+        {
+            "type": "color",
+            "name": "gray_02_dark",
+            "order": 2018
+        },
+        {
+            "type": "color",
+            "name": "gray_03_dark",
+            "order": 2019
+        },
+        {
+            "type": "color",
+            "name": "brand_dark",
+            "order": 2020
+        },
+        {
+            "type": "color",
+            "name": "warning_dark",
+            "order": 2021
+        },
+        {
+            "type": "color",
+            "name": "alert_dark",
+            "order": 2022
+        },
+        {
+            "type": "color",
+            "name": "confirm_dark",
+            "order": 2023
+        },
+        {
+            "type": "color",
+            "name": "font_primary_dark",
+            "order": 2024
+        },
+        {
+            "type": "color",
+            "name": "font_secondary_dark",
+            "order": 2025
+        },
+        {
+            "type": "color",
+            "name": "font_tertiary_dark",
+            "order": 2026
+        },
+        {
+            "type": "color",
+            "name": "font_fourth_dark",
+            "order": 2027
+        },
+        {
+            "type": "color",
+            "name": "font_emphasize_dark",
+            "order": 2028
+        },
+        {
+            "type": "color",
+            "name": "font_on_primary_dark",
+            "order": 2029
+        },
+        {
+            "type": "color",
+            "name": "font_on_secondary_dark",
+            "order": 2030
+        },
+        {
+            "type": "color",
+            "name": "font_on_tertiary_dark",
+            "order": 2031
+        },
+        {
+            "type": "color",
+            "name": "font_on_fourth_dark",
+            "order": 2032
+        },
+        {
+            "type": "color",
+            "name": "icon_primary_dark",
+            "order": 2033
+        },
+        {
+            "type": "color",
+            "name": "icon_secondary_dark",
+            "order": 2034
+        },
+        {
+            "type": "color",
+            "name": "icon_tertiary_dark",
+            "order": 2035
+        },
+        {
+            "type": "color",
+            "name": "icon_fourth_dark",
+            "order": 2036
+        },
+        {
+            "type": "color",
+            "name": "icon_emphasize_dark",
+            "order": 2037
+        },
+        {
+            "type": "color",
+            "name": "icon_sub_emphasize_dark",
+            "order": 2038
+        },
+        {
+            "type": "color",
+            "name": "icon_on_primary_dark",
+            "order": 2039
+        },
+        {
+            "type": "color",
+            "name": "icon_on_secondary_dark",
+            "order": 2040
+        },
+        {
+            "type": "color",
+            "name": "icon_on_tertiary_dark",
+            "order": 2041
+        },
+        {
+            "type": "color",
+            "name": "icon_on_fourth_dark",
+            "order": 2042
+        },
+        {
+            "type": "color",
+            "name": "background_primary_dark",
+            "order": 2043
+        },
+        {
+            "type": "color",
+            "name": "background_secondary_dark",
+            "order": 2044
+        },
+        {
+            "type": "color",
+            "name": "background_tertiary_dark",
+            "order": 2045
+        },
+        {
+            "type": "color",
+            "name": "background_fourth_dark",
+            "order": 2046
+        },
+        {
+            "type": "color",
+            "name": "background_emphasize_dark",
+            "order": 2047
+        },
+        {
+            "type": "color",
+            "name": "comp_background_primary_dark",
+            "order": 2048
+        },
+        {
+            "type": "color",
+            "name": "comp_background_primary_contrary_dark",
+            "order": 2049
+        },
+        {
+            "type": "color",
+            "name": "comp_background_gray_dark",
+            "order": 2050
+        },
+        {
+            "type": "color",
+            "name": "comp_background_secondary_dark",
+            "order": 2051
+        },
+        {
+            "type": "color",
+            "name": "comp_background_tertiary_dark",
+            "order": 2052
+        },
+        {
+            "type": "color",
+            "name": "comp_background_emphasize_dark",
+            "order": 2053
+        },
+        {
+            "type": "color",
+            "name": "neutral_dark",
+            "order": 2054
+        },
+        {
+            "type": "color",
+            "name": "comp_emphasize_secondary_dark",
+            "order": 2055
+        },
+        {
+            "type": "color",
+            "name": "comp_emphasize_tertiary_dark",
+            "order": 2056
+        },
+        {
+            "type": "color",
+            "name": "comp_divider_dark",
+            "order": 2057
+        },
+        {
+            "type": "color",
+            "name": "comp_common_contrary_dark",
+            "order": 2058
+        },
+        {
+            "type": "color",
+            "name": "interactive_hover_dark",
+            "order": 2059
+        },
+        {
+            "type": "color",
+            "name": "interactive_pressed_dark",
+            "order": 2060
+        },
+        {
+            "type": "color",
+            "name": "interactive_focus_dark",
+            "order": 2061
+        },
+        {
+            "type": "color",
+            "name": "interactive_active_dark",
+            "order": 2062
+        },
+        {
+            "type": "color",
+            "name": "interactive_select_dark",
+            "order": 2063
+        },
+        {
+            "type": "color",
+            "name": "interactive_click_dark",
+            "order": 2064
         }
     ]
 }
diff --git a/systemres/main/resources/dark/element/color.json b/systemres/main/resources/dark/element/color.json
index 97263e1176183d592ae560b47d9301f8ac88bcf0..3c95279d383205627d50f4ab8bbd816ca4bc8f1c 100644
--- a/systemres/main/resources/dark/element/color.json
+++ b/systemres/main/resources/dark/element/color.json
@@ -926,19 +926,19 @@
         },
         {
             "name": "white",
-            "value": "#e5e5e5"
+            "value": "$color:white_dark"
         },
         {
             "name": "gray_01",
-            "value": "#000000"
+            "value": "$color:gray_01_dark"
         },
         {
             "name": "gray_02",
-            "value": "#202224"
+            "value": "$color:gray_02_dark"
         },
         {
             "name": "gray_03",
-            "value": "#2e3033"
+            "value": "$color:gray_03_dark"
         },
         {
             "name": "gray_04",
@@ -1034,7 +1034,7 @@
         },
         {
             "name": "brand",
-            "value": "#317af7"
+            "value": "$color:brand_dark"
         },
         {
             "name": "brand_font",
@@ -1046,15 +1046,15 @@
         },
         {
             "name": "warning",
-            "value": "#d94838"
+            "value": "$color:warning_dark"
         },
         {
             "name": "alert",
-            "value": "#db6b42"
+            "value": "$color:alert_dark"
         },
         {
             "name": "confirm",
-            "value": "#5ba854"
+            "value": "$color:confirm_dark"
         }
     ]
 }
diff --git a/systemres/main/resources/dark/element/color_sys.json b/systemres/main/resources/dark/element/color_sys.json
index 80f059177123292928d9b7147096e64180c7780d..2a02f1cd5e4b180a8b65de43a1269369acc189ae 100644
--- a/systemres/main/resources/dark/element/color_sys.json
+++ b/systemres/main/resources/dark/element/color_sys.json
@@ -2,63 +2,63 @@
     "color": [
         {
             "name": "font_primary",
-            "value": "#e5ffffff"
+            "value": "$color:font_primary_dark"
         },
         {
             "name": "font_secondary",
-            "value": "#99ffffff"
+            "value": "$color:font_secondary_dark"
         },
         {
             "name": "font_tertiary",
-            "value": "#66ffffff"
+            "value": "$color:font_tertiary_dark"
         },
         {
             "name": "font_fourth",
-            "value": "#33ffffff"
+            "value": "$color:font_fourth_dark"
         },
         {
             "name": "font_emphasize",
-            "value": "$color:brand_font"
+            "value": "$color:font_emphasize_dark"
         },
         {
             "name": "font_on_primary",
-            "value": "$color:font_on"
+            "value": "$color:font_on_primary_dark"
         },
         {
             "name": "font_on_secondary",
-            "value": "#99ffffff"
+            "value": "$color:font_on_secondary_dark"
         },
         {
             "name": "font_on_tertiary",
-            "value": "#66ffffff"
+            "value": "$color:font_on_tertiary_dark"
         },
         {
             "name": "font_on_fourth",
-            "value": "#33ffffff"
+            "value": "$color:font_on_fourth_dark"
         },
         {
             "name": "icon_primary",
-            "value": "#e5ffffff"
+            "value": "$color:icon_primary_dark"
         },
         {
             "name": "icon_secondary",
-            "value": "#99ffffff"
+            "value": "$color:icon_secondary_dark"
         },
         {
             "name": "icon_tertiary",
-            "value": "#66ffffff"
+            "value": "$color:icon_tertiary_dark"
         },
         {
             "name": "icon_fourth",
-            "value": "#33ffffff"
+            "value": "$color:icon_fourth_dark"
         },
         {
             "name": "icon_emphasize",
-            "value": "$color:brand_font"
+            "value": "$color:icon_emphasize_dark"
         },
         {
             "name": "icon_sub_emphasize",
-            "value": "#665291ff"
+            "value": "$color:icon_sub_emphasize_dark"
         },
         {
             "name": "mask_primary",
@@ -90,43 +90,43 @@
         },
         {
             "name": "comp_background_primary",
-            "value": "$color:gray_02"
+            "value": "$color:comp_background_primary_dark"
         },
         {
             "name": "comp_background_primary_contrary",
-            "value": "$color:white"
+            "value": "$color:comp_background_primary_contrary_dark"
         },
         {
             "name": "comp_background_gray",
-            "value": "$color:black"
+            "value": "$color:comp_background_gray_dark"
         },
         {
             "name": "comp_background_secondary",
-            "value": "#19ffffff"
+            "value": "$color:comp_background_secondary_dark"
         },
         {
             "name": "comp_background_tertiary",
-            "value": "#0cffffff"
+            "value": "$color:comp_background_tertiary_dark"
         },
         {
             "name": "comp_background_emphasize",
-            "value": "$color:brand"
+            "value": "$color:comp_background_emphasize_dark"
         },
         {
             "name": "comp_emphasize_secondary",
-            "value": "#330a59f7"
+            "value": "$color:comp_emphasize_secondary_dark"
         },
         {
             "name": "comp_emphasize_tertiary",
-            "value": "#190a59f7"
+            "value": "$color:comp_emphasize_tertiary_dark"
         },
         {
             "name": "comp_divider",
-            "value": "#33ffffff"
+            "value": "$color:comp_divider_dark"
         },
         {
             "name": "comp_common_contrary",
-            "value": "$color:black"
+            "value": "$color:comp_common_contrary_dark"
         },
         {
             "name": "comp_background_focus",
@@ -146,67 +146,67 @@
         },
         {
             "name": "interactive_hover",
-            "value": "#0cffffff"
+            "value": "$color:interactive_hover_dark"
         },
         {
             "name": "interactive_pressed",
-            "value": "#19ffffff"
+            "value": "$color:interactive_pressed_dark"
         },
         {
             "name": "interactive_focus",
-            "value": "$color:brand"
+            "value": "$color:interactive_focus_dark"
         },
         {
             "name": "interactive_active",
-            "value": "#317af7"
+            "value": "$color:interactive_active_dark"
         },
         {
             "name": "interactive_select",
-            "value": "#33ffffff"
+            "value": "$color:interactive_select_dark"
         },
         {
             "name": "interactive_click",
-            "value": "#19ffffff"
+            "value": "$color:interactive_click_dark"
         },
         {
             "name": "icon_on_primary",
-            "value": "$color:icon_on"
+            "value": "$color:icon_on_primary_dark"
         },
         {
             "name": "icon_on_secondary",
-            "value": "#99ffffff"
+            "value": "$color:icon_on_secondary_dark"
         },
         {
             "name": "icon_on_tertiary",
-            "value": "#66ffffff"
+            "value": "$color:icon_on_tertiary_dark"
         },
         {
             "name": "icon_on_fourth",
-            "value": "#33ffffff"
+            "value": "$color:icon_on_fourth_dark"
         },
         {
             "name": "background_primary",
-            "value": "$color:black"
+            "value": "$color:background_primary_dark"
         },
         {
             "name": "background_secondary",
-            "value": "$color:gray_01"
+            "value": "$color:background_secondary_dark"
         },
         {
             "name": "background_tertiary",
-            "value": "$color:gray_02"
+            "value": "$color:background_tertiary_dark"
         },
         {
             "name": "background_fourth",
-            "value": "$color:gray_03"
+            "value": "$color:background_fourth_dark"
         },
         {
             "name": "background_emphasize",
-            "value": "$color:brand"
+            "value": "$color:background_emphasize_dark"
         },
         {
             "name": "neutral",
-            "value": "$color:white"
+            "value": "$color:neutral_dark"
         },
         {
             "name": "font",