[Update] Add Light Theme

view.py

@@ -33,8 +33,7 @@ class View():
         )
 
         self.settings = SimpleNamespace()
-        # theme = get_appearance_mode() if config.APPEARANCE_THEME == "System" else config.APPEARANCE_THEME
+        theme = get_appearance_mode() if config.APPEARANCE_THEME == "System" else config.APPEARANCE_THEME
-        theme = "Dark"
         all_ctm = ColorThemeManager(theme)
         all_uism = UiScalingManager(config.UI_SCALING)
 
@@ -203,11 +202,9 @@ class View():
 
             VAR_LABEL_APPEARANCE_THEME=StringVar(value=i18n.t("config_window.appearance_theme.label")),
             VAR_DESC_APPEARANCE_THEME=StringVar(value=i18n.t("config_window.appearance_theme.desc")),
-            LIST_APPEARANCE_THEME=["Dark"],
+            LIST_APPEARANCE_THEME=["Light", "Dark", "System"],
-            # LIST_APPEARANCE_THEME=["Light", "Dark", "System"],
             CALLBACK_SET_APPEARANCE_THEME=None,
-            VAR_APPEARANCE_THEME=StringVar(value="Dark"),
+            VAR_APPEARANCE_THEME=StringVar(value=config.APPEARANCE_THEME),
-            # VAR_APPEARANCE_THEME=StringVar(value=config.APPEARANCE_THEME),
 
             VAR_LABEL_UI_SCALING=StringVar(value=i18n.t("config_window.ui_size.label")),
             VAR_DESC_UI_SCALING=None,
@@ -513,13 +510,6 @@ class View():
             self.enableConfigWindowCompactMode()
             vrct_gui.config_window.setting_box_compact_mode_switch_box.select()
 
-        vrct_gui._changeConfigWindowWidgetsStatus(
-            status="disabled",
-            target_names=[
-                "sb__optionmenu_appearance_theme",
-            ]
-        )
-
 
         if config.CHOICE_MIC_HOST == "NoHost":
             self.view_variable.VAR_MIC_HOST.set("No Mic Host Detected")

vrct_gui/_CreateWindowCover.py

@@ -18,13 +18,13 @@ class _CreateWindowCover(CTkToplevel):
         self.title("")
         self.overrideredirect(True)
         self.wm_attributes("-toolwindow", True)
-        self.configure(fg_color="black")
+        self.configure(fg_color=self.settings.ctm.BG_COLOR)
         self.protocol("WM_DELETE_WINDOW", lambda: self.withdraw())
 
 
         self.grid_rowconfigure(0,weight=1)
         self.grid_columnconfigure(0,weight=1)
-        self.cover_container = CTkFrame(self, corner_radius=0, fg_color="black", width=0, height=0)
+        self.cover_container = CTkFrame(self, corner_radius=0, fg_color=self.settings.ctm.BG_COLOR, width=0, height=0)
         self.cover_container.grid(row=0, column=0, sticky="nsew")
 
 

vrct_gui/config_window/widgets/createSideMenuAndSettingsBoxContainers/setting_box_containers/_SettingBoxGenerator.py

@@ -587,7 +587,7 @@ class _SettingBoxGenerator():
             wraplength=self.settings.uism.SB__MESSAGE_FORMAT__EXAMPLE_WRAP_LENGTH,
             height=0,
             font=CTkFont(family=self.settings.FONT_FAMILY, size=self.settings.uism.SB__MESSAGE_FORMAT__REQUIRED_TEXT_FONT_SIZE, weight="normal"),
-            text_color=self.settings.ctm.LABELS_TEXT_COLOR,
+            text_color=self.settings.ctm.SB__MESSAGE_FORMAT__EXAMPLE_TEXT_COLOR,
         )
         example_label_widget.grid(row=1, column=1, padx=self.settings.uism.SB__MESSAGE_FORMAT__EXAMPLE_IPADXY, pady=self.settings.uism.SB__MESSAGE_FORMAT__EXAMPLE_IPADXY, sticky="ew")
 

vrct_gui/main_window/createMainWindowWidgets.py

@@ -92,9 +92,9 @@ def createMainWindowWidgets(vrct_gui, settings, view_variable):
             vrct_gui.update_available_label,
             vrct_gui.update_available_icon,
         ],
-        enter_color=settings.ctm.UPDATE_AVAILABLE_BUTTON_HOVERED_BG_COLOR,
+        enter_color=settings.ctm.TOP_BAR_BUTTON_HOVERED_BG_COLOR,
-        leave_color=settings.ctm.UPDATE_AVAILABLE_BUTTON_BG_COLOR,
+        leave_color=settings.ctm.TOP_BAR_BUTTON_BG_COLOR,
-        clicked_color=settings.ctm.UPDATE_AVAILABLE_BUTTON_CLICKED_BG_COLOR,
+        clicked_color=settings.ctm.TOP_BAR_BUTTON_CLICKED_BG_COLOR,
         buttonReleasedFunction=lambda e: callFunctionIfCallable(view_variable.CALLBACK_CLICKED_UPDATE_AVAILABLE),
     )
 
@@ -105,9 +105,9 @@ def createMainWindowWidgets(vrct_gui, settings, view_variable):
     # Help and Info button
     vrct_gui.help_and_info_button_container = createButtonWithImage(
         parent_widget=vrct_gui.main_topbar_container,
-        button_fg_color=settings.ctm.HELP_AND_INFO_BUTTON_BG_COLOR,
+        button_fg_color=settings.ctm.TOP_BAR_BUTTON_BG_COLOR,
-        button_enter_color=settings.ctm.HELP_AND_INFO_BUTTON_HOVERED_BG_COLOR,
+        button_enter_color=settings.ctm.TOP_BAR_BUTTON_HOVERED_BG_COLOR,
-        button_clicked_color=settings.ctm.HELP_AND_INFO_BUTTON_CLICKED_BG_COLOR,
+        button_clicked_color=settings.ctm.TOP_BAR_BUTTON_CLICKED_BG_COLOR,
         button_image_file=settings.image_file.HELP_ICON,
         button_image_size=settings.uism.HELP_AND_INFO_BUTTON_SIZE,
         button_ipadxy=settings.uism.HELP_AND_INFO_BUTTON_IPADXY,

vrct_gui/ui_managers/ColorThemeManager.py

@@ -10,8 +10,11 @@ class ColorThemeManager():
         self.base_color = SimpleNamespace(
 
             PRIMARY_100_COLOR = "#b7ded8",
+            PRIMARY_150_COLOR = "#A1D4CC",
             PRIMARY_200_COLOR = "#8acac0",
+            PRIMARY_250_COLOR = "#76BFB4",
             PRIMARY_300_COLOR = "#61b4a7",
+            PRIMARY_350_COLOR = "#55AC9E",
             PRIMARY_400_COLOR = "#48a495", # Source
             PRIMARY_450_COLOR = "#429c8c",
             PRIMARY_500_COLOR = "#3b9483",
@@ -25,12 +28,12 @@ class ColorThemeManager():
             SENT_400_COLOR = "#6197b4", # Source PRIMARY_300_COLOR #61b4a7. ANALOGOUS' Second one.
             RECEIVED_300_COLOR = "#a861b4", # Source PRIMARY_300_COLOR #61b4a7. TRIADIC' Second one.
 
-            DARK_BASIC_TEXT_COLOR = "#f2f2f2",
+            DARK_BASIC_TEXT_COLOR = "#f2f2f2", # Icon normal color too
             DARK_100_COLOR = "#f5f7fb", # THE LIGHTEST BG COLOR
             DARK_200_COLOR = "#f1f2f6",
             DARK_300_COLOR = "#e9eaee",
             DARK_350_COLOR = "#d8d9dd",
-            DARK_400_COLOR = "#c7c8cc",
+            DARK_400_COLOR = "#c7c8cc", # Icon second color
             DARK_450_COLOR = "#b8b9bd",
             DARK_500_COLOR = "#a9aaae",
             DARK_600_COLOR = "#7f8084",
@@ -52,27 +55,30 @@ class ColorThemeManager():
             DARK_1000_COLOR = "#151517", # THE DARKEST BG COLOR
 
 
-            LIGHT_100_COLOR = "#f2f2f2", # THE LIGHTEST BG COLOR
+            LIGHT_BASIC_TEXT_COLOR = "#050505",
-            LIGHT_200_COLOR = "#e9e9e9",
+            LIGHT_100_COLOR = "#f5f7fb", # THE LIGHTEST BG COLOR
-            LIGHT_250_COLOR = "#e1e1e1",
+            LIGHT_125_COLOR = "#F4F6FA",
-            LIGHT_300_COLOR = "#d9d9d9",
+            LIGHT_150_COLOR = "#F2F4F8",
-            LIGHT_325_COLOR = "#d0d0d0",
+            LIGHT_175_COLOR = "#F1F3F7",
-            LIGHT_350_COLOR = "#c7c7c7",
+            LIGHT_200_COLOR = "#eff1f5",
-            LIGHT_375_COLOR = "#bebebe",
+            LIGHT_225_COLOR = "#ECEEF2",
-            LIGHT_400_COLOR = "#b5b5b5",
+            LIGHT_250_COLOR = "#E9EBEF",
-            LIGHT_450_COLOR = "#a5a5a5",
+            LIGHT_275_COLOR = "#E6E8EC",
-            LIGHT_500_COLOR = "#959595",
+            LIGHT_300_COLOR = "#e2e4e8",
-            LIGHT_600_COLOR = "#6d6d6d",
+            LIGHT_313_COLOR = "#DEE0E4",
-            LIGHT_700_COLOR = "#5a5a5a",
+            LIGHT_325_COLOR = "#DADCE0",
-            LIGHT_750_COLOR = "#515151",
+            LIGHT_333_COLOR = "#D6D8DC",
-            LIGHT_800_COLOR = "#3b3b3b",
+            LIGHT_350_COLOR = "#D1D3D7",
-            LIGHT_850_COLOR = "#323232",
+            LIGHT_375_COLOR = "#C9CBCF",
-            LIGHT_875_COLOR = "#2b2b2b",
+            LIGHT_400_COLOR = "#c0c2c6",
-            LIGHT_900_COLOR = "#1b1b1b",
+            LIGHT_450_COLOR = "#B1B3B7",
-            # LIGHT_925_COLOR = "#121212",
+            LIGHT_500_COLOR = "#a2a3a7",
-            # LIGHT_950_COLOR = "#0c0c0c",
+            LIGHT_550_COLOR = "#8D8F93",
-            # LIGHT_975_COLOR = "#070707",
+            LIGHT_600_COLOR = "#787a7e",
-            LIGHT_1000_COLOR = "#010101", # THE DARKEST BG COLOR
+            LIGHT_700_COLOR = "#646669", # Icon second color
+            LIGHT_800_COLOR = "#45464a",
+            LIGHT_900_COLOR = "#242528", # Icon normal color
+            LIGHT_1000_COLOR = "#1b1b1b", # THE DARKEST BG COLOR
         )
 
 

vrct_gui/ui_managers/Themes/_darkTheme.py

@@ -134,6 +134,7 @@ def _darkTheme(base_color):
         # Modal Window (Main Window)
         main_window_cover = SimpleNamespace(
             TEXT_COLOR = base_color.DARK_BASIC_TEXT_COLOR,
+            BG_COLOR = "#000",
         ),
 
 
@@ -249,6 +250,7 @@ def _darkTheme(base_color):
 
 
             SB__MESSAGE_FORMAT__EXAMPLE_BG_COLOR = "#3a4554", # from VRChat' chat display color
+            SB__MESSAGE_FORMAT__EXAMPLE_TEXT_COLOR = base_color.DARK_100_COLOR,
             SB__MESSAGE_FORMAT__SWAP_BUTTON_COLOR = base_color.DARK_875_COLOR,
             SB__MESSAGE_FORMAT__SWAP_BUTTON_HOVERED_COLOR = base_color.DARK_800_COLOR,
             SB__MESSAGE_FORMAT__SWAP_BUTTON_CLICKED_COLOR = base_color.DARK_888_COLOR,
@@ -290,7 +292,7 @@ def _darkTheme(base_color):
             FOREGROUND_ICON = getImageFileFromUiUtils("foreground_icon_white.png"),
             FOREGROUND_ICON_DISABLED = getImageFileFromUiUtils("foreground_icon_disabled.png"),
 
-            NARROW_ARROW_DOWN = getImageFileFromUiUtils("narrow_arrow_down.png"),
+            NARROW_ARROW_DOWN = getImageFileFromUiUtils("narrow_arrow_down_white.png"),
 
             CONFIGURATION_ICON = getImageFileFromUiUtils("configuration_icon_white.png"),
             CONFIGURATION_ICON_DISABLED = getImageFileFromUiUtils("configuration_icon_disabled.png"),
@@ -303,9 +305,9 @@ def _darkTheme(base_color):
             HELP_ICON = getImageFileFromUiUtils("help_icon_white.png"),
 
             CANCEL_ICON = getImageFileFromUiUtils("cancel_icon.png"),
-            REDO_ICON = getImageFileFromUiUtils("redo_white.png"),
+            REDO_ICON = getImageFileFromUiUtils("redo_icon_white.png"),
-            SWAP_ICON = getImageFileFromUiUtils("swap_icon.png"),
+            SWAP_ICON = getImageFileFromUiUtils("swap_icon_white.png"),
-            FOLDER_OPEN_ICON = getImageFileFromUiUtils("folder_open_icon.png"),
+            FOLDER_OPEN_ICON = getImageFileFromUiUtils("folder_open_icon_white.png"),
         ),
     )
 

vrct_gui/ui_managers/Themes/_lightTheme.py

@@ -5,42 +5,303 @@ def _lightTheme(base_color):
     theme_settings = SimpleNamespace(
         main = SimpleNamespace(
             # Common
-            BASIC_TEXT_COLOR = base_color.LIGHT_100_COLOR,
+            BASIC_TEXT_COLOR = base_color.LIGHT_BASIC_TEXT_COLOR,
-            LABELS_TEXT_COLOR = base_color.LIGHT_100_COLOR,
+            LABELS_TEXT_COLOR = base_color.LIGHT_BASIC_TEXT_COLOR,
 
             # Main
-            MAIN_BG_COLOR = base_color.DARK_888_COLOR,
+            MAIN_BG_COLOR = base_color.LIGHT_175_COLOR,
+
+
+            TEXTBOX_BG_COLOR = base_color.LIGHT_100_COLOR,
+            TEXTBOX_TEXT_COLOR = base_color.LIGHT_BASIC_TEXT_COLOR,
+            TEXTBOX_TEXT_SUB_COLOR = base_color.LIGHT_600_COLOR,
+            TEXTBOX_SYSTEM_TAG_TEXT_COLOR = base_color.PRIMARY_300_COLOR,
+            TEXTBOX_SENT_TAG_TEXT_COLOR = base_color.SENT_400_COLOR,
+            TEXTBOX_RECEIVED_TAG_TEXT_COLOR = base_color.RECEIVED_300_COLOR,
+            # TEXTBOX_ERROR_TAG_TEXT_COLOR = "#c27583",
+            TEXTBOX_TIMESTAMP_TEXT_COLOR = base_color.LIGHT_500_COLOR,
+
+            TEXTBOX_TAB_BG_PASSIVE_COLOR = base_color.LIGHT_300_COLOR,
+            TEXTBOX_TAB_BG_ACTIVE_COLOR = base_color.LIGHT_125_COLOR,
+            TEXTBOX_TAB_BG_HOVERED_COLOR = base_color.LIGHT_250_COLOR,
+            TEXTBOX_TAB_BG_CLICKED_COLOR = base_color.LIGHT_100_COLOR,
+            TEXTBOX_TAB_TEXT_ACTIVE_COLOR = base_color.LIGHT_BASIC_TEXT_COLOR,
+            TEXTBOX_TAB_TEXT_PASSIVE_COLOR = base_color.LIGHT_600_COLOR,
+
+            TEXTBOX_ENTRY_TEXT_COLOR = base_color.LIGHT_800_COLOR,
+            TEXTBOX_ENTRY_TEXT_DISABLED_COLOR = base_color.LIGHT_500_COLOR,
+            TEXTBOX_ENTRY_BG_COLOR = base_color.LIGHT_250_COLOR,
+            TEXTBOX_ENTRY_BORDER_COLOR = base_color.LIGHT_400_COLOR,
+            TEXTBOX_ENTRY_PLACEHOLDER_COLOR = base_color.LIGHT_600_COLOR,
+            TEXTBOX_ENTRY_PLACEHOLDER_DISABLED_COLOR = base_color.LIGHT_400_COLOR,
+
+
+            # Sidebar
+            SIDEBAR_BG_COLOR = base_color.LIGHT_250_COLOR,
+
+            # Sidebar Features
+            SF__BG_COLOR = base_color.LIGHT_313_COLOR,
+            SF__HOVERED_BG_COLOR = base_color.LIGHT_333_COLOR,
+            SF__CLICKED_BG_COLOR = base_color.LIGHT_400_COLOR,
+            SF__TEXT_DISABLED_COLOR = base_color.LIGHT_600_COLOR,
+
+            SF__SWITCH_BOX_BG_COLOR = base_color.LIGHT_375_COLOR,
+            SF__SWITCH_BOX_HOVERED_BG_COLOR = base_color.LIGHT_400_COLOR,
+            SF__SWITCH_BOX_CLICKED_BG_COLOR = base_color.LIGHT_450_COLOR,
+            SF__SWITCH_BOX_ACTIVE_BG_COLOR = base_color.PRIMARY_350_COLOR,
+            SF__SWITCH_BOX_ACTIVE_HOVERED_BG_COLOR = base_color.PRIMARY_400_COLOR,
+            SF__SWITCH_BOX_ACTIVE_CLICKED_BG_COLOR = base_color.PRIMARY_500_COLOR,
+            SF__SWITCH_BOX_DISABLE_BG_COLOR = base_color.PRIMARY_200_COLOR,
+
+            SF__SWITCH_BOX_BUTTON_COLOR = base_color.LIGHT_150_COLOR,
+            # It's not working because It overrode internally.
+            SF__SWITCH_BOX_BUTTON_HOVERED_COLOR = base_color.LIGHT_300_COLOR,
+
+            SF__SELECTED_MARK_ACTIVE_BG_COLOR = base_color.PRIMARY_350_COLOR,
+            SF__SELECTED_MARK_ACTIVE_HOVERED_BG_COLOR = base_color.PRIMARY_400_COLOR,
+            SF__SELECTED_MARK_ACTIVE_CLICKED_BG_COLOR = base_color.PRIMARY_500_COLOR,
+            SF__SELECTED_MARK_DISABLE_BG_COLOR = base_color.PRIMARY_200_COLOR,
+
+
+            # Sidebar Languages Settings
+            SLS__TITLE_TEXT_COLOR = base_color.LIGHT_800_COLOR,
+
+            SLS__BG_COLOR = base_color.LIGHT_313_COLOR,
+
+            SLS__PRESETS_TAB_BG_HOVERED_COLOR = base_color.LIGHT_300_COLOR,
+            SLS__PRESETS_TAB_BG_CLICKED_COLOR = base_color.LIGHT_350_COLOR,
+            SLS__PRESETS_TAB_BG_PASSIVE_COLOR = base_color.LIGHT_250_COLOR,
+            SLS__PRESETS_TAB_BG_ACTIVE_COLOR = base_color.LIGHT_313_COLOR,
+            SLS__PRESETS_TAB_ACTIVE_TEXT_COLOR_PASSIVE = base_color.LIGHT_400_COLOR,
+            SLS__PRESETS_TAB_ACTIVE_TEXT_COLOR = base_color.LIGHT_BASIC_TEXT_COLOR,
+
+            SLS__BOX_BG_COLOR = base_color.LIGHT_333_COLOR,
+            SLS__BOX_SECTION_TITLE_TEXT_COLOR = base_color.LIGHT_800_COLOR,
+            SLS__BOX_ARROWS_TEXT_COLOR = base_color.LIGHT_700_COLOR,
+            SLS__BOX_ARROWS_SWAP_BUTTON_TEXT_COLOR = base_color.LIGHT_BASIC_TEXT_COLOR,
+            SLS__BOX_ARROWS_SWAP_BUTTON_HOVERED_COLOR = base_color.LIGHT_200_COLOR,
+            SLS__BOX_ARROWS_SWAP_BUTTON_CLICKED_COLOR = base_color.LIGHT_350_COLOR,
+
+            SLS__OPTIONMENU_BG_COLOR = base_color.LIGHT_200_COLOR,
+            SLS__OPTIONMENU_HOVERED_BG_COLOR = base_color.LIGHT_250_COLOR,
+            SLS__OPTIONMENU_CLICKED_BG_COLOR = base_color.LIGHT_400_COLOR,
+
+
+            CONFIG_BUTTON_BG_COLOR = base_color.LIGHT_250_COLOR,
+            CONFIG_BUTTON_HOVERED_BG_COLOR = base_color.LIGHT_350_COLOR,
+            CONFIG_BUTTON_CLICKED_BG_COLOR = base_color.LIGHT_400_COLOR,
+
+            MINIMIZE_SIDEBAR_BUTTON_BG_COLOR = base_color.LIGHT_250_COLOR,
+            MINIMIZE_SIDEBAR_BUTTON_HOVERED_BG_COLOR = base_color.LIGHT_350_COLOR,
+            MINIMIZE_SIDEBAR_BUTTON_CLICKED_BG_COLOR = base_color.LIGHT_400_COLOR,
+
+
+
+            TOP_BAR_BUTTON_BG_COLOR = base_color.LIGHT_175_COLOR,
+            TOP_BAR_BUTTON_HOVERED_BG_COLOR = base_color.LIGHT_300_COLOR,
+            TOP_BAR_BUTTON_CLICKED_BG_COLOR = base_color.LIGHT_350_COLOR,
+
+            UPDATE_AVAILABLE_BUTTON_TEXT_COLOR = base_color.PRIMARY_400_COLOR,
         ),
 
+
+        selectable_language_window = SimpleNamespace(
+            # Selectable Language Window
+            BASIC_TEXT_COLOR = base_color.LIGHT_BASIC_TEXT_COLOR,
+
+            MAIN_BG_COLOR = base_color.LIGHT_175_COLOR,
+
+            GO_BACK_BUTTON_BG_COLOR = base_color.LIGHT_325_COLOR,
+            GO_BACK_BUTTON_BG_HOVERED_COLOR = base_color.LIGHT_400_COLOR,
+            GO_BACK_BUTTON_BG_CLICKED_COLOR = base_color.LIGHT_500_COLOR,
+
+            TOP_BG_COLOR = base_color.LIGHT_250_COLOR,
+            TITLE_TEXT_COLOR = base_color.LIGHT_700_COLOR,
+            LANGUAGE_BUTTON_BG_COLOR = base_color.LIGHT_175_COLOR,
+            LANGUAGE_BUTTON_BG_HOVERED_COLOR = base_color.LIGHT_275_COLOR,
+            LANGUAGE_BUTTON_BG_CLICKED_COLOR = base_color.LIGHT_325_COLOR,
+        ),
+
+
+
+        # Modal Window (Main Window)
+        main_window_cover = SimpleNamespace(
+            TEXT_COLOR = base_color.LIGHT_BASIC_TEXT_COLOR,
+            BG_COLOR = "#fff",
+        ),
+
+
+        confirmation_modal = SimpleNamespace(
+            MESSAGE_TEXT_COLOR = base_color.LIGHT_BASIC_TEXT_COLOR,
+            FAKE_BORDER_COLOR = base_color.LIGHT_500_COLOR,
+            BG_COLOR = base_color.LIGHT_350_COLOR,
+            CONFIRMATION_BUTTONS_TEXT_COLOR = base_color.LIGHT_BASIC_TEXT_COLOR,
+
+            ACCEPT_BUTTON_BG_COLOR = base_color.PRIMARY_250_COLOR,
+            ACCEPT_BUTTON_HOVERED_BG_COLOR = base_color.PRIMARY_200_COLOR,
+            ACCEPT_BUTTON_CLICKED_BG_COLOR = base_color.PRIMARY_300_COLOR,
+            DENY_BUTTON_BG_COLOR = base_color.LIGHT_200_COLOR,
+            DENY_BUTTON_HOVERED_BG_COLOR = base_color.LIGHT_100_COLOR,
+            DENY_BUTTON_CLICKED_BG_COLOR = base_color.LIGHT_300_COLOR,
+        ),
+
+
         config_window = SimpleNamespace(
             # Common
-            BASIC_TEXT_COLOR = base_color.LIGHT_100_COLOR,
+            BASIC_TEXT_COLOR = base_color.LIGHT_BASIC_TEXT_COLOR,
+            LABELS_TEXT_COLOR = base_color.LIGHT_BASIC_TEXT_COLOR,
+            LABELS_DESC_TEXT_COLOR = base_color.LIGHT_600_COLOR,
+
+            LABELS_TEXT_DISABLED_COLOR = base_color.LIGHT_500_COLOR,
+
+            SB__BUTTON_COLOR = base_color.LIGHT_100_COLOR,
+            SB__BUTTON_HOVERED_COLOR = base_color.LIGHT_200_COLOR,
+            SB__BUTTON_CLICKED_COLOR = base_color.LIGHT_300_COLOR,
+
+
+            # Top bar
+            TOP_BAR_BG_COLOR = base_color.LIGHT_150_COLOR,
+
+            # Restart Button
+            RESTART_BUTTON_BG_COLOR = base_color.PRIMARY_300_COLOR,
+            RESTART_BUTTON_HOVERED_BG_COLOR = base_color.PRIMARY_250_COLOR,
+            RESTART_BUTTON_CLICKED_BG_COLOR = base_color.PRIMARY_400_COLOR,
+
+
+            # Compact Mode
+            COMPACT_MODE_SWITCH_BOX_BG_COLOR = base_color.LIGHT_500_COLOR,
+            COMPACT_MODE_SWITCH_BOX_ACTIVE_BG_COLOR = base_color.PRIMARY_300_COLOR,
+            COMPACT_MODE_SWITCH_BOX_BUTTON_COLOR = base_color.LIGHT_300_COLOR,
+            COMPACT_MODE_SWITCH_BOX_BUTTON_HOVERED_COLOR = base_color.LIGHT_250_COLOR,
+
+            # Main
+            MAIN_BG_COLOR = base_color.LIGHT_300_COLOR,
+
+            # This is for fake border color
+            SB__WRAPPER_BG_COLOR = base_color.LIGHT_400_COLOR,
+
+            SB__BG_COLOR = base_color.LIGHT_100_COLOR,
+
+            SB__OPTIONMENU_BG_COLOR = base_color.LIGHT_300_COLOR,
+            SB__OPTIONMENU_HOVERED_BG_COLOR = base_color.LIGHT_250_COLOR,
+            SB__OPTIONMENU_CLICKED_BG_COLOR = base_color.LIGHT_350_COLOR,
+            SB__DROPDOWN_MENU_WINDOW_BG_COLOR = base_color.LIGHT_300_COLOR,
+            SB__DROPDOWN_MENU_WINDOW_BORDER_COLOR = base_color.LIGHT_800_COLOR,
+            SB__DROPDOWN_MENU_BG_COLOR = base_color.LIGHT_200_COLOR,
+            SB__DROPDOWN_MENU_HOVERED_BG_COLOR = base_color.LIGHT_100_COLOR,
+            SB__DROPDOWN_MENU_CLICKED_BG_COLOR = base_color.LIGHT_300_COLOR,
+
+            SB__SLIDER_BG_COLOR = base_color.LIGHT_400_COLOR,
+            SB__SLIDER_PROGRESS_BG_COLOR = base_color.LIGHT_550_COLOR,
+            SB__SLIDER_BUTTON_COLOR = base_color.LIGHT_500_COLOR,
+            SB__SLIDER_BUTTON_HOVERED_COLOR = base_color.LIGHT_600_COLOR,
+            SB__SLIDER_TOOLTIP_BG_COLOR = base_color.LIGHT_200_COLOR,
+            SB__SLIDER_TOOLTIP_TEXT_COLOR = base_color.LIGHT_800_COLOR,
+
+            SB__SWITCH_BOX_BG_COLOR = base_color.LIGHT_400_COLOR,
+            SB__SWITCH_BOX_ACTIVE_BG_COLOR = base_color.PRIMARY_300_COLOR,
+            SB__SWITCH_BOX_BUTTON_COLOR = base_color.LIGHT_300_COLOR,
+            SB__SWITCH_BOX_BUTTON_HOVERED_COLOR = base_color.LIGHT_200_COLOR,
+
+            SB__CHECKBOX_BORDER_COLOR = base_color.LIGHT_600_COLOR,
+            SB__CHECKBOX_HOVER_COLOR = base_color.LIGHT_350_COLOR,
+            SB__CHECKBOX_CHECKED_COLOR = base_color.PRIMARY_250_COLOR,
+            SB__CHECKBOX_CHECKMARK_COLOR = base_color.LIGHT_BASIC_TEXT_COLOR,
+
+            SB__ENTRY_TEXT_COLOR = base_color.LIGHT_900_COLOR,
+            SB__ENTRY_BG_COLOR = base_color.LIGHT_300_COLOR,
+            SB__ENTRY_BORDER_COLOR = base_color.LIGHT_400_COLOR,
+
+
+            SB__PROGRESSBAR_X_SLIDER__PROGRESSBAR_BG_COLOR = base_color.LIGHT_350_COLOR,
+            SB__PROGRESSBAR_X_SLIDER__PROGRESSBAR_PROGRESS_BG_COLOR = base_color.PRIMARY_500_COLOR,
+            SB__PROGRESSBAR_X_SLIDER__PROGRESSBAR_PROGRESS_EXCEED_THRESHOLD_BG_COLOR = base_color.PRIMARY_300_COLOR,
+
+            SB__PROGRESSBAR_X_SLIDER__SLIDER_BUTTON_COLOR = base_color.PRIMARY_300_COLOR,
+            SB__PROGRESSBAR_X_SLIDER__SLIDER_BUTTON_HOVERED_COLOR = base_color.PRIMARY_450_COLOR,
+
+            SB__PROGRESSBAR_X_SLIDER__PASSIVE_BUTTON_COLOR = base_color.LIGHT_300_COLOR,
+            SB__PROGRESSBAR_X_SLIDER__PASSIVE_BUTTON_HOVERED_COLOR = base_color.LIGHT_250_COLOR,
+            SB__PROGRESSBAR_X_SLIDER__PASSIVE_BUTTON_CLICKED_COLOR = base_color.LIGHT_350_COLOR,
+            SB__PROGRESSBAR_X_SLIDER__PASSIVE_BUTTON_DISABLED_COLOR = base_color.LIGHT_150_COLOR,
+
+            SB__PROGRESSBAR_X_SLIDER__ACTIVE_BUTTON_COLOR = base_color.PRIMARY_250_COLOR,
+            SB__PROGRESSBAR_X_SLIDER__ACTIVE_BUTTON_HOVERED_COLOR = base_color.PRIMARY_300_COLOR,
+            SB__PROGRESSBAR_X_SLIDER__ACTIVE_BUTTON_CLICKED_COLOR = base_color.PRIMARY_400_COLOR,
+
+            SB__ADD_AND_DELETE_ABLE_LIST__ADD_BUTTON_COLOR = base_color.PRIMARY_250_COLOR,
+            SB__ADD_AND_DELETE_ABLE_LIST__ADD_BUTTON_HOVERED_COLOR = base_color.PRIMARY_300_COLOR,
+            SB__ADD_AND_DELETE_ABLE_LIST__ADD_BUTTON_CLICKED_COLOR = base_color.PRIMARY_400_COLOR,
+            SB__ADD_AND_DELETE_ABLE_LIST_BG_COLOR = base_color.LIGHT_300_COLOR,
+
+            SB__ADD_AND_DELETE_ABLE_LIST__VALUES_ACTION_BUTTON_HOVERED_BG_COLOR = base_color.LIGHT_375_COLOR,
+            SB__ADD_AND_DELETE_ABLE_LIST__VALUES_ACTION_BUTTON_CLICKED_BG_COLOR = base_color.LIGHT_450_COLOR,
+
+            SB__ADD_AND_DELETE_ABLE_LIST_DELETED_BG_COLOR = base_color.LIGHT_200_COLOR,
+            SB__ADD_AND_DELETE_ABLE_LIST__VALUES_DELETED_BUTTON_HOVERED_BG_COLOR = base_color.LIGHT_300_COLOR,
+            SB__ADD_AND_DELETE_ABLE_LIST__VALUES_DELETED_BUTTON_CLICKED_BG_COLOR = base_color.LIGHT_400_COLOR,
+
+
+            SB__MESSAGE_FORMAT__EXAMPLE_BG_COLOR = "#5a6b81", # from VRChat' chat display color
+            # source #3a4554 (800). and this one is 600 (https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors)
+            SB__MESSAGE_FORMAT__EXAMPLE_TEXT_COLOR = base_color.LIGHT_100_COLOR,
+            SB__MESSAGE_FORMAT__SWAP_BUTTON_COLOR = base_color.LIGHT_200_COLOR,
+            SB__MESSAGE_FORMAT__SWAP_BUTTON_HOVERED_COLOR = base_color.LIGHT_250_COLOR,
+            SB__MESSAGE_FORMAT__SWAP_BUTTON_CLICKED_COLOR = base_color.LIGHT_300_COLOR,
+
+
+
+
+            # Side menu
+            SIDE_MENU_BG_COLOR = base_color.LIGHT_300_COLOR,
+
+            SIDE_MENU_LABELS_BG_COLOR = base_color.LIGHT_300_COLOR,
+            SIDE_MENU_LABELS_BG_FOR_FAKE_BORDER_COLOR = base_color.LIGHT_300_COLOR,
+            SIDE_MENU_LABELS_HOVERED_BG_COLOR = base_color.LIGHT_350_COLOR,
+            SIDE_MENU_LABELS_CLICKED_BG_COLOR = base_color.PRIMARY_200_COLOR,
+            SIDE_MENU_LABELS_SELECTED_TEXT_COLOR = base_color.PRIMARY_350_COLOR,
+
+            SIDE_MENU_SELECTED_MARK_ACTIVE_BG_COLOR = base_color.PRIMARY_350_COLOR,
+
+            NOW_VERSION_TEXT_COLOR = base_color.LIGHT_800_COLOR,
+
+            # Error Message Window for Config Window
+            # Check DarkTheme's this part. Based on the color bb4448, used to source, and pick up the number 600 by the generator (https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors)
+            SB__ERROR_MESSAGE_BG_COLOR = "#cd4c4f",
+            SB__ERROR_MESSAGE_TEXT_COLOR = "#fff",
         ),
 
 
+
         image_file = SimpleNamespace(
             VRCT_LOGO = getImageFileFromUiUtils("vrct_logo_for_light_mode.png"),
             VRCT_LOGO_MARK = getImageFileFromUiUtils("vrct_logo_mark_black.png"),
 
-
+            TRANSLATION_ICON = getImageFileFromUiUtils("translation_icon_black.png"),
-            TRANSLATION_ICON = getImageFileFromUiUtils("translation_icon_white.png"),
             TRANSLATION_ICON_DISABLED = getImageFileFromUiUtils("translation_icon_disabled.png"),
-            MIC_ICON = getImageFileFromUiUtils("mic_icon_white.png"),
+            MIC_ICON = getImageFileFromUiUtils("mic_icon_black.png"),
             MIC_ICON_DISABLED = getImageFileFromUiUtils("mic_icon_disabled.png"),
-            HEADPHONES_ICON = getImageFileFromUiUtils("headphones_icon_white.png"),
+            HEADPHONES_ICON = getImageFileFromUiUtils("headphones_icon_black.png"),
             HEADPHONES_ICON_DISABLED = getImageFileFromUiUtils("headphones_icon_disabled.png"),
-            FOREGROUND_ICON = getImageFileFromUiUtils("foreground_icon_white.png"),
+            FOREGROUND_ICON = getImageFileFromUiUtils("foreground_icon_black.png"),
             FOREGROUND_ICON_DISABLED = getImageFileFromUiUtils("foreground_icon_disabled.png"),
 
-            NARROW_ARROW_DOWN = getImageFileFromUiUtils("narrow_arrow_down.png"),
+            NARROW_ARROW_DOWN = getImageFileFromUiUtils("narrow_arrow_down_black.png"),
 
-            CONFIGURATION_ICON = getImageFileFromUiUtils("configuration_icon_white.png"),
+            CONFIGURATION_ICON = getImageFileFromUiUtils("configuration_icon_black.png"),
             CONFIGURATION_ICON_DISABLED = getImageFileFromUiUtils("configuration_icon_disabled.png"),
 
-            ARROW_LEFT = getImageFileFromUiUtils("arrow_left_white.png"),
+            ARROW_LEFT = getImageFileFromUiUtils("arrow_left_black.png"),
             ARROW_LEFT_DISABLED = getImageFileFromUiUtils("arrow_left_disabled.png"),
 
-            HELP_ICON = getImageFileFromUiUtils("help_icon_white.png"),
+            REFRESH_UPDATE_ICON = getImageFileFromUiUtils("refresh_update_icon.png"),
+            REFRESH_ICON = getImageFileFromUiUtils("refresh_icon.png"),
+            HELP_ICON = getImageFileFromUiUtils("help_icon_black.png"),
+
+            CANCEL_ICON = getImageFileFromUiUtils("cancel_icon.png"),
+            REDO_ICON = getImageFileFromUiUtils("redo_icon_black.png"),
+            SWAP_ICON = getImageFileFromUiUtils("swap_icon_black.png"),
+            FOLDER_OPEN_ICON = getImageFileFromUiUtils("folder_open_icon_black.png"),
         ),
     )