Add a secondary background color to code blocks

[JarWarren]

Add a secondary background color to inline code blocks

Can we change the background color of code blocks (backticked text) to make it more visibly distinct? The website has this, but the CRM doesn't.

Current behavior

Currently the font and kerning change, but it's easy to miss. The following screenshot contains a code block. This affects both light and dark mode.

Expected behavior

Secondary background color, consistent with the website.

[greptile-apps]

To add a secondary background color to inline code blocks:

1. Update BackgroundDark.ts:

   • Add a new color constant for the secondary background.

   export const BACKGROUND_DARK = {
     // existing colors
     codeBlock: '#yourSecondaryColor', // Add this line
   };

2. Update SecondaryColors.ts:

   • Add a new color constant for the secondary background.

   export const SECONDARY_COLORS = {
     // existing colors
     codeBlock: '#yourSecondaryColor', // Add this line
   };

3. Update MainButton.tsx:

   • Modify the styled component to apply the new background color to code blocks.

   const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'width' | 'variant'>>`
     // existing styles
     code {
       background: ${({ theme }) => theme.background.codeBlock};
     }
   `;

References

/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts
/packages/twenty-front/src/modules/ui/theme/constants/SecondaryColors.ts
/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx
/packages/twenty-front/src/modules/ui/theme/constants/HoverBackground.ts

_{Ask Greptile · Edit Issue Bot Settings}