UI Kit V4 issues

UIkit
1

I’ve cloned the repo and checkout the v4.1.0 tag.
v3 works ok, but there’s issues bringing v4 into into a NextJS app.

There’s an issue with the README, it seems the readme has had it’s case changed between v3 and v4.

Also there’s an issue using the ES Modules

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/@amityco/ui-kit-open-source/dist/esm/index.js
./app/community-social/page.tsx

README Error

warning: the following paths have collided (e.g. case-sensitive paths
on a case-insensitive filesystem) and only one from the same
colliding group is in the working tree:

  'README.md'
  'readme.md'

I’m using a very basic example to get started

    <AmityUiKitProvider
      theme={theme}
      apiKey={apiKey}
      userId={userId}
      displayName={userName}
      apiRegion="eu"
    >
      <AmityUiKitSocial />
    </AmityUiKitProvider>
2

Hello @robaldred, thank you for the detailed information. Could you please also share the link to the project repository you cloned this from? Thank you.

3

hey
Yes of course, im using the v4.1.0 tag

I’ve manage to get it running.
There a few bits I think missing from the customisation.

There’s a global.css which applies a bunch of root variables for colors etc.
The ThemeProvider currently does not have a mechanism to override these,
This is particular apparent, if a user is using “dark” mode on their device, if we want to always use light mode, there’s currently no way to override --asc-color-background-shade1 for example, so it looks odd when using the "preferred_theme": "light"

I appreciate I can override these at a root level in my app, but it would good to have a consistent approach to customisation. The UI Kit appears to be applying a bunch of default stuff which uses prefers-color-scheme but the config preference for “preferred_theme” passed to AmityUiKitProvider isn’t respected in all cases. So some theming isn’t applied correctly.

Screenshot 2025-02-04 at 16.15.20
Screenshot 2025-02-04 at 16.15.20327×337 11.5 KB

4

Hello @robaldred , For UIKit v4, our team suggests using uikit.config.json to apply the theme.

5

Hey, so I am, but it conflicts with some of the prefers-color-scheme @media declarations you have in the UI kits global.css

So if the end user sets their browser to dark mode, and you set "preferred_theme": "light" in
uikit.config.json

You end up with a ton of things not displaying correctly, from icons to post and comment text
Some objects such as text, icons don’t correctly display.

Here’s some changes I’ve made to our fork.

6

Hello @robaldred, thank you for your feedback and for sharing the solution with us. We’ll have our team review this and make any necessary adjustments.