diff --git a/src/app/pages/onboarding/set-password/components/password-field.tsx b/src/app/pages/onboarding/set-password/components/password-field.tsx
index 07f129ef99f..a539a74421d 100644
--- a/src/app/pages/onboarding/set-password/components/password-field.tsx
+++ b/src/app/pages/onboarding/set-password/components/password-field.tsx
@@ -4,6 +4,7 @@ import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
import { useField } from 'formik';
import { Box, Flex, styled } from 'leather-styles/jsx';
+import { useThemeSwitcher } from '@app/common/theme-provider';
import { ValidatedPassword } from '@app/common/validation/validate-password';
import { Input } from '@app/ui/components/input/input';
import { Caption } from '@app/ui/components/typography/caption';
@@ -20,8 +21,9 @@ interface PasswordFieldProps {
export function PasswordField({ strengthResult, isDisabled }: PasswordFieldProps) {
const [field] = useField('password');
const [showPassword, setShowPassword] = useState(false);
+ const { theme } = useThemeSwitcher();
- const { strengthColor, strengthText } = useMemo(
+ const { strengthColorLightMode, strengthColorDarkMode, strengthText } = useMemo(
() => getIndicatorsOfPasswordStrength(strengthResult),
[strengthResult]
);
@@ -61,8 +63,9 @@ export function PasswordField({ strengthResult, isDisabled }: PasswordFieldProps
diff --git a/src/app/pages/onboarding/set-password/components/password-field.utils.ts b/src/app/pages/onboarding/set-password/components/password-field.utils.ts
index 46402dfdbe0..bf079cbf199 100644
--- a/src/app/pages/onboarding/set-password/components/password-field.utils.ts
+++ b/src/app/pages/onboarding/set-password/components/password-field.utils.ts
@@ -6,27 +6,33 @@ export const defaultColor = token('colors.ink.background-secondary');
const strengthStyles = {
[PasswordStrength.NoScore]: {
- strengthColor: token('colors.red.action-primary-default'),
+ strengthColorLightMode: token('colors.red.background-secondary'),
+ strengthColorDarkMode: token('colors.red.border'),
strengthText: 'Poor',
},
[PasswordStrength.PoorScore]: {
- strengthColor: token('colors.red.action-primary-default'),
+ strengthColorLightMode: token('colors.red.background-secondary'),
+ strengthColorDarkMode: token('colors.red.border'),
strengthText: 'Poor',
},
[PasswordStrength.WeakScore]: {
- strengthColor: token('colors.yellow.action-primary-default'),
+ strengthColorLightMode: token('colors.yellow.background-secondary'),
+ strengthColorDarkMode: token('colors.yellow.border'),
strengthText: 'Weak',
},
[PasswordStrength.AverageScore]: {
- strengthColor: token('colors.yellow.action-primary-default'),
+ strengthColorLightMode: token('colors.yellow.background-secondary'),
+ strengthColorDarkMode: token('colors.yellow.border'),
strengthText: 'Average',
},
[PasswordStrength.StrongScore]: {
- strengthColor: token('colors.yellow.action-primary-default'),
+ strengthColorLightMode: token('colors.yellow.background-secondary'),
+ strengthColorDarkMode: token('colors.yellow.border'),
strengthText: 'Average',
},
[PasswordStrength.MeetsAllRequirements]: {
- strengthColor: token('colors.green.action-primary-default'),
+ strengthColorLightMode: token('colors.green.background-secondary'),
+ strengthColorDarkMode: token('colors.green.border'),
strengthText: 'Strong',
},
};
diff --git a/src/app/pages/onboarding/welcome/welcome.layout.tsx b/src/app/pages/onboarding/welcome/welcome.layout.tsx
index 433ed683356..64cee800550 100644
--- a/src/app/pages/onboarding/welcome/welcome.layout.tsx
+++ b/src/app/pages/onboarding/welcome/welcome.layout.tsx
@@ -37,7 +37,7 @@ export function WelcomeLayout({
flexDir="column"
flex={[1, 1, 0]}
justifyContent={['center', '', 'flex-start']}
- color={['ink.background-primary', '', 'ink.background-secondary']}
+ color={['ink.text-primary', '', 'ink.background-secondary']}
>