Issues Updating Open-Source UIKit in My Project

Web
1

I’m currently working with web React open-source UIKit in my Nextjs project and have encountered difficulties updating it with my changes. I appreciate any help or insights you can provide.

I have made changes to the UIKit in my project by modifying the default-theme.js file and also trying to console something when I click on any community Name.

after saving the changes I am not seeing the expected changes. There are no error messages, but the updates don’t seem to take effect.

Thank you in advance for your assistance!

2

Hello, could you please help share which parts have you made changes? So we can provide the guidance. Thank you.

3

I made changes in the default-theme.js file.

const defaultTheme = {
palette: {
alert: ‘#FF8C66’, // Adjusted color for alert in dark mode
base: ‘#121212’, // Dark background color
primary: ‘#ff0072’, // Adjusted color for primary in dark mode
secondary: ‘#FFD54F’, // Adjusted color for secondary in dark mode
tertiary: ‘#FF5C8D’, // Adjusted color for tertiary in dark mode
neutral: ‘#080808’, // Dark neutral color
highlight: ‘#64B5F6’, // Adjusted color for highlight in dark mode

system: {
  borders: '#303030',   // Darker border color
  background: '#1E1E1E', // Darker background color
},

},
typography: {
global: {
backgroundColor:‘#040D12’,
fontFamily: ‘Inter, -apple-system, BlinkMacSystemFont, Arial, sans-serif’,
fontStyle: ‘normal’,
color: ‘#FFFFFF’, // Adjusted text color for better visibility on dark background
},
headline: {
fontWeight: 600,
fontSize: ‘20px’,
color: ‘#FFFFFF’, // Adjusted text color for better visibility on dark background
},
title: {
fontWeight: 600,
fontSize: ‘16px’,
color: ‘#FFFFFF’, // Adjusted text color for better visibility on dark background
},
body: {
backgroundColor:‘#040D12’,
fontWeight: ‘normal’,
fontSize: ‘14px’,
color: ‘#CCCCCC’, // Adjusted text color for better visibility on dark background
},
bodyBold: {
fontWeight: 600,
fontSize: ‘14px’,
color: ‘#FFFFFF’, // Adjusted text color for better visibility on dark background
},
caption: {
fontWeight: ‘normal’,
fontSize: ‘12px’,
color: ‘#999999’, // Adjusted text color for better visibility on dark background
},
captionBold: {
fontWeight: 600,
fontSize: ‘12px’,
color: ‘#FFFFFF’, // Adjusted text color for better visibility on dark background
},
},
};

export default defaultTheme;

and also tried to console something when clicking on any community in NavigationProvider.js file

const handleClickCommunity = useCallback(
(communityId) => {
const next = {
type: PageTypes.CommunityFeed,
communityId,
};

  if (onChangePage) return onChangePage(next);
  if (onClickCommunity) return onClickCommunity(communityId);

  console.log('handleClickCommunity change', { communityId });
  pushPage(next);
},
[onChangePage, onClickCommunity, pushPage],

);

OutPut:
handleClickCommunity {communityId: ‘6555bc8bc17c5c056da572e8’}

1 Like
4

Thank you, we will get back to you on this.

5

Hi, I think the code has been changed correctly, but the UIKit code might not sync with your project in real-time yet. This can be happened depending on the way you implement the UIKit to your project. The easiest way to see the changes in real time is to use our storybook. You can run storybook by npm run storybook inside the UIKit project and put login credential in the .env file (change .env.example to .env).

1 Like