Skip to content

Commit a2ed51e

Browse files
velzievelzie
authored
Merge pull request #24 from HeyPuter/chrome-theme-test
Replace hardcoded theme css with firefox compatible themes
2 parents 22ee6bd + 91d1020 commit a2ed51e

File tree

17 files changed

+145
-53
lines changed

17 files changed

+145
-53
lines changed

‎amplify.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ frontend:
5252
- pnpm build
5353
- VITE_PUTER_BRANDING=1 VITE_ISOLATION_ORIGIN="https://puter.zone" pnpm build:chrome
5454

55+
5556
artifacts:
5657
baseDirectory: packages/scramjet/packages/core/dist
5758
files:

‎packages/chrome/src/App.tsx‎

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import type { ComponentContext } from "dreamland/core";
2+
import { css } from "dreamland/core";
23
import { TabStrip } from "./components/TabStrip/TabStrip";
34
import { browser } from "./Browser";
4-
import type { Tab } from "./Tab";
5+
import { Tab } from "./Tab";
56
import { BookmarksStrip } from "./components/BookmarksStrip";
67
import { Omnibar } from "./components/Omnibar/Omnibar";
78

@@ -32,6 +33,40 @@ export function App(props: {}, cx: ComponentContext) {
3233

3334
use(browser.settings.theme).listen(applyTheme);
3435

36+
const theme = {
37+
frame: "#1c1b22",
38+
tab_selected: "#42414d",
39+
tab_background_text: "white",
40+
toolbar: "#2b2a33",
41+
toolbar_text: "white",
42+
toolbar_field: "#1C1B22",
43+
toolbar_field_text: "white",
44+
icons: "white",
45+
ntp_background: "#121117",
46+
ntp_text: "white",
47+
48+
// toolbar_text: "rgb(236, 191, 189)",
49+
// frame: "rgb(30, 30, 40)",
50+
// tab_background_text: "rgb(215, 218, 224)",
51+
// toolbar_field: "rgb(30, 30, 40)",
52+
// toolbar_field_text: "rgb(236, 191, 189)",
53+
// tab_line: "rgb(236, 191, 189)",
54+
// popup: "rgb(30, 30, 40)",
55+
// popup_text: "rgb(236, 191, 189)",
56+
// icons: "rgb(198, 170, 232)",
57+
// ntp_background: "rgb(21, 18, 28)",
58+
// ntp_text: "rgb(164, 185, 239)",
59+
// popup_border: "rgb(236, 191, 189)",
60+
// toolbar_top_separator: "rgb(30, 30, 40)",
61+
// tab_loading: "rgb(236, 191, 189)",
62+
};
63+
64+
cx.mount = () => {
65+
for (const [key, value] of Object.entries(theme)) {
66+
document.body.style.setProperty(`--${key}`, value);
67+
}
68+
};
69+
3570
return (
3671
<div id="app">
3772
<TabStrip
@@ -48,8 +83,18 @@ export function App(props: {}, cx: ComponentContext) {
4883
{use(browser.activetab.url, browser.settings.showBookmarksBar)
4984
.map(([u, pinned]) => pinned || u.href === "puter://newtab")
5085
.andThen(<BookmarksStrip />)}
51-
<div style="border-bottom: 1px solid var(--bg20)"></div>
86+
<div class="separator"></div>
5287
{cx.children}
5388
</div>
5489
);
5590
}
91+
App.style = css`
92+
:scope {
93+
background-color: var(--toolbar);
94+
--separator-color: color-mix(in srgb, currentColor 10%, transparent);
95+
}
96+
.separator {
97+
color: var(--toolbar);
98+
/*border-bottom: 1px solid var(--separator-color);*/
99+
}
100+
`;

‎packages/chrome/src/components/BookmarksStrip.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,18 @@ BookmarksStrip.style = css`
103103
height: 2em;
104104
display: flex;
105105
gap: 0.5em;
106-
background: var(--bg01);
107-
color: var(--fg);
106+
background: var(--toolbar);
107+
color: var(--toolbar_text);
108+
--toolbarbutton-hover-background: color-mix(
109+
in srgb,
110+
currentColor 17%,
111+
transparent
112+
);
113+
--toolbarbutton-active-background: color-mix(
114+
in srgb,
115+
currentColor 30%,
116+
transparent
117+
);
108118
}
109119
110120
button {
@@ -115,10 +125,11 @@ BookmarksStrip.style = css`
115125
116126
padding-left: 0.25em;
117127
padding-right: 0.25em;
118-
border-radius: var(--radius);
128+
border-radius: 3px;
129+
color: var(--toolbar_text);
119130
}
120131
button:hover {
121-
background: var(--bg20);
132+
background: var(--toolbarbutton-hover-background);
122133
}
123134
button span {
124135
white-space: nowrap;

‎packages/chrome/src/components/Button.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ export function Button(
2121
}
2222

2323
Button.style = css`
24+
:scope {
25+
color: inherit;
26+
}
2427
:scope:not(.icon) {
2528
background: var(--bg02);
2629
border: 1px solid var(--fg4);

‎packages/chrome/src/components/Menu.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -153,8 +153,8 @@ Menu.style = css`
153153
position: absolute;
154154
top: var(--y);
155155
left: var(--x);
156-
background: var(--bg02);
157-
border: 1px solid var(--fg4);
156+
background-color: var(--frame);
157+
border: 1px solid var(--toolbar_text);
158158
border-radius: 4px;
159159
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
160160
z-index: 1000;
@@ -170,7 +170,7 @@ Menu.style = css`
170170
transform: scale(100%);
171171
}
172172
.separator {
173-
border-top: 1px solid var(--fg4);
173+
border-top: 1px solid var(--toolbar_text);
174174
}
175175
:scope.closing {
176176
transform: scale(95%);
@@ -182,7 +182,7 @@ Menu.style = css`
182182
font-size: 0.8em;
183183
padding: 1em;
184184
text-align: left;
185-
color: var(--fg);
185+
color: var(--toolbar_text);
186186
187187
display: flex;
188188
align-items: center;

‎packages/chrome/src/components/Omnibar/BookmarkButton.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export function BookmarkButton(s: { url: URL }) {
4848
BookmarkButton.style = css`
4949
:scope {
5050
font-size: 1em;
51-
color: var(--fg2);
51+
color: var(--toolbar_text);
5252
display: flex;
5353
margin: 0.25em;
5454
padding: 0.25em;
@@ -58,10 +58,9 @@ BookmarkButton.style = css`
5858
align-items: center;
5959
justify-content: center;
6060
61-
color: var(--fg2);
6261
border-radius: 0.2em;
6362
}
6463
:scope:hover {
65-
background: var(--bg01);
64+
background: var(--toolbarbutton-hover-background);
6665
}
6766
`;

‎packages/chrome/src/components/Omnibar/Omnibar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@ export function Omnibar(s: { tab: Tab }, cx: ComponentContext) {
225225
Omnibar.style = css`
226226
:scope {
227227
z-index: 1;
228-
background: var(--bg01);
228+
background: var(--toolbar);
229229
display: flex;
230230
padding: 0 7px 0 7px;
231231
height: 2.5em;

‎packages/chrome/src/components/Omnibar/OmnibarButton.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,15 @@ OmnibarButton.style = css`
3232
padding: 0.25em;
3333
3434
font-size: 1.15em;
35-
color: var(--fg2);
35+
color: var(--icons);
3636
border-radius: 0.2em;
37+
38+
opacity: 0.4;
3739
}
3840
:scope.active:hover {
39-
background: var(--bg20);
41+
background: var(--toolbarbutton-hover-background);
4042
}
4143
:scope.active {
42-
color: var(--fg2);
44+
opacity: 1;
4345
}
4446
`;

‎packages/chrome/src/components/Omnibar/Omnibox.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ function InactiveBar(props: { subtle: boolean; active: boolean }) {
3838
}
3939
InactiveBar.style = css`
4040
:scope {
41-
background: var(--bg);
41+
background: var(--toolbar_field);
4242
width: 100%;
4343
border: none;
4444
outline: none;
@@ -411,11 +411,11 @@ Omnibox.style = css`
411411
.overflow {
412412
position: absolute;
413413
display: none;
414-
background: var(--bg02);
414+
background: var(--toolbar_field);
415415
width: 100%;
416416
border-radius: 4px;
417417
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
418-
border: 1px solid var(--fg5);
418+
border: 1px solid var(--toolbar_text);
419419
padding-bottom: 0.5em;
420420
}
421421
.overflow .spacer {

‎packages/chrome/src/components/Omnibar/SiteOptionsButton.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,16 +34,16 @@ SiteOptionsButton.style = css`
3434
background: none;
3535
outline: none;
3636
border: none;
37-
color: var(--fg);
37+
color: var(--toolbar_text);
3838
font-size: 1em;
3939
padding: 0.1em;
4040
border-radius: 0.2em;
4141
display: flex;
4242
align-items: center;
4343
justify-content: center;
44-
background: var(--bg01);
44+
background: var(--toolbar);
4545
}
4646
:scope:hover {
47-
background: var(--bg02);
47+
background: var(--toolbarbutton-hover-background);
4848
}
4949
`;

0 commit comments

Comments
 (0)