Replace hardcoded theme css with firefox compatible themes

amplify.yml

@@ -52,6 +52,7 @@ frontend:
         - pnpm build
         - VITE_PUTER_BRANDING=1 VITE_ISOLATION_ORIGIN="https://puter.zone" pnpm build:chrome
 
+
 artifacts:
   baseDirectory: packages/scramjet/packages/core/dist
   files:

packages/chrome/src/App.tsx

@@ -1,7 +1,8 @@
 import type { ComponentContext } from "dreamland/core";
+import { css } from "dreamland/core";
 import { TabStrip } from "./components/TabStrip/TabStrip";
 import { browser } from "./Browser";
-import type { Tab } from "./Tab";
+import { Tab } from "./Tab";
 import { BookmarksStrip } from "./components/BookmarksStrip";
 import { Omnibar } from "./components/Omnibar/Omnibar";
 
@@ -32,6 +33,40 @@ export function App(props: {}, cx: ComponentContext) {
 
 	use(browser.settings.theme).listen(applyTheme);
 
+	const theme = {
+		frame: "#1c1b22",
+		tab_selected: "#42414d",
+		tab_background_text: "white",
+		toolbar: "#2b2a33",
+		toolbar_text: "white",
+		toolbar_field: "#1C1B22",
+		toolbar_field_text: "white",
+		icons: "white",
+		ntp_background: "#121117",
+		ntp_text: "white",
+
+		// toolbar_text: "rgb(236, 191, 189)",
+		// frame: "rgb(30, 30, 40)",
+		// tab_background_text: "rgb(215, 218, 224)",
+		// toolbar_field: "rgb(30, 30, 40)",
+		// toolbar_field_text: "rgb(236, 191, 189)",
+		// tab_line: "rgb(236, 191, 189)",
+		// popup: "rgb(30, 30, 40)",
+		// popup_text: "rgb(236, 191, 189)",
+		// icons: "rgb(198, 170, 232)",
+		// ntp_background: "rgb(21, 18, 28)",
+		// ntp_text: "rgb(164, 185, 239)",
+		// popup_border: "rgb(236, 191, 189)",
+		// toolbar_top_separator: "rgb(30, 30, 40)",
+		// tab_loading: "rgb(236, 191, 189)",
+	};
+
+	cx.mount = () => {
+		for (const [key, value] of Object.entries(theme)) {
+			document.body.style.setProperty(`--${key}`, value);
+		}
+	};
+
 	return (
 		<div id="app">
 			<TabStrip
@@ -48,8 +83,18 @@ export function App(props: {}, cx: ComponentContext) {
 			{use(browser.activetab.url, browser.settings.showBookmarksBar)
 				.map(([u, pinned]) => pinned || u.href === "puter://newtab")
 				.andThen(<BookmarksStrip />)}
-			<div style="border-bottom: 1px solid var(--bg20)"></div>
+			<div class="separator"></div>
 			{cx.children}
 		</div>
 	);
 }
+App.style = css`
+	:scope {
+		background-color: var(--toolbar);
+		--separator-color: color-mix(in srgb, currentColor 10%, transparent);
+	}
+	.separator {
+		color: var(--toolbar);
+		/*border-bottom: 1px solid var(--separator-color);*/
+	}
+`;

packages/chrome/src/components/BookmarksStrip.tsx

@@ -103,8 +103,18 @@ BookmarksStrip.style = css`
 		height: 2em;
 		display: flex;
 		gap: 0.5em;
-		background: var(--bg01);
-		color: var(--fg);
+		background: var(--toolbar);
+		color: var(--toolbar_text);
+		--toolbarbutton-hover-background: color-mix(
+			in srgb,
+			currentColor 17%,
+			transparent
+		);
+		--toolbarbutton-active-background: color-mix(
+			in srgb,
+			currentColor 30%,
+			transparent
+		);
 	}
 
 	button {
@@ -115,10 +125,11 @@ BookmarksStrip.style = css`
 
 		padding-left: 0.25em;
 		padding-right: 0.25em;
-		border-radius: var(--radius);
+		border-radius: 3px;
+		color: var(--toolbar_text);
 	}
 	button:hover {
-		background: var(--bg20);
+		background: var(--toolbarbutton-hover-background);
 	}
 	button span {
 		white-space: nowrap;

packages/chrome/src/components/Button.tsx

@@ -21,6 +21,9 @@ export function Button(
 }
 
 Button.style = css`
+	:scope {
+		color: inherit;
+	}
 	:scope:not(.icon) {
 		background: var(--bg02);
 		border: 1px solid var(--fg4);

packages/chrome/src/components/Menu.tsx

@@ -153,8 +153,8 @@ Menu.style = css`
 		position: absolute;
 		top: var(--y);
 		left: var(--x);
-		background: var(--bg02);
-		border: 1px solid var(--fg4);
+		background-color: var(--frame);
+		border: 1px solid var(--toolbar_text);
 		border-radius: 4px;
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 		z-index: 1000;
@@ -170,7 +170,7 @@ Menu.style = css`
 		transform: scale(100%);
 	}
 	.separator {
-		border-top: 1px solid var(--fg4);
+		border-top: 1px solid var(--toolbar_text);
 	}
 	:scope.closing {
 		transform: scale(95%);
@@ -182,7 +182,7 @@ Menu.style = css`
 		font-size: 0.8em;
 		padding: 1em;
 		text-align: left;
-		color: var(--fg);
+		color: var(--toolbar_text);
 
 		display: flex;
 		align-items: center;

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

@@ -48,7 +48,7 @@ export function BookmarkButton(s: { url: URL }) {
 BookmarkButton.style = css`
 	:scope {
 		font-size: 1em;
-		color: var(--fg2);
+		color: var(--toolbar_text);
 		display: flex;
 		margin: 0.25em;
 		padding: 0.25em;
@@ -58,10 +58,9 @@ BookmarkButton.style = css`
 		align-items: center;
 		justify-content: center;
 
-		color: var(--fg2);
 		border-radius: 0.2em;
 	}
 	:scope:hover {
-		background: var(--bg01);
+		background: var(--toolbarbutton-hover-background);
 	}
 `;

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

@@ -225,7 +225,7 @@ export function Omnibar(s: { tab: Tab }, cx: ComponentContext) {
 Omnibar.style = css`
 	:scope {
 		z-index: 1;
-		background: var(--bg01);
+		background: var(--toolbar);
 		display: flex;
 		padding: 0 7px 0 7px;
 		height: 2.5em;

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

@@ -32,13 +32,15 @@ OmnibarButton.style = css`
 		padding: 0.25em;
 
 		font-size: 1.15em;
-		color: var(--fg2);
+		color: var(--icons);
 		border-radius: 0.2em;
+
+		opacity: 0.4;
 	}
 	:scope.active:hover {
-		background: var(--bg20);
+		background: var(--toolbarbutton-hover-background);
 	}
 	:scope.active {
-		color: var(--fg2);
+		opacity: 1;
 	}
 `;

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

@@ -38,7 +38,7 @@ function InactiveBar(props: { subtle: boolean; active: boolean }) {
 }
 InactiveBar.style = css`
 	:scope {
-		background: var(--bg);
+		background: var(--toolbar_field);
 		width: 100%;
 		border: none;
 		outline: none;
@@ -411,11 +411,11 @@ Omnibox.style = css`
 	.overflow {
 		position: absolute;
 		display: none;
-		background: var(--bg02);
+		background: var(--toolbar_field);
 		width: 100%;
 		border-radius: 4px;
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-		border: 1px solid var(--fg5);
+		border: 1px solid var(--toolbar_text);
 		padding-bottom: 0.5em;
 	}
 	.overflow .spacer {

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

@@ -34,16 +34,16 @@ SiteOptionsButton.style = css`
 		background: none;
 		outline: none;
 		border: none;
-		color: var(--fg);
+		color: var(--toolbar_text);
 		font-size: 1em;
 		padding: 0.1em;
 		border-radius: 0.2em;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: var(--bg01);
+		background: var(--toolbar);
 	}
 	:scope:hover {
-		background: var(--bg02);
+		background: var(--toolbarbutton-hover-background);
 	}
 `;

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

@@ -105,7 +105,7 @@ Suggestion.style = css`
 		padding-bottom: 0.25em;
 
 		white-space: nowrap;
-		color: var(--fg);
+		color: var(--toolbar_text);
 		overflow: hidden;
 
 		border-radius: var(--radius);
@@ -148,10 +148,10 @@ Suggestion.style = css`
 	}
 	:scope.focused,
 	:scope.focused:hover {
-		background: var(--bg20);
+		background: var(--accent);
 	}
 	:scope:hover {
-		background: var(--bg04);
+		background: var(--toolbarbutton-hover-background);
 	}
 
 	.focused .description {

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

@@ -122,29 +122,30 @@ UrlInput.style = css`
 		text-wrap: nowrap;
 		overflow: hidden;
 		font-family: var(--font);
-		color: var(--fg);
+		color: var(--toolbar_text);
 		cursor: text;
 	}
 	.inactiveurl {
 		display: flex;
 		align-items: center;
-		color: var(--fg);
+		color: var(--toolbar_text);
 	}
 	.inactiveurl .subdomain,
 	.inactiveurl .rest {
 		opacity: 0.7;
-		color: var(--fg2);
+		color: var(--toolbar_text);
 	}
 
 	.placeholder {
-		color: var(--fg4);
+		color: var(--toolbar_text);
+		opacity: 0.5;
 		display: flex;
 		align-items: center;
 	}
 
 	.lefticon {
 		font-size: 1.15em;
-		color: var(--fg2);
+		color: var(--toolbar_text);
 		display: flex;
 		margin: 0.25em;
 

packages/chrome/src/components/SiteInformationPopup.tsx

@@ -50,13 +50,16 @@ SiteInformationPopup.style = css`
 		flex-direction: column;
 		gap: 1em;
 		width: 20em;
+
+		color: var(--toolbar_text);
 	}
 
 	.buttoniconscontainer {
 		flex: 1;
 		display: flex;
 		align-items: top;
 		justify-content: end;
+		color: var(--toolbar_text);
 	}
 
 	.content {
@@ -66,14 +69,14 @@ SiteInformationPopup.style = css`
 	.header {
 		padding: 1em;
 		display: flex;
-		border-bottom: 1px solid var(--fg4);
+		border-bottom: 1px solid var(--toolbar_text);
 	}
 	.header span {
 		font-size: 1.15em;
 	}
 
 	.footer {
-		border-top: 1px solid var(--fg4);
+		border-top: 1px solid var(--toolbar_text);
 		display: flex;
 		flex-direction: column;
 	}
@@ -86,6 +89,6 @@ SiteInformationPopup.style = css`
 		gap: 1em;
 	}
 	.entry:hover {
-		background: var(--bg20);
+		background: var(--toolbarbutton-hover-background);
 	}
 `;