テーマチェンジ機能の追加 #30
テーマチェンジ機能の追加 #30
Conversation
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
my-code | 2c05b76 | Commit Preview URL Branch Preview URL |
Oct 03 2025, 07:26 AM |
ちょっと見づらいな?
具体的にどう色を変えたらいいかはパッとわからないけど、背景が明るすぎるのと、コードブロックの背景が黒すぎる+黒文字で読みづらいのがきになる
ちなみにテーマによって手動で色の指定を変更するのはこれの一番下にあるような書き方をするとできます |
Tatsu723
force-pushed
the
changetheme
branch
from
a9af817 to
e1c7034
Compare
|
コンフリクトの解消はこれで大丈夫でしょうか？ |
|
syntaxhighlighterのstyleが(tomorrowやtwilightの一方で固定しても)反映されません。 
|
|
SyntaxHighlighterはmarkdown.tsx内に2カ所あるけど片方しか編集してないとか？ |
|
試しに両方をtwilightに変更しているのですが、ページを再読み込みしても、色がずっと変わりません。 |
|
ちなみにC++のページにあるコードブロックではtwilight適用できました。 なので、 |
|
ああ、はい pythonのターミナルはsyntaxhighlighterではないです useEffectの中で初期化時のテーマを設定しているんですけど、途中でテーマを変更する方法があるんじゃないかな？ |
|
僕が物凄く勘違いをしていたようです。ご指摘ありがとうございました。 |
|
スマホ画面用のthemetoggleとの同期及びコード内の色の手動設定以外を実装しました。（これらの部分についてはこれから行います。） |
|
直近２つのコミットについて、
|
na-trium-144
left a comment
na-trium-144
left a comment
There was a problem hiding this comment.
色についてはあとで考え直すとして、一旦これだけ直したらそろそろマージしましょう
| "chat-bubble", | ||
| { "bg-primary text-primary-content": msg.sender === 'user' }, | ||
| { "bg-secondary-content text-black": msg.sender === 'ai' && !msg.isError }, | ||
| { "bg-secondary-content dark:bg-neutral text-black dark:text-white": msg.sender === 'ai' && !msg.isError }, |
There was a problem hiding this comment.
text-neutral-content か text-base-content (daisyuiの色) にしておけばlightモードでは黒、darkモードでは白になるんじゃないかな
(daisyuiのドキュメントの右上のボタンからテーマを変更するとテーマごとの色を確認できる)
ダークモードで文字を完全な白にするのはコントラストが強すぎるので普通は少しグレーにするのがいいらしいです(ダークモードユーザーじゃないのでしらんけど)
| import { ExecFile, ExecLang } from "../terminal/exec"; | ||
| import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/hljs"; | ||
| import { useChangeTheme } from "./themeToggle"; | ||
| import { tomorrow, atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"; |
There was a problem hiding this comment.
twilightなかった？
まあ別にatomOneDarkでも良いんだけど
There was a problem hiding this comment.
prism系の方ならありました。hljsだと見当たらないような気がします。
| a: ({ node, ...props }) => <a className="link link-info" {...props} />, | ||
| strong: ({ node, ...props }) => ( | ||
| <strong className="text-primary" {...props} /> | ||
| <strong className="text-primary dark:text-secondary" {...props} /> |
There was a problem hiding this comment.
ここに書くとaiの吹き出し以外でも色が変わってしまうのでは…
| ```python-exec:main.py | ||
| code: ({ node, className, ref, style, ...props }) => <CodeComponent {...{ node, className, ref, style, ...props }} />, | ||
| }; | ||
| function CodeComponent({ node, className, ref, style, ...props }: { node: unknown; className?: string; ref?: unknown; style?: unknown; [key: string]: unknown }) { |
markdown.tsxの変数componentsは関数の中に入れました。（コンポーネント呼び出しの都合上）
トグルのレンダリングとテーマ切り替えのための関数は１つのファイルにまとめました。