npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@vchatcloud/vue-ui-kit

v1.0.2

Published

VChatCloud UI Kit for vue integration

Downloads

12

Readme

Vue Component UI Kit

NPM Version

Vue Component UI Kit은 다양한 UI 컴포넌트를 제공하여 Vue 애플리케이션 개발을 더욱 쉽게 만듭니다.

목차

설치

npm install @vchatcloud/vue-ui-kit
# or
# yarn add @vchatcloud/vue-ui-kit
# or
# pnpm add @vchatcloud/vue-ui-kit

사용법

우선 사용하려는 프로젝트의 index.html에 해당 내용을 작성합니다.

<head>
  <!-- ... -->
  <!-- 아래 내용을 추가합니다. -->
  <script src="https://www.vchatcloud.com/lib/e7lib-latest.min.js"></script>
  <script src="https://www.vchatcloud.com/lib/vchatcloud-last.min.js"></script>
</head>

프로젝트에서 UI Kit을 사용하려면, 필요한 컴포넌트를 import하여 사용합니다.

VChatCloudApp 컴포넌트를 사용하여 VChatCloud를 설정하고 실행할 수 있습니다.

코드 예시

const vChatCloudAppProps: VChatCloudAppProps = {
  nickName: "YOUR_NICK_NAME",
  roomId: "YOUR_ROOM_ID",
  clientKey: "YOUR_CLIENT_KEY",
  email: "[email protected]", // CMS의 계정 이메일 설정
  grade: "user", // 유저의 등급 설정
  privateContainer: "PRIVATE_CONTAINER", // 비밀채팅방이 위치될 태그 설정
  sessionType: "parameter", // 접속 방식 설정
  userInfo: { profile: 8 }, // `userInfo`설정
  ...
};
<VChatCloudApp
  :nick-name="vChatCloudAppProps.nickName"
  :room-id="vChatCloudAppProps.roomId"
  :client-key="vChatCloudAppProps.clientKey"
  :email="vChatCloudAppProps.email"
  :grade="vChatCloudAppProps.grade"
  :private-container="vChatCloudAppProps.privateContainer"
  :session-type="vChatCloudAppProps.sessionType"
  :user-info="vChatCloudAppProps.userInfo"
  ...
/>

컴포넌트 설명

  • nickName: 사용자 닉네임을 설정합니다.
  • roomId: VChatCloud 방의 ID를 설정합니다.
  • clientKey: 클라이언트 키를 로컬 저장소에서 가져오거나, 없을 경우 랜덤으로 생성합니다.
  • email: 사용자의 CMS 계정의 이메일로 설정합니다.
  • grade: 사용자 등급을 설정합니다. 예를 들어, "user"와 같은 값을 사용할 수 있습니다.
  • privateContainer: 비밀채팅방 생성 시 위치시킬 태그를 설정합니다. 예를 들어, 태그의 id가 example이면 "#example"을, class가 example이면 ".example"으로 사용할 수 있습니다.
  • sessionType: 접속 방식에 대해 설정합니다. 예를 들어, 값이 "login"이면 로그인 페이지를 사용하고, "parameter"면 로그인 페이지 없이 바로 접속하게 됩니다. "private"는 비밀채팅방 입장 시 사용합니다.
  • userInfo: 사용자 정보를 객체 형태로 설정합니다. 예시에서는 { profile: 8 }로 설정되어 있습니다.

VChatCloudApp

VChatCloudApp 컴포넌트에 필요한 props를 전달하여 VChatCloud를 초기화합니다. 주요 props는 다음과 같습니다.

  • clientKey: 클라이언트 키
  • email: 사용자 이메일
  • grade: 사용자 등급
  • nickName: 사용자 닉네임
  • roomId: 방 ID
  • sessionType: 세션 타입 ("parameter", "private", "login" 중 선택)
  • url: 이벤트 버스 URL
  • userInfo: 사용자 정보 객체

주의사항

  • 중복된 clientKey : 같은 clientKey로 로그인 시 기존에 로그인된 사용자가 접속이 종료됩니다.
  • 비밀채팅방은 최대 1개까지만 생성됩니다.
  • 비밀채팅방에서 새로운 비밀채팅방 생성하는 기능은 제한됩니다.

커스터마이징

컴포넌트 변경

만약, VChatCloudApp 컴포넌트가 마음에 들지 않는 경우 VChatCloudApp안에 Custom Component를 사용하여 기존 컴포넌트를 대체할 수 있습니다.

<VChatCloudApp
  ...
  >
  <MyComponent></MyComponent>
</VChatCloudApp>

커스텀 컴포넌트에 필요한 내용은 아래와 같이 hook을 통해서 제공됩니다.

const {
  add,
  apiFileList,
  channel,
  inviteMessageList,
  messageHistoryList,
  translateClientKeyMap,
  vChatCloud,
  vChatCloudAppProps,
} = useInject();

색상 변경

변경가능한 CSS 변수 목록은 아래와 같습니다.

<style>
/* 기본모드 색상 */
:root {
  --invert-img: none;

  --toaster-notify-shadow-color: rgba(168, 168, 168, 0.3);
  --toaster-notify-background-color: #363940;
  --toaster-notify-color: #fff;
  --toaster-span-color: #fff;

  --login-wrap-background-color: #c9c9f2;
  --login-logo-notice-color: #0a0a6b;
  --login-footer-color: #0a0a6b4c;

  --profile-wrap-box-shadow-color: rgba(201, 201, 201, 0.3);
  --profile-wrap-border-color: #f2f2f2;
  --profile-wrap-background-color: #fff;
  --profile-button-color: #aaa;
  --profile-button-hover-color: #aaa;
  --profile-profile-border-color: #eaeaea;
  --profile-profile-background-color: #fff;
  --profile-nick-name-input-border-color: #dddddd;
  --profile-nick-name-input-color: #aaa;
  --profile-nick-name-input-bg-color: #fff;
  --profile-nick-name-input-focus-border-color: #0033ab;
  --profile-login-button-background-color: #0a0a6b;
  --profile-login-button-color: #fff;

  --file-send-color-background: rgba(0, 0, 0, 0.15);
  --file-send-color-border: #fff;
  --file-send-color-text: #fff;
  --file-send-color-shadow-outer: rgba(39, 39, 39, 0.2);
  --file-send-color-shadow-inner: rgba(4, 0, 0, 0.05);

  --header-color-background: #f2f2f2;
  --header-color-title: #000;
  --header-color-count: #999;
  --header-color-border: #ddd;

  --join-user-list-color-background: #fff;
  --join-user-list-color-border: #f2f2f2;
  --join-user-list-color-header-border: #ddd;
  --join-user-list-color-header-color: #000;
  --join-user-list-color-footer-background: #ddd;
  --join-user-list-color-footer: #000;
  --join-user-list-color-shadow: rgba(168, 168, 168, 0.3);

  --join-user-color-background: #f2f2f2;
  --join-user-color-profile-border: #f2f2f2;
  --join-user-color-title: #333;
  --join-user-translate-color: #999;

  --language-modal-color-background: #fff;
  --language-modal-color-border: #f2f2f2;
  --language-modal-color-header-border: #ddd;
  --language-modal-color-footer-background: #ddd;
  --language-modal-color-footer-text: #000;
  --language-modal-color-close-icon: rgba(168, 168, 168, 0.3);
  --language-modal-span-color: #000;

  --radio-group-color-border: #ddd;
  --radio-group-color-checked: #000;
  --radio-group-span-color: #000;
  --radio-group-radio-icon-bg-color: #fff;

  --checkbox-color-border: #ddd;
  --checkbox-color-background: #fff;

  --toggle-color-bar-background: #ddd;
  --toggle-color-bar-background-on: #c9ddff;
  --toggle-color-dot-background: #999;
  --toggle-color-dot-background-on: #2a61be;
  --toggle-color-label: #666;

  --invite-modal-color-background: #fff;
  --invite-modal-color-border: #f2f2f2;
  --invite-modal-color-input-border: #ddd;
  --invite-modal-color-input-text: #aaa;
  --invite-modal-color-input-background: #fff;
  --invite-modal-color-title: #333;
  --invite-modal-color-close-button-border: #0a0a6b;
  --invite-modal-color-close-button-text: #0a0a6b;
  --invite-modal-color-submit-button-border: #0a0a6b;
  --invite-modal-color-submit-button-background: #0a0a6b;
  --invite-modal-color-submit-button-text: #fff;
  --invite-modal-color-shadow: rgba(168, 168, 168, 0.3);

  --modal-color-background: #fff;
  --modal-color-border: #f2f2f2;
  --modal-color-title: #333;
  --modal-color-contents: #000;
  --modal-color-close-button-border: #0a0a6b;
  --modal-color-close-button-text: #0a0a6b;
  --modal-color-submit-button-border: #0a0a6b;
  --modal-color-submit-button-background: #0a0a6b;
  --modal-color-submit-button-text: #fff;
  --modal-color-shadow: rgba(168, 168, 168, 0.3);

  --file-drawer-wrap-box-shadow-color: rgba(168, 168, 168, 0.3);
  --file-drawer-wrap-border-color: #f2f2f2;
  --file-drawer-wrap-background-color: #fff;
  --file-drawer-header-border-bottom-color: #ddd;
  --file-drawer-title-color: #333;
  --file-drawer-tab-item-color: #666;
  --file-drawer-tab-item-focus-color: #000;
  --file-drawer-tab-item-focus-border-color: #000;
  --file-drawer-body-padding-color: #ddd;
  --file-drawer-footer-border-top-color: #ddd;
  --file-drawer-footer-select-count-color: #666;
  --file-drawer-footer-save-color: #000;
  --file-drawer-footer-image-opacity: 0.3;
  --file-drawer-footer-image-opacity-hover: 0.7;

  --preview-popup-color-bg-header: rgba(0, 0, 0, 0.5);
  --preview-popup-color-text-header: #ffffff;
  --preview-popup-color-bg-dim: #000000;

  --file-preview-wrap-border-color: #f2f2f2;
  --file-preview-wrap-background-color: #fff;
  --file-preview-wrap-focus-border-color: #4160b9;
  --file-preview-wrap-focus-background-color: #fff;
  --file-preview-selected-icon-color: #000;
  --file-preview-name-color: #000;
  --file-preview-expire-color: #999;
  --file-preview-size-color: #999;

  --image-preview-wrap-focus-border-color: #4160b9;
  --image-preview-selected-icon-color: #000;

  --video-preview-wrap-focus-border-color: #4160b9;
  --video-preview-wrap-focus-background-color: #fff;
  --video-preview-selected-icon-color: #000;

  --body-chat-contents-color: #000;
  --body-nickname-color: #000;
  --body-chat-bg-color: #fff;

  --chat-base-profile-border-color: #f2f2f2;
  --chat-base-profile-background-color: #aeaae2;
  --chat-base-nickname-color: #666;
  --chat-base-time-color: #999;

  --whisper-modal-input-border-color: #ddd;
  --whisper-modal-input-background-color: #fff;
  --whisper-modal-input-color: #000;

  --whisper-and-report-popup-border-color: #f2f2f2;
  --whisper-and-report-popup-background-color: #fff;
  --whisper-and-report-popup-box-shadow-color: rgba(168, 168, 168, 0.3);
  --whisper-and-report-popup-item-hover-color: #fff;
  --whisper-and-report-popup-item-hover-background-color: #0a0a6b;
  --whisper-and-report-popup-item-text-color: #000;

  --skeleton-loading-background: #ddd;
  --skeleton-gradient-start: #e5e5e5;
  --skeleton-gradient-middle: #f0f0f0;
  --skeleton-gradient-end: #e5e5e5;

  --default-message-color: #333;

  --open-graph-border-color: #ddd;
  --open-graph-shadow-color: rgba(157, 173, 184, 0.3);
  --open-graph-background-color: #fff;
  --open-graph-title-color: #333;
  --open-graph-description-color: #666;

  --file-message-wrap-background-color: #fff;
  --file-message-wrap-border-color: #ddd;
  --file-message-button-border-color: #ddd;
  --file-message-wrap-shadow-color: rgba(157, 173, 184, 0.3);
  --file-message-name-color: #333;
  --file-message-expire-color: #666;
  --file-message-size-color: #666;
  --file-message-icon-opacity: 0.3;
  --file-message-icon-hover-opacity: 0.7;

  --join-message-color: #0033ab;

  --leave-message-color: #ff5a5a;

  --message-notice-bg-color: #333;
  --message-notice-text-color: #fff;
  --message-notice-content-color: #fff;
  --message-notice-shadow-color: rgba(157, 173, 184, 0.3);

  --warn-message-color: #ff7800;

  --whisper-message-sub-wrap-bg-color: #f2f2f2;
  --whisper-message-sub-wrap-shadow-color: rgba(157, 173, 184, 0.3);
  --whisper-message-about-title-color: #0a0a6b;
  --whisper-message-about-for-me-title-color: #0a0a6b;
  --whisper-message-about-sub-title-color: #666;
  --whisper-message-content-color: #010000;
  --whisper-message-time-color: #999;
  --whisper-message-for-me-bg-color: #e1dffc;

  --move-end-line-popup-wrap-background-color: #fff;
  --move-end-line-popup-wrap-border-color: #ddd;
  --move-end-line-popup-wrap-shadow-color: rgba(105, 105, 105, 0.25);
  --move-end-line-popup-wrap-text-color: #333;

  --message-input-bg-color: #fff;
  --message-input-textarea-color: #000;
  --message-input-border-color: #ddd;
  --message-input-name-color: #0000ac;
  --message-input-text-size-color: #999;
  --message-input-emoticon-area-border-color: #ddd;
  --message-input-emoticon-list-hover-bg-color: rgba(0, 0, 0, 0.1);
  --message-input-emoticon-list-emoji-bg-color: #ddd;
  --message-input-emoticon-opacity: 0.3;
  --message-input-emoticon-hover-opacity: 0.7;
  --message-input-category-bg-color: #f2f2f2;
  --message-input-category-focus-border-color: #ddd;
  --message-input-category-focus-box-shadow-color: rgba(207, 207, 207, 0.3);
  --message-input-category-focus-bg-color: #fff;
  --message-input-button-bg-color: #0a0a6b;
  --message-input-button-text-color: #fff;
  --message-input-category-opacity: 1;
}

/* 다크모드 색상 */
:root .Dark {
  --invert-img: invert(100%);

  --toaster-notify-shadow-color: rgba(0, 0, 0, 0.3);
  --toaster-notify-background-color: #333;
  --toaster-notify-color: #fff;
  --toaster-span-color: #fff;

  --login-wrap-background-color: #292929;
  --login-logo-notice-color: #ddd;
  --login-footer-color: #aaa;

  --profile-wrap-box-shadow-color: rgba(0, 0, 0, 0.3);
  --profile-wrap-border-color: #444;
  --profile-wrap-background-color: #313131;
  --profile-button-color: #aaa;
  --profile-button-hover-color: #fff;
  --profile-profile-border-color: #444;
  --profile-profile-background-color: #fff;
  --profile-nick-name-input-border-color: #444;
  --profile-nick-name-input-color: #fff;
  --profile-nick-name-input-bg-color: #313131;
  --profile-nick-name-input-focus-border-color: #fff;
  --profile-login-button-background-color: #fff;
  --profile-login-button-color: #000;

  --file-send-color-background: rgba(0, 0, 0, 0.15);
  --file-send-color-border: #fff;
  --file-send-color-text: #fff;
  --file-send-color-shadow-outer: rgba(39, 39, 39, 0.2);
  --file-send-color-shadow-inner: rgba(4, 0, 0, 0.05);

  --header-color-background: #191919;
  --header-color-title: #fff;
  --header-color-count: #ddd;
  --header-color-border: #ddd;

  --join-user-list-color-background: #333;
  --join-user-list-color-border: #444;
  --join-user-list-color-header-border: #444;
  --join-user-list-color-header-color: #fff;
  --join-user-list-color-footer-background: #222;
  --join-user-list-color-footer: #fff;
  --join-user-list-color-shadow: rgba(0, 0, 0, 0.3);

  --join-user-color-background: #f2f2f2;
  --join-user-color-profile-border: #f2f2f2;
  --join-user-color-title: #fff;
  --join-user-translate-color: #aaa;

  --language-modal-color-background: #313131;
  --language-modal-color-border: #444;
  --language-modal-color-header-border: #444;
  --language-modal-color-footer-background: #222;
  --language-modal-color-footer-text: #fff;
  --language-modal-color-close-icon: rgba(0, 0, 0, 0.3);
  --language-modal-span-color: #fff;

  --radio-group-color-border: #ddd;
  --radio-group-color-checked: #000;
  --radio-group-span-color: #fff;
  --radio-group-radio-icon-bg-color: #fff;

  --checkbox-color-border: #ddd;
  --checkbox-color-background: #fff;

  --toggle-color-bar-background: #666;
  --toggle-color-bar-background-on: #fff;
  --toggle-color-dot-background: #999;
  --toggle-color-dot-background-on: #0ed893;
  --toggle-color-label: #ddd;

  --invite-modal-color-background: #313131;
  --invite-modal-color-border: #444;
  --invite-modal-color-input-border: #444;
  --invite-modal-color-input-text: #fff;
  --invite-modal-color-input-background: #191919;
  --invite-modal-color-title: #fff;
  --invite-modal-color-close-button-border: #fff;
  --invite-modal-color-close-button-text: #fff;
  --invite-modal-color-submit-button-border: #fff;
  --invite-modal-color-submit-button-background: #fff;
  --invite-modal-color-submit-button-text: #000;
  --invite-modal-color-shadow: rgba(0, 0, 0, 0.3);

  --modal-color-background: #313131;
  --modal-color-border: #444;
  --modal-color-title: #fff;
  --modal-color-contents: #fff;
  --modal-color-close-button-border: #fff;
  --modal-color-close-button-text: #fff;
  --modal-color-submit-button-border: #fff;
  --modal-color-submit-button-background: #fff;
  --modal-color-submit-button-text: #000;
  --modal-color-shadow: rgba(0, 0, 0, 0.3);

  --file-drawer-wrap-box-shadow-color: rgba(0, 0, 0, 0.3);
  --file-drawer-wrap-border-color: #444;
  --file-drawer-wrap-background-color: #333;
  --file-drawer-header-border-bottom-color: #444;
  --file-drawer-title-color: #fff;
  --file-drawer-tab-item-color: #fff;
  --file-drawer-tab-item-focus-color: #fff;
  --file-drawer-tab-item-focus-border-color: #fff;
  --file-drawer-body-padding-color: #ddd;
  --file-drawer-footer-border-top-color: #444;
  --file-drawer-footer-select-count-color: #fff;
  --file-drawer-footer-save-color: #fff;
  --file-drawer-footer-image-opacity: 0.3;
  --file-drawer-footer-image-opacity-hover: 0.7;

  --preview-popup-color-bg-header: rgba(0, 0, 0, 0.5);
  --preview-popup-color-text-header: #ffffff;
  --preview-popup-color-bg-dim: #000000;

  --file-preview-wrap-border-color: #f2f2f2;
  --file-preview-wrap-background-color: #fff;
  --file-preview-wrap-focus-border-color: #0ed893;
  --file-preview-wrap-focus-background-color: #fff;
  --file-preview-selected-icon-color: #000;
  --file-preview-name-color: #000;
  --file-preview-expire-color: #999;
  --file-preview-size-color: #999;

  --image-preview-wrap-focus-border-color: #0ed893;
  --image-preview-selected-icon-color: #000;

  --video-preview-wrap-focus-border-color: #0ed893;
  --video-preview-wrap-focus-background-color: #292929;
  --video-preview-selected-icon-color: #000;

  --body-chat-contents-color: #fff;
  --body-nickname-color: #fff;
  --body-chat-bg-color: #292929;

  --chat-base-profile-border-color: #444;
  --chat-base-profile-background-color: #aeaae2;
  --chat-base-nickname-color: #aaa;
  --chat-base-time-color: #aaa;

  --whisper-modal-input-border-color: #444;
  --whisper-modal-input-background-color: #191919;
  --whisper-modal-input-color: #fff;

  --whisper-and-report-popup-border-color: #444;
  --whisper-and-report-popup-background-color: #313131;
  --whisper-and-report-popup-box-shadow-color: rgba(0, 0, 0, 0.3);
  --whisper-and-report-popup-item-hover-color: #fff;
  --whisper-and-report-popup-item-hover-background-color: #313131;
  --whisper-and-report-popup-item-text-color: #fff;

  --skeleton-loading-background: #ddd;
  --skeleton-gradient-start: #e5e5e5;
  --skeleton-gradient-middle: #f0f0f0;
  --skeleton-gradient-end: #e5e5e5;

  --default-message-color: #fff;

  --open-graph-border-color: #444;
  --open-graph-shadow-color: rgba(0, 0, 0, 0.3);
  --open-graph-background-color: #fff;
  --open-graph-title-color: #333;
  --open-graph-description-color: #666;

  --file-message-wrap-background-color: #fff;
  --file-message-wrap-border-color: #444;
  --file-message-button-border-color: #ddd;
  --file-message-wrap-shadow-color: rgba(157, 173, 184, 0.3);
  --file-message-name-color: #333;
  --file-message-expire-color: #666;
  --file-message-size-color: #666;
  --file-message-icon-opacity: 0.3;
  --file-message-icon-hover-opacity: 0.7;

  --join-message-color: #00ffc0;

  --leave-message-color: #ff3a54;

  --message-notice-bg-color: #111;
  --message-notice-text-color: #fff;
  --message-notice-content-color: #fff;
  --message-notice-shadow-color: rgba(0, 0, 0, 0.3);

  --warn-message-color: #fff000;

  --whisper-message-sub-wrap-bg-color: #353535;
  --whisper-message-sub-wrap-shadow-color: rgba(0, 0, 0, 0.3);
  --whisper-message-about-title-color: #00ffc0;
  --whisper-message-about-for-me-title-color: #dfb84e;
  --whisper-message-about-sub-title-color: #aaa;
  --whisper-message-content-color: #fff;
  --whisper-message-time-color: #aaa;
  --whisper-message-for-me-bg-color: #384150;

  --move-end-line-popup-wrap-background-color: #353535;
  --move-end-line-popup-wrap-border-color: #353535;
  --move-end-line-popup-wrap-shadow-color: rgba(0, 0, 0, 0.25);
  --move-end-line-popup-wrap-text-color: #aaa;

  --message-input-bg-color: #292929;
  --message-input-textarea-color: #fff;
  --message-input-border-color: #444;
  --message-input-name-color: #aaa;
  --message-input-text-size-color: #ddd;
  --message-input-emoticon-area-border-color: #444;
  --message-input-emoticon-list-hover-bg-color: rgba(255, 255, 255, 0.1);
  --message-input-emoticon-list-emoji-bg-color: rgba(255, 255, 255, 0.1);
  --message-input-emoticon-opacity: 0.3;
  --message-input-emoticon-hover-opacity: 0.7;
  --message-input-category-bg-color: #353535;
  --message-input-category-focus-border-color: #353535;
  --message-input-category-focus-box-shadow-color: rgba(0, 0, 0, 0.3);
  --message-input-category-focus-bg-color: #292929;
  --message-input-button-bg-color: #fff;
  --message-input-button-text-color: #000;
  --message-input-category-opacity: 0.5;
}
</style>

색상을 변경하고 싶다면 아래와 같이 변수를 덮어쓸 수 있습니다.

<style>
/* 기본모드 색상 */
:root {
  --invert-img: none;

  --toaster-notify-shadow-color: rgba(168, 168, 168, 0.3);
  --toaster-notify-background-color: #363940;
  --toaster-notify-color: #fff;
  --toaster-span-color: #fff;
  ...
}

/* 다크모드 색상 */
:root .Dark {
  --invert-img: invert(100%);

  --toaster-notify-shadow-color: rgba(0, 0, 0, 0.3);
  --toaster-notify-background-color: #333;
  --toaster-notify-color: #fff;
  --toaster-span-color: #fff;
  ...
}
</style>

추가 정보

더 많은 정보와 자세한 사용법은 공식 문서 링크를 참조하세요.