Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dark theme #676

Open
wants to merge 2 commits into
base: v2
Choose a base branch
from
Open

Conversation

nagineko
Copy link

@nagineko nagineko commented Jan 4, 2025

Issue #, if available:
#10

Description of changes:

  • Added color code for dark theme.
  • Use local storage and add logic to apply dark theme.
  • Added a toggle button in the upper left corner of the chat page to switch between dark and light themes.

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@nagineko nagineko marked this pull request as draft January 4, 2025 18:08
@nagineko nagineko marked this pull request as ready for review January 4, 2025 18:09
@Yukinobu-Mine
Copy link
Contributor

@nagineko PRありがとうございます!1点コメントさせて頂きましたので、ご確認いただけますでしょうか?

@Yukinobu-Mine
Copy link
Contributor

Yukinobu-Mine commented Jan 9, 2025

@nagineko 一通り動作確認させて頂きました。以下の2点の修正をお願いできますでしょうか?

  1. テーマ切り替えのトグルを ChatPage ではなく、左ペイン (ChatListDrawer) の「Menu」ボタンと同じ行の右端に配置
  2. Ladle によるコンポーネントのプレビュー表示で、左下の「Switch to dark theme」を押してもコンポーネントがダークモード表示に切り替わらない

@nagineko
Copy link
Author

nagineko commented Jan 9, 2025

@Yukinobu-Mine
テーマ切り替えトグルをMenuボタンの右側に、Ladleでの表示対応を行いました。
ご確認のほどお願いします。

bodyClass.remove('dark');
}
}, [globalState.theme]);

return <>{children}</>;
Copy link
Contributor

@Yukinobu-Mine Yukinobu-Mine Jan 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

RadioButtonSelect の Ladle story におけるダークモード表示が実際のアプリと異なるので調べたところ、
実際のアプリでは、親コンポーネントとなる AppContent で以下のようにテキストの色が指定されていました。

<div id="main" className="text-aws-font-color-light dark:text-aws-font-color-dark">
  <Outlet />
</div>

Ladle でも同様の状態にするには、この部分 (return <>{children}</>;) を以下のようにすれば良いのではないかと考えたのですが、問題なさそうでしょうか?

return (
  <div className="text-aws-font-color-light dark:text-aws-font-color-dark">
    {children}
  </div>
);

問題ないようでしたら、変更して頂けますと幸いです。

Copy link
Author

@nagineko nagineko Jan 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Yukinobu-Mine
Ladleとアプリ側の表示を一致させるより、既存コードの処理に変更を加えないことを優先する方針かと考えていましたが、
既存コードの処理に変更を加えてでもLadleとアプリ側の表示を一致させたいという方針だったのですね。

改めてライトテーマとダークテーマ両方の表示をLadleとアプリ側両方で確認して、処理の変更が発生する箇所出てきてしまうかもしれませんがコミットしたいと思います。

@Yukinobu-Mine
Copy link
Contributor

@nagineko 修正対応ありがとうございます!Ladle でのダークモード表示について1点コメントしましたので、ご確認頂けますでしょうか?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants