clone/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-02-01 22:48:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: cleanup theme stuff

Browse Source
This commit is contained in:
Adam
2025-12-28 10:14:30 -06:00
parent 82a876da4d
commit f89b83a6d7
4 changed files with 10 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/ui/script/generate-preload.ts
View File

@@ -1,16 +0,0 @@
/**
* Generates the theme preload script content.
* Run this to get the script that should be embedded in index.html.
*/
import { generatePreloadScript, generatePreloadScriptFormatted } from "../src/theme/preload"
const formatted = process.argv.includes("--formatted")
if (formatted) {
console.log("<script>")
console.log(generatePreloadScriptFormatted())
console.log("</script>")
} else {
console.log("<script>" + generatePreloadScript() + "</script>")
}

11
packages/ui/src/theme/context.tsx
View File

@@ -19,7 +19,6 @@ import {
} from "solid-js"
import type { DesktopTheme } from "./types"
import { resolveThemeVariant, themeToCss } from "./resolve"
import { STORAGE_KEYS, getThemeCacheKey } from "./preload"
import { DEFAULT_THEMES } from "./default-themes"
export type ColorScheme = "light" | "dark" | "system"
@@ -43,6 +42,16 @@ interface ThemeContextValue {
const ThemeContext = createContext<ThemeContextValue>()
const STORAGE_KEYS = {
THEME_ID: "opencode-theme-id",
COLOR_SCHEME: "opencode-color-scheme",
THEME_CSS_PREFIX: "opencode-theme-css",
} as const
function getThemeCacheKey(themeId: string, mode: "light" | "dark"): string {
return `${STORAGE_KEYS.THEME_CSS_PREFIX}-${themeId}-${mode}`
}
/**
* Static tokens that don't change between themes
*/

3
packages/ui/src/theme/index.ts
View File

@@ -52,9 +52,6 @@ export { applyTheme, loadThemeFromUrl, getActiveTheme, removeTheme, setColorSche
// Theme context (SolidJS)
export { ThemeProvider, useTheme, type ColorScheme } from "./context"
// Preload script utilities
export { generatePreloadScript, generatePreloadScriptFormatted, STORAGE_KEYS, getThemeCacheKey } from "./preload"
// Default themes
export {
DEFAULT_THEMES,

86
packages/ui/src/theme/preload.ts
View File

@@ -1,86 +0,0 @@
/**
* Theme preload script generator.
*
* Generates a minimal inline script that:
* 1. Reads theme preferences from localStorage
* 2. Applies cached theme CSS immediately (avoiding FOUC)
*
* The default (oc-1) theme is provided by `@opencode-ai/ui/styles` via `theme.css`,
* so the preload script only runs when a non-default theme is selected.
*
* The script should be placed in the document <head> before any stylesheets.
*/
// Storage keys used by both the preload script and the ThemeProvider
export const STORAGE_KEYS = {
THEME_ID: "opencode-theme-id",
COLOR_SCHEME: "opencode-color-scheme",
THEME_CSS_PREFIX: "opencode-theme-css",
} as const
/**
* Get the localStorage key for cached theme CSS
*/
export function getThemeCacheKey(themeId: string, mode: "light" | "dark"): string {
return `${STORAGE_KEYS.THEME_CSS_PREFIX}-${themeId}-${mode}`
}
/**
* Generate the inline preload script.
*
* This script should be placed in the document <head> to avoid FOUC.
* It reads theme preferences from localStorage and applies cached theme CSS
* immediately.
*/
export function generatePreloadScript(): string {
// Minified version of the preload logic
// Variables: T=themeId, S=scheme, D=isDark, M=mode, C=css, K=cacheKey
return `(function(){var T=localStorage.getItem("${STORAGE_KEYS.THEME_ID}");if(!T)return;var S=localStorage.getItem("${STORAGE_KEYS.COLOR_SCHEME}")||"system";var D=S==="dark"||(S==="system"&&matchMedia("(prefers-color-scheme:dark)").matches);var M=D?"dark":"light";document.documentElement.dataset.theme=T;document.documentElement.dataset.colorScheme=M;if(T==="oc-1")return;var K="${STORAGE_KEYS.THEME_CSS_PREFIX}-"+T+"-"+M;var C=localStorage.getItem(K);if(C){var s=document.createElement("style");s.id="oc-theme-preload";s.textContent=":root{color-scheme:"+M+";--text-mix-blend-mode:"+(D?"plus-lighter":"multiply")+";"+C+"}";document.head.appendChild(s)}})();`
}
/**
* Generate a formatted (readable) version of the preload script.
* Useful for debugging.
*/
export function generatePreloadScriptFormatted(): string {
return `(function() {
var THEME_KEY = "${STORAGE_KEYS.THEME_ID}";
var SCHEME_KEY = "${STORAGE_KEYS.COLOR_SCHEME}";
var CSS_PREFIX = "${STORAGE_KEYS.THEME_CSS_PREFIX}";
// Only preload when a theme is selected
var themeId = localStorage.getItem(THEME_KEY);
if (!themeId) return;
// Read color scheme preference
var scheme = localStorage.getItem(SCHEME_KEY) || "system";
// Determine if dark mode
var isDark = scheme === "dark" ||
(scheme === "system" && matchMedia("(prefers-color-scheme: dark)").matches);
var mode = isDark ? "dark" : "light";
// Set data attributes for CSS/JS reference
document.documentElement.dataset.theme = themeId;
document.documentElement.dataset.colorScheme = mode;
// Default theme is handled by theme.css
if (themeId === "oc-1") return;
// Try to get cached CSS for this theme + mode
var cacheKey = CSS_PREFIX + "-" + themeId + "-" + mode;
var css = localStorage.getItem(cacheKey);
// Apply CSS if we have it
if (css) {
var style = document.createElement("style");
style.id = "oc-theme-preload";
style.textContent = ":root{" +
"color-scheme:" + mode + ";" +
"--text-mix-blend-mode:" + (isDark ? "plus-lighter" : "multiply") + ";" +
css +
"}";
document.head.appendChild(style);
}
})();`
}