Blue Button Secondary Color Issue in Dark Mode

[Bonapara]

Current Behavior

Desired Behavior

Component

https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty?type=design&node-id=3122-142114&mode=design&t=jnteOz7Mv90WFi3R-11

[greptile-apps]

To address the blue button secondary color issue in dark mode, you'll need to adjust the theming logic within the LightButton.tsx component to ensure the secondary accent color is correctly applied in dark mode. Here's a step-by-step guide to implement the desired behavior:

1. Identify the Correct Theme Variable for Dark Mode: First, ensure that the theme context provides a distinct color variable for the secondary accent in dark mode. This might be something like theme.color.darkModeSecondary.

2. Adjust the StyledButton Component: Modify the color property within the StyledButton styled component to use the dark mode secondary color when the dark mode is active and the accent prop is 'secondary'.

color: ${({ theme, accent, active, disabled, focus }) => {
  if (theme.mode === 'dark' && accent === 'secondary') {
    return active || focus ? theme.color.darkModeSecondary : theme.font.color.secondary;
  } else {
    // existing logic
  }
}};

3. Ensure Theme Context Includes Mode: Verify that the useTheme hook is providing a mode property that correctly reflects the current theme mode (light or dark).

4. Test the Changes: After making these adjustments, test the button in both light and dark modes to ensure the color changes as expected based on the theme.

This solution assumes the theme context (useTheme hook) includes a mode property to distinguish between light and dark modes, and that a suitable color variable exists for the dark mode secondary accent. If these assumptions do not hold, you may need to update the theme context and color definitions accordingly.

References

twentyhq/twenty/packages/twenty-front/src/modules/ui/input/button/components/LightButton.tsx
twentyhq/twenty/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx
twentyhq/twenty/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx
twentyhq/twenty/packages/twenty-front/src/modules/ui/input/color-scheme

Ask Greptile

[its-id]

Hi 👋 @Bonapara, looks like a good first issue for me to start with. can u assign it to me?

thanks

[its-id]

BTW, I keep getting the following error (TS5042) when trying to start the app. completed the setup as instructed in docs.

I looked it up and got to know its somewhat related to VSCode (here), but the fix is unclear to me. Any help would be very much appreciated. ❤️

[Bonapara]

Sure @its-id, thanks for contributing!

[its-id]

BTW, I keep getting the following error (TS5042) when trying to start the app. completed the setup as instructed in docs.

I looked it up and got to know its somewhat related to VSCode (here), but the fix is unclear to me. Any help would be very much appreciated. ❤️

ok. seems like there was a space in my folder name causing this entire headache. fixed it. credits to @charlesBochet