Web:Client:Add color theme.

packages/client/src/pages/PortalSettings/categories/common/Customization/language-and-time-zone.js

@@ -414,6 +414,7 @@ class LanguageAndTimeZone extends React.Component {
       isLoadedPage,
       helpLink,
       organizationName,
+      currentColorScheme,
     } = this.props;
 
     const {
@@ -434,6 +435,7 @@ class LanguageAndTimeZone extends React.Component {
         t={t}
         helpLink={helpLink}
         organizationName={organizationName}
+        currentColorScheme={currentColorScheme}
       />
     );
 
@@ -533,6 +535,7 @@ export default inject(({ auth, setup, common }) => {
     getCurrentCustomSchema,
     cultures,
     helpLink,
+    currentColorScheme,
   } = auth.settingsStore;
 
   const { user } = auth.userStore;
@@ -563,6 +566,7 @@ export default inject(({ auth, setup, common }) => {
     helpLink,
     initSettings,
     setIsLoaded,
+    currentColorScheme,
   };
 })(
   withLoading(

packages/client/src/pages/PortalSettings/categories/common/customization-navbar.js

@@ -68,6 +68,7 @@ const CustomizationNavbar = ({
   setIsLoadedCustomizationNavbar,
   isLoadedPage,
   isSettingPaid,
+  currentColorScheme,
 }) => {
   const isLoadedSetting = isLoaded && tReady;
   useEffect(() => {
@@ -104,7 +105,7 @@ const CustomizationNavbar = ({
         <Box paddingProp="10px 0 3px 0">
           <Link
             className="link-learn-more"
-            color={theme.client.settings.common.linkColorHelp}
+            color={currentColorScheme.main.accent}
             target="_blank"
             isHovered={true}
             href={helpUrlCommonSettings}
@@ -162,7 +163,7 @@ const CustomizationNavbar = ({
         </Text>
         <Box paddingProp="10px 0 3px 0">
           <Link
-            color={theme.client.settings.common.linkColorHelp}
+            color={currentColorScheme.main.accent}
             target="_blank"
             isHovered={true}
             href={helpUrlCommonSettings}
@@ -196,13 +197,18 @@ const CustomizationNavbar = ({
 };
 
 export default inject(({ auth, common }) => {
-  const { helpUrlCommonSettings, theme } = auth.settingsStore;
+  const {
+    helpUrlCommonSettings,
+    theme,
+    currentColorScheme,
+  } = auth.settingsStore;
   const { isLoaded, setIsLoadedCustomizationNavbar } = common;
   return {
     theme,
     helpUrlCommonSettings,
     isLoaded,
     setIsLoadedCustomizationNavbar,
+    currentColorScheme,
   };
 })(
   withRouter(

packages/client/src/pages/PortalSettings/categories/common/sub-components/common-tooltips.js

@@ -23,6 +23,7 @@ export const LanguageTimeSettingsTooltip = ({
   theme,
   helpLink,
   organizationName,
+  currentColorScheme,
 }) => {
   const learnMore = t("Common:LearnMore");
   const text = t("Settings:StudioTimeLanguageSettings");
@@ -47,7 +48,7 @@ export const LanguageTimeSettingsTooltip = ({
           <div className="bold display-inline font-size"> {{ save }}</div>
           button at the bottom of the section.
           <Link
-            color={theme.client.settings.common.linkColorHelp}
+            color={currentColorScheme.main.accent}
             className="display-block font-size"
             isHovered={true}
             target="_blank"