diff --git a/src/assets/usericon/default/default-user-icon.svg b/src/assets/usericon/default/default-user-icon_dark.svg similarity index 100% rename from src/assets/usericon/default/default-user-icon.svg rename to src/assets/usericon/default/default-user-icon_dark.svg diff --git a/src/assets/usericon/default/default-user-icon_light.svg b/src/assets/usericon/default/default-user-icon_light.svg new file mode 100644 index 0000000..60ba6d0 --- /dev/null +++ b/src/assets/usericon/default/default-user-icon_light.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/usericon/default/defaultusericon-export.tsx b/src/assets/usericon/default/defaultusericon-export.tsx index c7a53d1..d1b482d 100644 --- a/src/assets/usericon/default/defaultusericon-export.tsx +++ b/src/assets/usericon/default/defaultusericon-export.tsx @@ -1 +1,2 @@ -export { default as defaultusericon } from '@/assets/usericon/default/default-user-icon.svg'; +export { default as user_default_dark } from '@/assets/usericon/default/default-user-icon_dark.svg'; +export { default as user_default_light } from '@/assets/usericon/default/default-user-icon_light.svg'; diff --git a/src/components/custom-ui/participant-list-entry.tsx b/src/components/custom-ui/participant-list-entry.tsx index ed374db..a584112 100644 --- a/src/components/custom-ui/participant-list-entry.tsx +++ b/src/components/custom-ui/participant-list-entry.tsx @@ -1,6 +1,8 @@ import React from 'react'; import Image from 'next/image'; -import { defaultusericon } from '@/assets/usericon/default/defaultusericon-export'; +import { user_default_dark } from '@/assets/usericon/default/defaultusericon-export'; +import { user_default_light } from '@/assets/usericon/default/defaultusericon-export'; +import { useTheme } from 'next-themes'; type ParticipantListEntryProps = { participant: string; @@ -10,9 +12,13 @@ type ParticipantListEntryProps = { export default function ParticipantListEntry({ participant, }: ParticipantListEntryProps) { + const { resolvedTheme } = useTheme(); + + const iconSrc = + resolvedTheme === 'dark' ? user_default_dark : user_default_light; return (
- Avatar + Avatar {participant}
);