From 7566ef73930f21020a49452d4b4ff98743b3d86c Mon Sep 17 00:00:00 2001 From: User Date: Mon, 12 Jan 2026 01:29:54 +0530 Subject: [PATCH 1/3] refactor:theme matches chrome ui --- chromium-extension/public/icon-16.png | Bin 0 -> 506 bytes chromium-extension/public/icon-32.png | Bin 0 -> 661 bytes chromium-extension/public/icon_white-16.png | Bin 0 -> 1240 bytes chromium-extension/public/icon_white-32.png | Bin 0 -> 1361 bytes chromium-extension/public/icon_white.png | Bin 0 -> 9831 bytes chromium-extension/public/manifest.json | 1 + chromium-extension/src/options/index.tsx | 109 ++-- .../sidebar/components/AgentExecutionCard.tsx | 4 +- .../src/sidebar/components/ChatInput.tsx | 22 +- .../src/sidebar/components/SessionHistory.tsx | 15 +- .../src/sidebar/components/ToolCallItem.tsx | 20 +- .../src/sidebar/hooks/useThemeColors.ts | 35 ++ chromium-extension/src/sidebar/index.css | 589 +++++++++++++++++- chromium-extension/src/sidebar/index.tsx | 24 +- chromium-extension/src/types/chrome.d.ts | 63 ++ chromium-extension/tsconfig.json | 5 +- 16 files changed, 811 insertions(+), 76 deletions(-) create mode 100644 chromium-extension/public/icon-16.png create mode 100644 chromium-extension/public/icon-32.png create mode 100644 chromium-extension/public/icon_white-16.png create mode 100644 chromium-extension/public/icon_white-32.png create mode 100644 chromium-extension/public/icon_white.png create mode 100644 chromium-extension/src/sidebar/hooks/useThemeColors.ts create mode 100644 chromium-extension/src/types/chrome.d.ts diff --git a/chromium-extension/public/icon-16.png b/chromium-extension/public/icon-16.png new file mode 100644 index 0000000000000000000000000000000000000000..5109c2f3a415b47ee43ffb2f6b6f42b454d3353f GIT binary patch literal 506 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`Ea{HEjtmSN`?>!lvI6-E$sR$z z3=CCj3=9n|3=F@3LJcn%7)lKo7+xhXFj&oCU=S~uvn$XBC{d9b;hE;^%b*2hb1<+l zN-=;;U<6`2MrkEdvZU!s{qD&?a61S>I}F2_mHjXz|?Ecq8m_~p-I^J+5rpPHO} z`N*P~jT0w+6bRuxQI= zQG=k$=_5y`e0qO>Khq4g1*a2yEPAhU7eunLZE*Cc;Zf5QZ&=I3b}Ms%_O!z#jIoco zQj#l})%d$x?Hw3xXDCS3N}OPq?6VhZ;Hq1cdF15LXRH(U-))HC?bhRYo@~q@vSIRu mjAL3Z8e$u=oWz#gU|`tw%9v+O^z$X4K=E|-b6Mw<&;$Ty>4^IP literal 0 HcmV?d00001 diff --git a/chromium-extension/public/icon-32.png b/chromium-extension/public/icon-32.png new file mode 100644 index 0000000000000000000000000000000000000000..299bf220781d5ffd0fa332bff6b108a0c71a9314 GIT binary patch literal 661 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmUKs7M+SzC{oH>NSwWJ?9znhg z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fgQIQ(qnda-upao=eFt9L6 zF@Q{91Y$czX*k=BQGVvFvffQ$fM`SSrgKRqpGxk6Imh=)36#{LIIRDBvO+iE z@`UH&3EIqd%w_44^MoGES$)aG_VnjJg^~|TY`Ye5zyJI8%KPeIrj%lt%q)Dt_yKNewxIr{;Iucyn^on*|zO zvzKK)y17K^O6lJ9ckU@_J8(oXT}Zq1`1#&5PY#{3XT0T;)#UYANmrXY!X+zGdOd^4 z{EqvZ=4|8k7FBHexk)G6w_){9P0vZ$cfJ=#x-^=FhRQA$UiU>VZ4dW^JKrBZpHZVK zYsA7;eDk34p6^_T?_RHJPTX@g;rXTGIZ{H#T8#6LO%9$ea+Q@sXQtJ}Q|Yb?nENDj vv>kr^B{*7e38-b?;qo2i${nje_h1&S|ES3j3^P6!lvI6-E$sR$z z3=CCj3=9n|3=F@3LJcn%7)lKo7+xhXFj&oCU=S~uvn$XBDAAG{;hE;^%b*2hb1<+n z3NbJPS&Tr)z$nE4G7ZRL@M4sPvx68lplX;H7}_%#SfFa6fHVjk0Ai3H2+h2J5nlF>KRGtkGTEwv&Ohc=K5L>t&&5bJC}hFL`hr55Msl!BaPXJ~0;1GWN1 z6yZRK4upo#yv!0im=-i)bX^e$c_e#~MbUNm7iFdbgA(F0sJoEGkko_xXBCiHk(v|X zl9`*DR}AuvnX!S5K2{lYozD3=`9;A6iOH#UhEOd?Lg=c&_C(^e2T2C1(?%Z@-$?Nf zNnBu2VCu5tveAd9R6DK@LEWI_`^?kDF~mY}>m*06Lk>Ky*3A(|90g-`eAipI*X`g` z^%t@>jmJNV?Gn<~E4|*QUz%~cB&sz@VXn$#HT$2!t{q#;8sjd;KXrWM_3!E@Nu_4) z9;UnTNBCZBt_&A(U920y}w@ilV+;uA&lmbIu_)ZCu-njdTzD`7P&(uDhFC0yiU)!~{vQ$6&^NS(tDAPCI z*lXM6yJu`DaCEJTobc|GSdHfQN9@ktbC_!9Kd*eDxb>m8tAeS!hGE^$FMSUdzxm33 a`3KvsfJ=7X8Qa1@`PI|a&t;ucLK6V_a(Ze2 literal 0 HcmV?d00001 diff --git a/chromium-extension/public/icon_white-32.png b/chromium-extension/public/icon_white-32.png new file mode 100644 index 0000000000000000000000000000000000000000..b3a5777b3f2326aa6992e8d5eecb4c16ec683006 GIT binary patch literal 1361 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmUKs7M+SzC{oH>NSwWJ?9znhg z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fg(UKbBnda-upao=eFt9QT zF)#yJj6lf1D8&FW4aj2fVw8rngBUfSYM2-p+A|qgplYIkGzc63VvrsP&AfmSVd4TN zxN3z3%m_A6HN)3v84^(v;p=0SoS&uf-VSw#k=7U$=bf}CY%XlY~vwgN>I z;XsHEgoe<(%o0187BpdWT@eU*BzurW(RKJ2Wu^jy65=wbyO70@)PwwI6_8nxniJuY znVXtd4DyYcv4M>~RvC1i&iOg{MZpD$$*FdRP%TJ8=&Hf?MB=muNd~IZMjsU4NbwIz zTwqaP>aydq(TAs0JFX8w-N59_81L!g7!twxHq1Kfu!F$W`6?|dJcSG9GB5eaS;O3X zaBj7^Wz+fxcN9X`JvhexQBf#}bB)LB;Jf}P`e}fx01Ha z7ky9@S~+k1Ba3?>J97@*IwoLurR=)8_JM~EP1Y9ja~m!_3|Y2AKWyEO|Ll8R8qB75 z?00F2}GLJI;%FaB>{J;5jArrgh!x@<|OUo;=^gHqI2;UOR;$ zrhrY)_p<+w)w+5m&!c(fSe)PXf@QsB&>azv$)Vk{Jq=FLk{_od41Od6~$^ yLk~0=D=z!r$ZiYhmOR6g!M*rnGW)uFjqzJg4OPFZZl%X5az82#LOOndICV%6`!Yq%9Fpmn?1Qz-hK#K)Kt&3ccK7wYhugm7uOwF?5~CP&%QXfy*I2$os}~!kya0z7^vPkI#|^L;UYGKeSsS@)Ds&p| z3V~1{9?P>}QI8 zo{b>SMQ18j=Nr-c--$j`_0_zcd!gw@*c#%6xaQI?5?%6m3-La7&B@8&jjUQ2HYX`U z)c7ziCB84}*vVZF+l!1B2fVw=*`I%7tB>|idMDjB8Oz5h<=7Au3uYyTdPnaZ&$0U^ zq!aF(j;mM%S8gU}(nIEUeqGYdqo_BrJ+GY6?+fLSvkkfE743QDSr$bdF{|(Xv84nE z1GFliXp7}Yy=!<3Lw|fdB&m z2Evmd0ukMHBRs-0V42I}tYz08*uXceBih#Y@m*&yN8QAL$>i=?>0iAYX?Tx#I>kGZ zQf!(YFZk%{{>>rY+#MHcI%r%=2DsLm*FfXiNwd13yhuyqS~k&k=u|$J#f|bDOtSXkKv$tE$p3rX zwbw*T z%<75!uOXm%PUt?b&-+ntBgoX;*EdF1f>ic{*{DgG_u8lXEZ#IS<#{>*AljRHaGu<`l3hCE3ul#xK+aEX3+^bkIRkI^=7^jZ~d)L^P^~)G;uBw00MhWBdOmH#W zyUprqs2G|WIu{HlI;p_~0#hbcf&J$}qIls?k}&0b&!}Bi|6$N&=?@bQlYhuoKQ(;4 z-7$Q5QG?0nne4ULEQ;d$NB1`ph0Z&Z9qy?~_fSgR(djiycFKk=Hd)=2^%90)q6UlU zu75CYtl(__;6;vwLfI6_zW@;RB*el!vQSnAEBaO#jH6d)vA22H}@HbXCw uo8>TYzz;<*DS*>Jm?yz`!xJY3j|uxAdA}iKi4*+U3du~%R { + // Use Chrome theme colors + const { colors: themeColors } = useThemeColors(); + + // Apply theme colors to CSS variables + useEffect(() => { + if (themeColors.kColorSysBase) { + document.documentElement.style.setProperty('--chrome-bg-primary', themeColors.kColorSysBase); + } + if (themeColors.kColorSysOnSurface) { + document.documentElement.style.setProperty('--chrome-text-primary', themeColors.kColorSysOnSurface); + document.documentElement.style.setProperty('--chrome-icon-color', themeColors.kColorSysOnSurface); + } + if (themeColors.kColorSysBaseContainer) { + document.documentElement.style.setProperty('--chrome-input-background', themeColors.kColorSysBaseContainer); + document.documentElement.style.setProperty('--chrome-input-border', themeColors.kColorSysBaseContainer); + } + }, [themeColors]); + const [form] = Form.useForm(); const [config, setConfig] = useState({ @@ -49,6 +68,17 @@ const OptionsPage = () => { Record >({}); const [modelSearchValue, setModelSearchValue] = useState(""); + const [isDarkMode, setIsDarkMode] = useState( + window.matchMedia("(prefers-color-scheme: dark)").matches + ); + + // Listen for theme changes + useEffect(() => { + const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); + const handleChange = (e: MediaQueryListEvent) => setIsDarkMode(e.matches); + mediaQuery.addEventListener("change", handleChange); + return () => mediaQuery.removeEventListener("change", handleChange); + }, []); // Fetch models data on component mount useEffect(() => { @@ -142,7 +172,10 @@ const OptionsPage = () => { webSearchConfig: newWebSearchConfig }, () => { - message.success("Save Success!"); + message.success({ + content: "Save Success!", + className: "toast-text-black" + }); } ); }) @@ -188,31 +221,35 @@ const OptionsPage = () => { setConfig(newConfig); form.setFieldValue(["options", "baseURL"], defaultBaseURL); - message.success("Base URL reset to default"); + message.success({ + content: "Base URL reset to default", + className: "toast-text-black" + }); }; if (loading) { return ( -
- } /> +
+ } />
); } + return ( -
+
{/* Header */} -
+
OpenBrowser Logo
-

Settings

-

+

Settings

+

Configure your AI model preferences (vision models only)

@@ -222,12 +259,12 @@ const OptionsPage = () => { {/* Content */}
-
+
+ LLM Provider } @@ -242,7 +279,8 @@ const OptionsPage = () => { placeholder="Choose a LLM provider" onChange={handleLLMChange} size="large" - className="w-full" + className="w-full bg-theme-input border-theme-input text-theme-primary input-theme-focus radius-8px" + popupClassName="bg-theme-input border-theme-input dropdown-theme-items" > {providerOptions.map((provider) => (