[Add] New GUI from Shiina

2023-08-27 04:56:36 +09:00
parent cd4e431be2
commit 644ce9afa4
54 changed files with 3364 additions and 614 deletions
--- a/vrct_gui/ui_managers/ColorThemeManager.py
+++ b/vrct_gui/ui_managers/ColorThemeManager.py
@@ -0,0 +1,360 @@
+from types import SimpleNamespace
+
+class ColorThemeManager():
+    def __init__(self, theme):
+        print(theme)
+        self.main = SimpleNamespace()
+        self.config_window = SimpleNamespace()
+
+        self.PRIMARY_100_COLOR = "#c4eac1"
+        self.PRIMARY_200_COLOR = "#9cdd98"
+        self.PRIMARY_300_COLOR = "#70d16c"
+        self.PRIMARY_400_COLOR = "#49c649"
+        self.PRIMARY_500_COLOR = "#0abb1d"
+        self.PRIMARY_600_COLOR = "#00ac11"
+        self.PRIMARY_650_COLOR = "#00A309"
+        self.PRIMARY_700_COLOR = "#009900"
+        self.PRIMARY_800_COLOR = "#008800"
+        self.PRIMARY_900_COLOR = "#006900"
+
+
+        self.DARK_100_COLOR = "#f5f7fb"
+        self.DARK_200_COLOR = "#f1f2f6"
+        self.DARK_300_COLOR = "#e9eaee"
+        self.DARK_400_COLOR = "#c7c8cc"
+        self.DARK_500_COLOR = "#a9aaae"
+        self.DARK_600_COLOR = "#7f8084"
+        self.DARK_700_COLOR = "#6a6c6f"
+        self.DARK_750_COLOR = "#5b5c5f"
+        self.DARK_800_COLOR = "#4b4c4f"
+        self.DARK_825_COLOR = "#434447"
+        self.DARK_850_COLOR = "#3a3b3e"
+        self.DARK_875_COLOR = "#323336"
+        self.DARK_888_COLOR = "#2e2f32"
+        self.DARK_900_COLOR = "#292a2d"
+        self.DARK_925_COLOR = "#242528"
+        self.DARK_950_COLOR = "#1f2022"
+        self.DARK_975_COLOR = "#1a1b1d"
+        self.DARK_1000_COLOR = "#151517" # THE DARKEST COLOR
+
+
+        self.LIGHT_100_COLOR = "#f2f2f2" # THE LIGHTEST COLOR
+        self.LIGHT_200_COLOR = "#e9e9e9"
+        self.LIGHT_250_COLOR = "#e1e1e1"
+        self.LIGHT_300_COLOR = "#d9d9d9"
+        self.LIGHT_325_COLOR = "#d0d0d0"
+        self.LIGHT_350_COLOR = "#c7c7c7"
+        self.LIGHT_375_COLOR = "#bebebe"
+        self.LIGHT_400_COLOR = "#b5b5b5"
+        self.LIGHT_450_COLOR = "#a5a5a5"
+        self.LIGHT_500_COLOR = "#959595"
+        self.LIGHT_600_COLOR = "#6d6d6d"
+        self.LIGHT_700_COLOR = "#5a5a5a"
+        self.LIGHT_750_COLOR = "#515151"
+        self.LIGHT_800_COLOR = "#3b3b3b"
+        self.LIGHT_850_COLOR = "#323232"
+        self.LIGHT_875_COLOR = "#2b2b2b"
+        self.LIGHT_900_COLOR = "#1b1b1b"
+        # self.LIGHT_925_COLOR = "#121212"
+        # self.LIGHT_950_COLOR = "#0c0c0c"
+        # self.LIGHT_975_COLOR = "#070707"
+        self.LIGHT_1000_COLOR = "#010101"
+
+
+        if theme == "Dark":
+            self._createDarkModeColor()
+        elif theme == "Light":
+            self._createLightModeColor()
+
+
+    def _createDarkModeColor(self):
+        # Common
+        self.main.BASIC_TEXT_COLOR = self.LIGHT_100_COLOR
+        self.main.LABELS_TEXT_COLOR = self.main.BASIC_TEXT_COLOR
+
+        # Main
+        self.main.MAIN_BG_COLOR = self.DARK_900_COLOR
+
+        self.main.TEXTBOX_BG_COLOR = self.DARK_950_COLOR
+        self.main.TEXTBOX_TEXT_COLOR = self.main.BASIC_TEXT_COLOR
+        self.main.TEXTBOX_TAB_BG_PASSIVE_COLOR = self.DARK_850_COLOR
+        self.main.TEXTBOX_TAB_BG_ACTIVE_COLOR = self.main.TEXTBOX_BG_COLOR
+        self.main.TEXTBOX_TAB_BG_HOVERED_COLOR = self.DARK_800_COLOR
+        self.main.TEXTBOX_TAB_BG_CLICKED_COLOR = self.DARK_850_COLOR
+        self.main.TEXTBOX_TAB_TEXT_ACTIVE_COLOR = self.main.BASIC_TEXT_COLOR
+        self.main.TEXTBOX_TAB_TEXT_PASSIVE_COLOR = self.DARK_500_COLOR
+
+        self.main.TEXTBOX_ENTRY_TEXT_COLOR = self.DARK_300_COLOR
+        self.main.TEXTBOX_ENTRY_TEXT_DISABLED_COLOR = self.DARK_500_COLOR
+        self.main.TEXTBOX_ENTRY_BG_COLOR = self.DARK_875_COLOR
+        self.main.TEXTBOX_ENTRY_BORDER_COLOR = self.DARK_750_COLOR
+        self.main.TEXTBOX_ENTRY_PLACEHOLDER_COLOR = self.DARK_500_COLOR
+        self.main.TEXTBOX_ENTRY_PLACEHOLDER_DISABLED_COLOR = self.DARK_700_COLOR
+
+
+
+        # Sidebar
+        self.main.SIDEBAR_BG_COLOR = self.DARK_875_COLOR
+
+        # Sidebar Features
+        self.main.SF__BG_COLOR = self.DARK_850_COLOR
+        self.main.SF__HOVERED_BG_COLOR = self.DARK_800_COLOR
+        self.main.SF__CLICKED_BG_COLOR = self.DARK_900_COLOR
+        self.main.SF__TEXT_DISABLED_COLOR = self.DARK_500_COLOR
+
+        self.main.SF__SWITCH_BOX_BG_COLOR = self.DARK_800_COLOR
+        self.main.SF__SWITCH_BOX_HOVERED_BG_COLOR = self.DARK_750_COLOR
+        self.main.SF__SWITCH_BOX_CLICKED_BG_COLOR = self.DARK_850_COLOR
+        self.main.SF__SWITCH_BOX_ACTIVE_BG_COLOR = self.PRIMARY_650_COLOR
+        self.main.SF__SWITCH_BOX_ACTIVE_HOVERED_BG_COLOR = self.PRIMARY_500_COLOR
+        self.main.SF__SWITCH_BOX_ACTIVE_CLICKED_BG_COLOR = self.PRIMARY_700_COLOR
+        self.main.SF__SWITCH_BOX_DISABLE_BG_COLOR = self.PRIMARY_900_COLOR
+
+        self.main.SF__SELECTED_MARK_ACTIVE_BG_COLOR = self.main.SF__SWITCH_BOX_ACTIVE_BG_COLOR
+        self.main.SF__SELECTED_MARK_ACTIVE_HOVERED_BG_COLOR = self.main.SF__SWITCH_BOX_ACTIVE_HOVERED_BG_COLOR
+        self.main.SF__SELECTED_MARK_ACTIVE_CLICKED_BG_COLOR = self.main.SF__SWITCH_BOX_ACTIVE_CLICKED_BG_COLOR
+        self.main.SF__SELECTED_MARK_DISABLE_BG_COLOR = self.main.SF__SWITCH_BOX_DISABLE_BG_COLOR
+
+
+        # Sidebar quick settings
+        self.main.SQLS__TITLE_TEXT_COLOR = self.DARK_400_COLOR
+
+        self.main.SQLS__BG_COLOR = self.DARK_825_COLOR
+
+        self.main.SQLS__PRESETS_TAB_BG_HOVERED_COLOR = self.DARK_850_COLOR
+        self.main.SQLS__PRESETS_TAB_BG_CLICKED_COLOR = self.DARK_888_COLOR
+        self.main.SQLS__PRESETS_TAB_BG_PASSIVE_COLOR = self.main.SIDEBAR_BG_COLOR
+        self.main.SQLS__PRESETS_TAB_BG_ACTIVE_COLOR = self.main.SQLS__BG_COLOR
+        self.main.SQLS__PRESETS_TAB_ACTIVE_TEXT_COLOR_PASSIVE = self.DARK_600_COLOR
+        self.main.SQLS__PRESETS_TAB_ACTIVE_TEXT_COLOR = self.main.BASIC_TEXT_COLOR
+
+        self.main.SQLS__BOX_BG_COLOR = self.DARK_850_COLOR
+        self.main.SQLS__BOX_SECTION_TITLE_TEXT_COLOR = self.DARK_400_COLOR
+        self.main.SQLS__BOX_ARROWS_TEXT_COLOR = self.DARK_500_COLOR
+
+        self.main.SQLS__DROPDOWN_MENU_BG_COLOR = self.DARK_900_COLOR
+
+
+        self.main.CONFIG_BUTTON_BG_COLOR = self.main.SIDEBAR_BG_COLOR
+        self.main.CONFIG_BUTTON_HOVERED_BG_COLOR = self.DARK_800_COLOR
+        self.main.CONFIG_BUTTON_CLICKED_BG_COLOR = self.DARK_900_COLOR
+        # self.main.CONFIG_BUTTON_DISABLE_COLOR = self.DARK_900_COLOR
+
+        self.main.MINIMIZE_SIDEBAR_BUTTON_BG_COLOR = self.main.SIDEBAR_BG_COLOR
+        self.main.MINIMIZE_SIDEBAR_BUTTON_HOVERED_BG_COLOR = self.DARK_800_COLOR
+        self.main.MINIMIZE_SIDEBAR_BUTTON_CLICKED_BG_COLOR = self.DARK_900_COLOR
+        # self.main.MINIMIZE_SIDEBAR_BUTTON_DISABLE_COLOR = self.DARK_900_COLOR
+
+        self.main.HELP_AND_INFO_BUTTON_BG_COLOR = self.main.MAIN_BG_COLOR
+        self.main.HELP_AND_INFO_BUTTON_HOVERED_BG_COLOR = self.DARK_850_COLOR
+        self.main.HELP_AND_INFO_BUTTON_CLICKED_BG_COLOR = self.DARK_950_COLOR
+        # self.main.HELP_AND_INFO_BUTTON_DISABLE_COLOR = self.DARK_900_COLOR
+
+
+        # Common
+        self.config_window.BASIC_TEXT_COLOR = self.main.BASIC_TEXT_COLOR
+        self.config_window.LABELS_TEXT_COLOR = self.config_window.BASIC_TEXT_COLOR
+        self.config_window.LABELS_DESC_TEXT_COLOR = self.DARK_500_COLOR
+
+
+        # Top bar
+        self.config_window.TOP_BAR_BG_COLOR = self.DARK_850_COLOR
+
+
+        # Main
+        self.config_window.MAIN_BG_COLOR = self.DARK_950_COLOR
+
+        # This is for fake border color
+        self.config_window.SB__WRAPPER_BG_COLOR = self.DARK_750_COLOR
+
+        self.config_window.SB__BG_COLOR = self.DARK_888_COLOR
+
+        self.config_window.SB__OPTIONMENU_BG_COLOR = self.DARK_925_COLOR
+        self.config_window.SB__OPTIONMENU_HOVERED_BG_COLOR = self.DARK_850_COLOR
+
+        self.config_window.SB__SLIDER_BUTTON_COLOR = self.DARK_700_COLOR
+        self.config_window.SB__SLIDER_BUTTON_HOVERED_COLOR = self.DARK_600_COLOR
+
+        self.config_window.SB__SWITCH_BOX_BG_COLOR = self.main.SF__SWITCH_BOX_BG_COLOR
+        self.config_window.SB__SWITCH_BOX_ACTIVE_BG_COLOR = self.main.SF__SWITCH_BOX_ACTIVE_BG_COLOR
+
+        self.config_window.SB__CHECKBOX_BORDER_COLOR = self.DARK_500_COLOR
+        self.config_window.SB__CHECKBOX_HOVER_COLOR = self.DARK_800_COLOR
+        self.config_window.SB__CHECKBOX_CHECKED_COLOR = self.PRIMARY_700_COLOR
+        self.config_window.SB__CHECKBOX_CHECKMARK_COLOR = self.config_window.BASIC_TEXT_COLOR
+
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__SLIDER_BUTTON_COLOR = self.PRIMARY_700_COLOR
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__SLIDER_BUTTON_HOVERED_COLOR = self.PRIMARY_500_COLOR
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__PASSIVE_BUTTON_COLOR = self.DARK_800_COLOR
+
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__PASSIVE_BUTTON_COLOR = self.DARK_800_COLOR
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__PASSIVE_BUTTON_HOVERED_COLOR = self.DARK_700_COLOR
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__PASSIVE_BUTTON_CLICKED_COLOR = self.DARK_900_COLOR
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__PASSIVE_BUTTON_DISABLED_COLOR = self.DARK_850_COLOR
+
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__ACTIVE_BUTTON_COLOR = self.PRIMARY_700_COLOR
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__ACTIVE_BUTTON_HOVERED_COLOR = self.PRIMARY_600_COLOR
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__ACTIVE_BUTTON_CLICKED_COLOR = self.PRIMARY_900_COLOR
+        # self.config_window.SB__PROGRESSBAR_X_SLIDER__ACTIVE_BUTTON_DISABLED_COLOR = self.PRIMARY_900_COLOR
+
+
+        # Side menu
+        self.config_window.SIDE_MENU_BG_COLOR = self.config_window.MAIN_BG_COLOR
+
+        self.config_window.SIDE_MENU_LABELS_BG_COLOR = self.config_window.SIDE_MENU_BG_COLOR
+        self.config_window.SIDE_MENU_LABELS_BG_FOR_FAKE_BORDER_COLOR = self.config_window.SIDE_MENU_BG_COLOR
+        self.config_window.SIDE_MENU_LABELS_HOVERED_BG_COLOR = self.DARK_850_COLOR
+        self.config_window.SIDE_MENU_LABELS_CLICKED_BG_COLOR = self.PRIMARY_900_COLOR
+        self.config_window.SIDE_MENU_LABELS_SELECTED_TEXT_COLOR = self.PRIMARY_300_COLOR
+
+        self.config_window.SIDE_MENU_SELECTED_MARK_ACTIVE_BG_COLOR = self.main.SF__SWITCH_BOX_ACTIVE_BG_COLOR
+
+
+
+
+
+
+
+
+
+    def _createLightModeColor(self):
+        # Common
+        self.main.BASIC_TEXT_COLOR = self.DARK_1000_COLOR
+        self.main.LABELS_TEXT_COLOR = self.main.BASIC_TEXT_COLOR
+
+        # Main
+        self.main.MAIN_BG_COLOR = self.LIGHT_300_COLOR
+
+        self.main.TEXTBOX_BG_COLOR = self.LIGHT_200_COLOR
+        self.main.TEXTBOX_TEXT_COLOR = self.main.BASIC_TEXT_COLOR
+        self.main.TEXTBOX_TAB_BG_PASSIVE_COLOR = self.LIGHT_350_COLOR
+        self.main.TEXTBOX_TAB_BG_ACTIVE_COLOR = self.main.TEXTBOX_BG_COLOR
+        self.main.TEXTBOX_TAB_BG_HOVERED_COLOR = self.LIGHT_300_COLOR
+        self.main.TEXTBOX_TAB_BG_CLICKED_COLOR = self.LIGHT_350_COLOR
+        self.main.TEXTBOX_TAB_TEXT_ACTIVE_COLOR = self.main.BASIC_TEXT_COLOR
+        self.main.TEXTBOX_TAB_TEXT_PASSIVE_COLOR = self.LIGHT_500_COLOR
+
+        self.main.TEXTBOX_ENTRY_TEXT_COLOR = self.LIGHT_800_COLOR
+        self.main.TEXTBOX_ENTRY_TEXT_DISABLED_COLOR = self.LIGHT_500_COLOR
+        self.main.TEXTBOX_ENTRY_BG_COLOR = self.LIGHT_325_COLOR
+        self.main.TEXTBOX_ENTRY_BORDER_COLOR = self.LIGHT_450_COLOR
+        self.main.TEXTBOX_ENTRY_PLACEHOLDER_COLOR = self.LIGHT_600_COLOR
+        self.main.TEXTBOX_ENTRY_PLACEHOLDER_DISABLED_COLOR = self.LIGHT_700_COLOR
+
+
+
+        # Sidebar
+        self.main.SIDEBAR_BG_COLOR = self.LIGHT_375_COLOR
+
+        # Sidebar Features
+        self.main.SF__BG_COLOR = self.LIGHT_350_COLOR
+        self.main.SF__HOVERED_BG_COLOR = self.LIGHT_300_COLOR
+        self.main.SF__CLICKED_BG_COLOR = self.LIGHT_200_COLOR
+        self.main.SF__TEXT_DISABLED_COLOR = self.LIGHT_500_COLOR
+
+        self.main.SF__SWITCH_BOX_BG_COLOR = self.LIGHT_300_COLOR
+        self.main.SF__SWITCH_BOX_HOVERED_BG_COLOR = self.LIGHT_450_COLOR
+        self.main.SF__SWITCH_BOX_CLICKED_BG_COLOR = self.LIGHT_350_COLOR
+        self.main.SF__SWITCH_BOX_ACTIVE_BG_COLOR = self.PRIMARY_650_COLOR
+        self.main.SF__SWITCH_BOX_ACTIVE_HOVERED_BG_COLOR = self.PRIMARY_500_COLOR
+        self.main.SF__SWITCH_BOX_ACTIVE_CLICKED_BG_COLOR = self.PRIMARY_700_COLOR
+        self.main.SF__SWITCH_BOX_DISABLE_BG_COLOR = self.PRIMARY_900_COLOR
+
+        self.main.SF__SELECTED_MARK_ACTIVE_BG_COLOR = self.main.SF__SWITCH_BOX_ACTIVE_BG_COLOR
+        self.main.SF__SELECTED_MARK_ACTIVE_HOVERED_BG_COLOR = self.main.SF__SWITCH_BOX_ACTIVE_HOVERED_BG_COLOR
+        self.main.SF__SELECTED_MARK_ACTIVE_CLICKED_BG_COLOR = self.main.SF__SWITCH_BOX_ACTIVE_CLICKED_BG_COLOR
+        self.main.SF__SELECTED_MARK_DISABLE_BG_COLOR = self.main.SF__SWITCH_BOX_DISABLE_BG_COLOR
+
+
+        # Sidebar quick settings
+        self.main.SQLS__TITLE_TEXT_COLOR = self.LIGHT_800_COLOR
+
+        self.main.SQLS__BG_COLOR = self.LIGHT_300_COLOR
+
+        self.main.SQLS__PRESETS_TAB_BG_HOVERED_COLOR = self.LIGHT_350_COLOR
+        self.main.SQLS__PRESETS_TAB_BG_CLICKED_COLOR = self.LIGHT_800_COLOR
+        self.main.SQLS__PRESETS_TAB_BG_PASSIVE_COLOR = self.main.SIDEBAR_BG_COLOR
+        self.main.SQLS__PRESETS_TAB_BG_ACTIVE_COLOR = self.main.SQLS__BG_COLOR
+        self.main.SQLS__PRESETS_TAB_ACTIVE_TEXT_COLOR_PASSIVE = self.LIGHT_600_COLOR
+        self.main.SQLS__PRESETS_TAB_ACTIVE_TEXT_COLOR = self.main.BASIC_TEXT_COLOR
+
+        self.main.SQLS__BOX_BG_COLOR = self.LIGHT_350_COLOR
+        self.main.SQLS__BOX_SECTION_TITLE_TEXT_COLOR = self.LIGHT_800_COLOR
+        self.main.SQLS__BOX_ARROWS_TEXT_COLOR = self.LIGHT_700_COLOR
+
+        self.main.SQLS__DROPDOWN_MENU_BG_COLOR = self.LIGHT_500_COLOR
+
+
+        self.main.CONFIG_BUTTON_BG_COLOR = self.main.SIDEBAR_BG_COLOR
+        self.main.CONFIG_BUTTON_HOVERED_BG_COLOR = self.LIGHT_800_COLOR
+        self.main.CONFIG_BUTTON_CLICKED_BG_COLOR = self.LIGHT_900_COLOR
+        # self.main.CONFIG_BUTTON_DISABLE_COLOR = self.LIGHT_900_COLOR
+
+        self.main.MINIMIZE_SIDEBAR_BUTTON_BG_COLOR = self.main.SIDEBAR_BG_COLOR
+        self.main.MINIMIZE_SIDEBAR_BUTTON_HOVERED_BG_COLOR = self.LIGHT_800_COLOR
+        self.main.MINIMIZE_SIDEBAR_BUTTON_CLICKED_BG_COLOR = self.LIGHT_900_COLOR
+        # self.main.MINIMIZE_SIDEBAR_BUTTON_DISABLE_COLOR = self.LIGHT_900_COLOR
+
+        self.main.HELP_AND_INFO_BUTTON_BG_COLOR = self.main.MAIN_BG_COLOR
+        self.main.HELP_AND_INFO_BUTTON_HOVERED_BG_COLOR = self.LIGHT_350_COLOR
+        self.main.HELP_AND_INFO_BUTTON_CLICKED_BG_COLOR = self.LIGHT_450_COLOR
+        # self.main.HELP_AND_INFO_BUTTON_DISABLE_COLOR = self.LIGHT_900_COLOR
+
+
+        # Common
+        self.config_window.BASIC_TEXT_COLOR = self.main.BASIC_TEXT_COLOR
+        self.config_window.LABELS_TEXT_COLOR = self.config_window.BASIC_TEXT_COLOR
+        self.config_window.LABELS_DESC_TEXT_COLOR = self.DARK_500_COLOR
+
+
+        # Top bar
+        self.config_window.TOP_BAR_BG_COLOR = self.DARK_850_COLOR
+
+
+        # Main
+        self.config_window.MAIN_BG_COLOR = self.DARK_950_COLOR
+
+        # This is for fake border color
+        self.config_window.SB__WRAPPER_BG_COLOR = self.DARK_750_COLOR
+
+        self.config_window.SB__BG_COLOR = self.DARK_888_COLOR
+
+        self.config_window.SB__OPTIONMENU_BG_COLOR = self.DARK_925_COLOR
+        self.config_window.SB__OPTIONMENU_HOVERED_BG_COLOR = self.DARK_850_COLOR
+
+        self.config_window.SB__SLIDER_BUTTON_COLOR = self.DARK_700_COLOR
+        self.config_window.SB__SLIDER_BUTTON_HOVERED_COLOR = self.DARK_600_COLOR
+
+        self.config_window.SB__SWITCH_BOX_BG_COLOR = self.main.SF__SWITCH_BOX_BG_COLOR
+        self.config_window.SB__SWITCH_BOX_ACTIVE_BG_COLOR = self.main.SF__SWITCH_BOX_ACTIVE_BG_COLOR
+
+        self.config_window.SB__CHECKBOX_BORDER_COLOR = self.DARK_500_COLOR
+        self.config_window.SB__CHECKBOX_HOVER_COLOR = self.DARK_800_COLOR
+        self.config_window.SB__CHECKBOX_CHECKED_COLOR = self.PRIMARY_700_COLOR
+        self.config_window.SB__CHECKBOX_CHECKMARK_COLOR = self.config_window.BASIC_TEXT_COLOR
+
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__SLIDER_BUTTON_COLOR = self.PRIMARY_700_COLOR
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__SLIDER_BUTTON_HOVERED_COLOR = self.PRIMARY_500_COLOR
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__PASSIVE_BUTTON_COLOR = self.DARK_800_COLOR
+
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__PASSIVE_BUTTON_COLOR = self.DARK_800_COLOR
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__PASSIVE_BUTTON_HOVERED_COLOR = self.DARK_700_COLOR
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__PASSIVE_BUTTON_CLICKED_COLOR = self.DARK_900_COLOR
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__PASSIVE_BUTTON_DISABLED_COLOR = self.DARK_850_COLOR
+
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__ACTIVE_BUTTON_COLOR = self.PRIMARY_700_COLOR
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__ACTIVE_BUTTON_HOVERED_COLOR = self.PRIMARY_600_COLOR
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__ACTIVE_BUTTON_CLICKED_COLOR = self.PRIMARY_900_COLOR
+        # self.config_window.SB__PROGRESSBAR_X_SLIDER__ACTIVE_BUTTON_DISABLED_COLOR = self.PRIMARY_900_COLOR
+
+
+        # Side menu
+        self.config_window.SIDE_MENU_BG_COLOR = self.config_window.MAIN_BG_COLOR
+
+        self.config_window.SIDE_MENU_LABELS_BG_COLOR = self.config_window.SIDE_MENU_BG_COLOR
+        self.config_window.SIDE_MENU_LABELS_BG_FOR_FAKE_BORDER_COLOR = self.config_window.SIDE_MENU_BG_COLOR
+        self.config_window.SIDE_MENU_LABELS_HOVERED_BG_COLOR = self.DARK_850_COLOR
+        self.config_window.SIDE_MENU_LABELS_CLICKED_BG_COLOR = self.PRIMARY_900_COLOR
+        self.config_window.SIDE_MENU_LABELS_SELECTED_TEXT_COLOR = self.PRIMARY_300_COLOR
+
+        self.config_window.SIDE_MENU_SELECTED_MARK_ACTIVE_BG_COLOR = self.main.SF__SWITCH_BOX_ACTIVE_BG_COLOR
--- a/vrct_gui/ui_managers/ImageFilenameManager.py
+++ b/vrct_gui/ui_managers/ImageFilenameManager.py
@@ -0,0 +1,54 @@
+class ImageFilenameManager():
+    def __init__(self, theme:str ="Dark"):
+        if theme == "Dark":
+            return self._createDarkModeImages()
+        elif theme == "Light":
+            return self._createLightModeImages()
+
+
+    def _createDarkModeImages(self):
+        self.VRCT_LOGO = "vrct_logo_for_dark_mode.png"
+        self.VRCT_LOGO_MARK = "vrct_logo_mark_white.png"
+
+        self.TRANSLATION_ICON = "translation_icon_white.png"
+        self.TRANSLATION_ICON_DISABLED = "translation_icon_disabled.png"
+        self.MIC_ICON = "mic_icon_white.png"
+        self.MIC_ICON_DISABLED = "mic_icon_disabled.png"
+        self.HEADPHONES_ICON = "headphones_icon_white.png"
+        self.HEADPHONES_ICON_DISABLED = "headphones_icon_disabled.png"
+        self.FOREGROUND_ICON = "foreground_icon_white.png"
+        self.FOREGROUND_ICON_DISABLED = "foreground_icon_disabled.png"
+
+        self.NARROW_ARROW_DOWN = "narrow_arrow_down.png"
+
+        self.CONFIGURATION_ICON = "configuration_icon_white.png"
+        self.CONFIGURATION_ICON_DISABLED = "configuration_icon_disabled.png"
+
+        self.ARROW_LEFT = "arrow_left_white.png"
+        self.ARROW_LEFT_DISABLED = "arrow_left_disabled.png"
+
+        self.HELP_ICON = "help_icon_white.png"
+
+    def _createLightModeImages(self):
+        self.VRCT_LOGO = "vrct_logo_for_light_mode.png"
+        self.VRCT_LOGO_MARK = "vrct_logo_mark_black.png"
+
+
+        self.TRANSLATION_ICON = "translation_icon_white.png"
+        self.TRANSLATION_ICON_DISABLED = "translation_icon_disabled.png"
+        self.MIC_ICON = "mic_icon_white.png"
+        self.MIC_ICON_DISABLED = "mic_icon_disabled.png"
+        self.HEADPHONES_ICON = "headphones_icon_white.png"
+        self.HEADPHONES_ICON_DISABLED = "headphones_icon_disabled.png"
+        self.FOREGROUND_ICON = "foreground_icon_white.png"
+        self.FOREGROUND_ICON_DISABLED = "foreground_icon_disabled.png"
+
+        self.NARROW_ARROW_DOWN = "narrow_arrow_down.png"
+
+        self.CONFIGURATION_ICON = "configuration_icon_white.png"
+        self.CONFIGURATION_ICON_DISABLED = "configuration_icon_disabled.png"
+
+        self.ARROW_LEFT = "arrow_left_white.png"
+        self.ARROW_LEFT_DISABLED = "arrow_left_disabled.png"
+
+        self.HELP_ICON = "help_icon_white.png"
--- a/vrct_gui/ui_managers/UiScalingManager.py
+++ b/vrct_gui/ui_managers/UiScalingManager.py
@@ -0,0 +1,184 @@
+from types import SimpleNamespace
+
+class UiScalingManager():
+    def __init__(self, scaling_percentage):
+        scaling_float = int(scaling_percentage.replace("%", "")) / 100
+        print(scaling_float)
+        self.SCALING_FLOAT = max(scaling_float, 0.4)
+        self.main = SimpleNamespace()
+        self.config_window = SimpleNamespace()
+
+        return self._calculatedUiSizes()
+
+
+
+
+    def _calculatedUiSizes(self):
+        # Common
+
+        # Main
+        self.main.TEXTBOX_PADX = self._calculateUiSize(16)
+        self.main.TEXTBOX_CORNER_RADIUS = self._calculateUiSize(6)
+
+        self.main.TEXTBOX_TAB_CORNER_RADIUS = self._calculateUiSize(8)
+        self.main.TEXTBOX_TAB_FONT_SIZE = self._calculateUiSize(12)
+        self.main.TEXTBOX_TAB_PADX = self._calculateUiSize(10)
+        self.main.TEXTBOX_TAB_PADY = (self._calculateUiSize(4), self._calculateUiSize(10))
+
+        self.main.TEXTBOX_ENTRY_FONT_SIZE = self._calculateUiSize(16)
+        self.main.TEXTBOX_ENTRY_HEIGHT = self._calculateUiSize(40)
+        self.main.TEXTBOX_ENTRY_PADX = self.main.TEXTBOX_PADX
+        self.main.TEXTBOX_ENTRY_PADY = self._calculateUiSize(10)
+        self.main.TEXTBOX_ENTRY_IPADX = self._calculateUiSize(14)
+        self.main.TEXTBOX_ENTRY_IPADY = (self._calculateUiSize(2, True), self._calculateUiSize(3, True))
+
+
+        # Sidebar
+        self.main.SIDEBAR_WIDTH = self._calculateUiSize(230)
+        self.main.COMPACT_MODE_SIDEBAR_WIDTH = self._calculateUiSize(60)
+
+        # Sidebar Features
+        self.main.SF__LOGO_MAX_SIZE = self._calculateUiSize(120)
+        self.main.SF__LOGO_PADY = (self._calculateUiSize(12),self._calculateUiSize(8))
+        self.main.SF__LOGO_HEIGHT_FOR_ADJUSTMENT = (self._calculateUiSize(8))
+
+        self.main.SF__LABELS_IPADY = self._calculateUiSize(16)
+        self.main.SF__COMPACT_MODE_ICON_PADY = self.main.SF__LABELS_IPADY
+        self.main.SF__LABEL_LEFT_PAD = self._calculateUiSize(20)
+        self.main.SF__LABEL_FONT_SIZE = self._calculateUiSize(16)
+
+        self.main.SF__SWITCH_BOX_RIGHT_PAD = self._calculateUiSize(10)
+        self.main.SF__SWITCH_BOX_WIDTH = self._calculateUiSize(40)
+        self.main.SF__SWITCH_BOX_HEIGHT = self._calculateUiSize(16)
+
+        self.main.SF__SELECTED_MARK_WIDTH = self._calculateUiSize(3, True)
+
+
+        # Sidebar Quick Language Settings, SQLS
+        self.main.SQLS__TITLE_FONT_SIZE = self._calculateUiSize(16)
+        self.main.SQLS__TITLE_PADY = (self._calculateUiSize(12), self._calculateUiSize(6))
+
+        self.main.SQLS__PRESET_TAB_NUMBER_FONT_SIZE = self._calculateUiSize(16)
+
+        self.main.SQLS__BOX_SECTION_TITLE_FONT_SIZE = self._calculateUiSize(16)
+        self.main.SQLS__BOX_SECTION_TITLE_BOTTOM_PADY = self._calculateUiSize(10)
+        self.main.SQLS__BOX_IPADY = (self._calculateUiSize(8),self._calculateUiSize(18))
+        self.main.SQLS__BOX_DROPDOWN_MENU_FONT_SIZE = self._calculateUiSize(14)
+        self.main.SQLS__BOX_DROPDOWN_MENU_WIDTH = self._calculateUiSize(200)
+        self.main.SQLS__BOX_ARROWS_PADY = self._calculateUiSize(10)
+        self.main.SQLS__BOX_ARROWS_IMAGE_SIZE = self.dupTuple(self._calculateUiSize(16))
+        self.main.SQLS__BOX_ARROWS_DESC_FONT_SIZE = self._calculateUiSize(12)
+        self.main.SQLS__BOX_ARROWS_DESC_PADX = self._calculateUiSize(6)
+        self.main.SQLS__BOX_TOP_PADY = self._calculateUiSize(16)
+
+        self.main.SIDEBAR_CONFIG_BUTTON_CORNER_RADIUS = self._calculateUiSize(6)
+        self.main.SIDEBAR_CONFIG_BUTTON_PADX = self._calculateUiSize(10)
+        self.main.SIDEBAR_CONFIG_BUTTON_PADY = self._calculateUiSize(10)
+        self.main.SIDEBAR_CONFIG_BUTTON_IPADY = self._calculateUiSize(8)
+
+
+        self.main.HELP_AND_INFO_BUTTON_CORNER_RADIUS = self._calculateUiSize(6)
+        self.main.HELP_AND_INFO_BUTTON_SIZE = self._calculateUiSize(24)
+        self.main.HELP_AND_INFO_BUTTON_PADX = (0, self._calculateUiSize(6))
+        self.main.HELP_AND_INFO_BUTTON_PADY = (self._calculateUiSize(6),0)
+        self.main.HELP_AND_INFO_BUTTON_IPADXY = self._calculateUiSize(6)
+
+        self.main.MINIMIZE_SIDEBAR_BUTTON_ICON_SIZE_X = int(self.main.TEXTBOX_PADX/2+self.main.TEXTBOX_CORNER_RADIUS*2)
+        self.main.MINIMIZE_SIDEBAR_BUTTON_ICON_SIZE_Y = self._calculateUiSize(26)
+
+
+
+
+        # Top bar common
+        self.config_window.TOP_BAR__HEIGHT = self._calculateUiSize(40)
+        self.config_window.TOP_BAR__IPADY = self._calculateUiSize(12)
+
+        # Top bar Side
+        self.config_window.TOP_BAR_SIDE__WIDTH = self._calculateUiSize(220)
+        self.config_window.TOP_BAR_SIDE__CONFIG_LOGO_MARK_SIZE = self.dupTuple(self._calculateUiSize(30))
+        self.config_window.TOP_BAR_SIDE__CONFIG_TITLE_FONT_SIZE = self._calculateUiSize(22)
+        self.config_window.TOP_BAR_SIDE__CONFIG_TITLE_LEFT_PADX = int(self.config_window.TOP_BAR_SIDE__CONFIG_TITLE_FONT_SIZE + self._calculateUiSize(16))
+        self.config_window.TOP_BAR_SIDE__TITLE_PADX= self._calculateUiSize(30)
+
+        # Side menu
+        self.config_window.SIDE_MENU_TOP_PADY= self._calculateUiSize(54)
+        self.config_window.SIDE_MENU_LABELS_IPADX = self._calculateUiSize(20)
+        self.config_window.SIDE_MENU_LABELS_IPADY= self._calculateUiSize(8)
+        self.config_window.SIDE_MENU_LABELS_FONT_SIZE= self._calculateUiSize(18)
+
+
+        # Top bar Main
+        self.config_window.TOP_BAR_MAIN__TITLE_FONT_SIZE = self._calculateUiSize(22)
+
+
+        # Setting Box
+        self.config_window.SB__MAIN_WIDTH = self._calculateUiSize(720)
+        self.config_window.SB__TOP_PADY_IF_WITH_SECTION_TITLE = (self._calculateUiSize(24))
+        self.config_window.SB__TOP_PADY_IF_WITHOUT_SECTION_TITLE = (self._calculateUiSize(64))
+        self.config_window.SB__BOTTOM_PADY = (self._calculateUiSize(40))
+        self.config_window.SB__IPADX = self._calculateUiSize(20)
+        self.config_window.SB__IPADY = self._calculateUiSize(12)
+        self.config_window.SB__BOTTOM_MARGIN = (0, self._calculateUiSize(60))
+
+        self.config_window.SB__SECTION_TITLE_FONT_SIZE = self._calculateUiSize(20)
+        self.config_window.SB__SECTION_TITLE_BOTTOM_PADY = (0, self._calculateUiSize(10))
+
+        self.config_window.SB__LABEL_FONT_SIZE = self._calculateUiSize(16)
+        self.config_window.SB__DESC_FONT_SIZE = self._calculateUiSize(14)
+        self.config_window.SB__DESC_TOP_PADY = self._calculateUiSize(2)
+
+
+
+        self.config_window.SB__SELECTOR_FONT_SIZE = self._calculateUiSize(14)
+        self.config_window.SB__RADIO_BUTTON_FONT_SIZE = self.config_window.SB__SELECTOR_FONT_SIZE
+        self.config_window.SB__BUTTON_FONT_SIZE = self.config_window.SB__SELECTOR_FONT_SIZE
+
+
+
+        self.config_window.SB__OPTION_MENU_FONT_SIZE = self.config_window.SB__SELECTOR_FONT_SIZE
+        self.config_window.SB__OPTIONMENU_HEIGHT = self._calculateUiSize(30)
+        self.config_window.SB__OPTIONMENU_WIDTH = self._calculateUiSize(200)
+        self.config_window.SB__DROPDOWN_MENU_WIDTH = self.config_window.SB__OPTIONMENU_WIDTH
+        self.config_window.SB__DROPDOWN_MENU_MAX_BUTTON_HEIGHT = int(self.config_window.SB__OPTION_MENU_FONT_SIZE + self._calculateUiSize(6))
+        self.config_window.SB__DROPDOWN_MENU_FRAME_CORNER_RADIUS = self._calculateUiSize(10)
+        self.config_window.SB__DROPDOWN_MENU_FRAME_MAX_HEIGHT = self._calculateUiSize(200)
+
+
+        self.config_window.SB__SWITCH_WIDTH = self._calculateUiSize(50)
+
+        self.config_window.SB__SWITCH_BOX_WIDTH = self._calculateUiSize(40)
+        self.config_window.SB__SWITCH_BOX_HEIGHT = self._calculateUiSize(16)
+
+        self.config_window.SB__CHECKBOX_SIZE = self._calculateUiSize(24)
+        self.config_window.SB__CHECKBOX_BORDER_WIDTH = self._calculateUiSize(2)
+        self.config_window.SB__CHECKBOX_CORNER_RADIUS = self._calculateUiSize(4)
+
+        self.config_window.SB__ENTRY_FONT_SIZE = self.config_window.SB__SELECTOR_FONT_SIZE
+        self.config_window.SB__ENTRY_HEIGHT = self._calculateUiSize(30)
+
+        # SB__ENTRY_WIDTH_10 ... SB__ENTRY_WIDTH_200
+        for i in range(10, 201, 10):
+            setattr(self.config_window, f'SB__ENTRY_WIDTH_{i}', self._calculateUiSize(i))
+
+
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__ENTRY_WIDTH = self.config_window.SB__ENTRY_WIDTH_50
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__ENTRY_HEIGHT = self.config_window.SB__ENTRY_HEIGHT
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__SLIDER_HEIGHT = self._calculateUiSize(40)
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__SLIDER_BUTTON_LENGTH = self._calculateUiSize(2)
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__BAR_WIDTH = self._calculateUiSize(200)
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__PROGRESSBAR_HEIGHT = self._calculateUiSize(8)
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__BAR_RIGHT_PADX = self._calculateUiSize(20)
+
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__BUTTON_RIGHT_PADX = self._calculateUiSize(20)
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__BUTTON_IPADXY = self._calculateUiSize(10)
+        self.config_window.SB__PROGRESSBAR_X_SLIDER__BUTTON_ICON_SIZE = self._calculateUiSize(20)
+
+
+
+    def _calculateUiSize(self, default_size, is_allowed_odd: bool = False):
+        size = int(default_size * self.SCALING_FLOAT)
+        size += 1 if not is_allowed_odd and size % 2 != 0 else 0
+        return size
+
+    def dupTuple(self, value):
+        return (value, value)
--- a/vrct_gui/ui_managers/init.py
+++ b/vrct_gui/ui_managers/init.py
@@ -0,0 +1,3 @@
+from .ColorThemeManager import ColorThemeManager
+from .ImageFilenameManager import ImageFilenameManager
+from .UiScalingManager import UiScalingManager