# Issues Updating Open-Source UIKit in My Project

**URL:** <https://forum.social.plus/t/issues-updating-open-source-uikit-in-my-project/986>\
**Category:** Web\
**Created:** [November 21, 2023, 2:14pm UTC](https://forum.social.plus/t/issues-updating-open-source-uikit-in-my-project/986 "2023-11-21T14:14:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jethaniya\_20](https://avatars.discourse-cdn.com/v4/letter/j/ebca7d/32.png) [@jethaniya\_20](https://forum.social.plus/u/jethaniya_20)\
**Post date:** [November 21, 2023, 2:14pm UTC](https://forum.social.plus/t/issues-updating-open-source-uikit-in-my-project/986/1 "2023-11-21T14:14:10Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![SocialPlus\_Support](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.social.plus/socialplus_support/32/798_2.png) [@SocialPlus\_Support](https://forum.social.plus/u/SocialPlus_Support)\
**Post date:** [November 22, 2023, 9:02am UTC](https://forum.social.plus/t/issues-updating-open-source-uikit-in-my-project/986/2 "2023-11-22T09:02:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jethaniya\_20](https://avatars.discourse-cdn.com/v4/letter/j/ebca7d/32.png) [@jethaniya\_20](https://forum.social.plus/u/jethaniya_20)\
**Post date:** [November 22, 2023, 9:38am UTC](https://forum.social.plus/t/issues-updating-open-source-uikit-in-my-project/986/3 "2023-11-22T09:38:56Z")

</div>

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’}

---

<div class="post-metadata">

**Author:** ![SocialPlus\_Support](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.social.plus/socialplus_support/32/798_2.png) [@SocialPlus\_Support](https://forum.social.plus/u/SocialPlus_Support)\
**Post date:** [November 22, 2023, 11:11am UTC](https://forum.social.plus/t/issues-updating-open-source-uikit-in-my-project/986/4 "2023-11-22T11:11:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![topAmity](https://avatars.discourse-cdn.com/v4/letter/t/a88e4f/32.png) [@topAmity](https://forum.social.plus/u/topAmity)\
**Post date:** [November 22, 2023, 4:04pm UTC](https://forum.social.plus/t/issues-updating-open-source-uikit-in-my-project/986/5 "2023-11-22T16:04:56Z")

</div>

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).