صفحهٔ اصلی گشت‌و‌گذار راهنما
ثبت نام ورود
ZhangJinChen
/
opencode
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

fix: sync PWA status bar theme-color with app color scheme (#28006)

黑墨水鱼 3 ماه پیش
والد
32f37d86f0
کامیت
71b27a1b0f
6فایلهای تغییر یافته به همراه8 افزوده شده و 4 حذف شده
نمای یکپارچه نمایش آمار تفاوت ها
  1. 0 1
      packages/app/index.html
  2. 4 0
      packages/app/public/oc-theme-preload.js
  3. 0 1
      packages/desktop/src/renderer/index.html
  4. 0 1
      packages/desktop/src/renderer/loading.html
  5. 0 1
      packages/enterprise/src/entry-server.tsx
  6. 4 0
      packages/ui/src/theme/context.tsx

+ 0 - 1
packages/app/index.html
مشاهده فایل 

@@ -10,7 +10,6 @@
 
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-v3.png" />
 
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-v3.png" />
 
     <link rel="manifest" href="/site.webmanifest" />
 
     <link rel="manifest" href="/site.webmanifest" />
 
     <meta name="theme-color" content="#F8F7F7" />
 
     <meta name="theme-color" content="#F8F7F7" />
 
-    <meta name="theme-color" content="#131010" media="(prefers-color-scheme: dark)" />
 
     <meta property="og:image" content="/social-share.png" />
 
     <meta property="og:image" content="/social-share.png" />
 
     <meta property="twitter:image" content="/social-share.png" />
 
     <meta property="twitter:image" content="/social-share.png" />
 
     <script id="oc-theme-preload-script" src="/oc-theme-preload.js"></script>
 
     <script id="oc-theme-preload-script" src="/oc-theme-preload.js"></script>

+ 4 - 0
packages/app/public/oc-theme-preload.js
مشاهده فایل 

@@ -16,6 +16,10 @@
 
   document.documentElement.dataset.theme = themeId
 
   document.documentElement.dataset.theme = themeId
 
   document.documentElement.dataset.colorScheme = mode
 
   document.documentElement.dataset.colorScheme = mode
 
 
 
+  // Update theme-color meta tag to match app color scheme
 
+  var metas = document.querySelectorAll("meta[name='theme-color']")
 
+  if (metas.length > 0) metas[0].setAttribute("content", isDark ? "#131010" : "#F8F7F7")
 
+
 
   if (themeId === "oc-2") return
 
   if (themeId === "oc-2") return
 
 
 
   var css = localStorage.getItem("opencode-theme-css-" + mode)
 
   var css = localStorage.getItem("opencode-theme-css-" + mode)

+ 0 - 1
packages/desktop/src/renderer/index.html
مشاهده فایل 

@@ -9,7 +9,6 @@
 
     <link rel="shortcut icon" href="./favicon-v3.ico" />
 
     <link rel="shortcut icon" href="./favicon-v3.ico" />
 
     <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon-v3.png" />
 
     <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon-v3.png" />
 
     <meta name="theme-color" content="#F8F7F7" />
 
     <meta name="theme-color" content="#F8F7F7" />
 
-    <meta name="theme-color" content="#131010" media="(prefers-color-scheme: dark)" />
 
     <meta property="og:image" content="./social-share.png" />
 
     <meta property="og:image" content="./social-share.png" />
 
     <meta property="twitter:image" content="./social-share.png" />
 
     <meta property="twitter:image" content="./social-share.png" />
 
     <script id="oc-theme-preload-script" src="./oc-theme-preload.js"></script>
 
     <script id="oc-theme-preload-script" src="./oc-theme-preload.js"></script>

+ 0 - 1
packages/desktop/src/renderer/loading.html
مشاهده فایل 

@@ -9,7 +9,6 @@
 
     <link rel="shortcut icon" href="./favicon-v3.ico" />
 
     <link rel="shortcut icon" href="./favicon-v3.ico" />
 
     <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon-v3.png" />
 
     <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon-v3.png" />
 
     <meta name="theme-color" content="#F8F7F7" />
 
     <meta name="theme-color" content="#F8F7F7" />
 
-    <meta name="theme-color" content="#131010" media="(prefers-color-scheme: dark)" />
 
     <meta property="og:image" content="./social-share.png" />
 
     <meta property="og:image" content="./social-share.png" />
 
     <meta property="twitter:image" content="./social-share.png" />
 
     <meta property="twitter:image" content="./social-share.png" />
 
     <script id="oc-theme-preload-script" src="./oc-theme-preload.js"></script>
 
     <script id="oc-theme-preload-script" src="./oc-theme-preload.js"></script>

+ 0 - 1
packages/enterprise/src/entry-server.tsx
مشاهده فایل 

@@ -25,7 +25,6 @@ export default createHandler(() => (
 
             <meta name="viewport" content="width=device-width, initial-scale=1" />
 
             <meta name="viewport" content="width=device-width, initial-scale=1" />
 
             <title>OpenCode</title>
 
             <title>OpenCode</title>
 
             <meta name="theme-color" content="#F8F7F7" />
 
             <meta name="theme-color" content="#F8F7F7" />
 
-            <meta name="theme-color" content="#131010" media="(prefers-color-scheme: dark)" />
 
             {assets}
 
             {assets}
 
           </head>
 
           </head>
 
           <body class="antialiased overscroll-none text-12-regular">
 
           <body class="antialiased overscroll-none text-12-regular">

+ 4 - 0
packages/ui/src/theme/context.tsx
مشاهده فایل 

@@ -147,6 +147,10 @@ function applyThemeCss(theme: DesktopTheme, themeId: string, mode: "light" | "da
 
   ensureThemeStyleElement().textContent = fullCss
 
   ensureThemeStyleElement().textContent = fullCss
 
   document.documentElement.dataset.theme = themeId
 
   document.documentElement.dataset.theme = themeId
 
   document.documentElement.dataset.colorScheme = mode
 
   document.documentElement.dataset.colorScheme = mode
 
+
 
+  // Update theme-color meta tag to match light/dark mode
 
+  const meta = document.querySelector('meta[name="theme-color"]')
 
+  if (meta) meta.setAttribute("content", isDark ? "#131010" : "#F8F7F7")
 
 }
 
 }
 
 
 
 function cacheThemeVariants(theme: DesktopTheme, themeId: string) {
 
 function cacheThemeVariants(theme: DesktopTheme, themeId: string) {