[chrome] add theme selector and fix settingspage.tsx styling

Author: velzie

packages/chrome/src/App.tsx

@@ -5,80 +5,49 @@ import { browser } from "./Browser";
 import { Tab } from "./Tab";
 import { BookmarksStrip } from "./components/BookmarksStrip";
 import { Omnibar } from "./components/Omnibar/Omnibar";
+import { getTheme } from "./themes";
 
 export function App(props: {}, cx: ComponentContext) {
 	const applyTheme = () => {
-		let theme = browser.settings.theme;
+		const appearance = browser.settings.appearance;
+		const themeId = browser.settings.themeId;
+		const theme = getTheme(themeId);
 
-		if (theme === "system") {
+		// Determine if we should use light mode
+		let isLight = false;
+		if (appearance === "system") {
 			const prefersDark = window.matchMedia(
 				"(prefers-color-scheme: dark)"
 			).matches;
-			document.body.classList.toggle("light-mode", !prefersDark);
+			isLight = !prefersDark;
 		} else {
-			document.body.classList.toggle("light-mode", theme === "light");
+			isLight = appearance === "light";
+		}
+
+		document.body.classList.toggle("light-mode", isLight);
+
+		// Apply theme tokens
+		for (const [key, value] of Object.entries(theme.tokens)) {
+			document.body.style.setProperty(`--${key}`, value);
 		}
 	};
 
 	applyTheme();
 
 	const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
 	const handleThemeChange = () => {
-		if (browser.settings.theme === "system") {
+		if (browser.settings.appearance === "system") {
 			applyTheme();
 		}
 	};
 
 	mediaQuery.addEventListener("change", handleThemeChange);
 
-	use(browser.settings.theme).listen(applyTheme);
-
-	const theme = {
-		// dark theme
-		// frame: "rgb(240, 240, 244)",
-		// toolbar: "rgb(249, 249, 251)",
-		// tab_selected: "rgb(255, 255, 255)",
-		// tab_background_text: "black",
-		// toolbar_text: "rgb(21, 20, 26)",
-		// icons: "rgb(91, 91, 102)",
-		// toolbar_field: "rgb(230 230, 230)",
-		// ntp_background: "rgb(249, 249, 251)",
-		// ntp_background_text: "rgb(21, 20, 26)",
-
-		// light 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",
-
-		// catppuccin
-		toolbar: "rgb(45, 41, 59)",
-		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)",
-	};
+	use(browser.settings.appearance).listen(applyTheme);
+	use(browser.settings.themeId).listen(applyTheme);
 
 	cx.mount = () => {
-		for (const [key, value] of Object.entries(theme)) {
-			document.body.style.setProperty(`--${key}`, value);
-		}
+		applyTheme();
 	};
 
 	return (

packages/chrome/src/Browser.tsx

@@ -16,6 +16,11 @@ import {
 import type { RawDownload } from "./proxy/fetch";
 import { CookieJar } from "@mercuryworkshop/scramjet/bundled";
 import { getSerializedBrowserState, markDirty } from "./storage";
+import {
+	type AppearancePreference,
+	type ThemeId,
+	DEFAULT_THEME_ID,
+} from "./themes";
 export const pushTab = createDelegate<Tab>();
 export const popTab = createDelegate<Tab>();
 export const forceScreenshot = createDelegate<Tab>();
@@ -62,7 +67,8 @@ export type DownloadEntry = {
 };
 
 export type Settings = {
-	theme: "system" | "dark" | "light";
+	appearance: AppearancePreference;
+	themeId: ThemeId;
 	startupPage: "new-tab" | "continue";
 	defaultZoom: number;
 	showBookmarksBar: boolean;
@@ -93,7 +99,8 @@ export class Browser extends StatefulClass {
 	downloadProgress = 0;
 
 	settings: Stateful<Settings> = createState({
-		theme: "system",
+		appearance: "system",
+		themeId: DEFAULT_THEME_ID,
 		startupPage: "continue",
 		defaultZoom: 100,
 		showBookmarksBar: true,
@@ -231,7 +238,10 @@ export class Browser extends StatefulClass {
 		}
 		this.bookmarks = de.bookmarks.map(createState);
 		this.globalDownloadHistory = de.globalDownloadHistory.map(createState);
-		this.settings = createState(de.settings);
+
+		const settings = { ...de.settings };
+
+		this.settings = createState(settings);
 		this.cookieJar.load(de.cookiedump);
 	}
 

packages/chrome/src/History.ts

@@ -2,7 +2,6 @@ import { createState } from "dreamland/core";
 import { browser } from "./Browser";
 import { StatefulClass } from "./StatefulClass";
 import type { Tab } from "./Tab";
-import { sendFrame } from "./proxy/ipc";
 import { markDirty } from "./storage";
 
 // history api emulation
@@ -147,11 +146,11 @@ export class History {
 		let newstate = this.states[this.index];
 
 		if (current.virtual) {
-			sendFrame(this.tab, "popstate", {
-				state: newstate.state,
-				url: newstate.url.href,
-				title: newstate.title || "",
-			});
+			// sendFrame(this.tab, "popstate", {
+			// 	state: newstate.state,
+			// 	url: newstate.url.href,
+			// 	title: newstate.title || "",
+			// });
 		} else if (navigate) {
 			this.justTriggeredNavigation = true;
 			this.tab._directnavigate(newstate.url);