Files
cloudflare--workers-sdk/packages/chrome-devtools-patches/patches/0005-Support-forcing-the-devtools-theme-via-a-query-param.patch
wehub-resource-sync 70bf21e064
Deploy (to testing) and Test Playground Preview Worker / Deploy Playground Preview Worker (testing) (push) Has been skipped
Deploy Workers Shared Staging / Deploy Workers Shared Staging (push) Failing after 0s
Prerelease / build (push) Has been skipped
Handle Changesets / Handle Changesets (push) Has been cancelled
Semgrep OSS scan / semgrep-oss (push) Has been cancelled
chore: import upstream snapshot with attribution
2026-07-13 12:30:11 +08:00

42 lines
2.3 KiB
Diff

From 83cc44962c8b10698abe61b74e4260a373624115 Mon Sep 17 00:00:00 2001
From: Workers DevProd <workers-devprod@cloudflare.com>
Date: Fri, 25 Oct 2024 15:05:56 +0100
Subject: [PATCH 5/8] Support forcing the devtools theme via a query parameter,
to enable it to fit in with the Cloudflare dashboard when embedded.
To test, make sure that `?theme=dark`, `?theme=default`, and `?theme=systemPreferred` all correctly force the theme of devtools
---
front_end/ui/legacy/theme_support/ThemeSupport.ts | 11 ++++++++---
1 file changed, 8 insertions(+), 3 deletions(-)
diff --git a/front_end/ui/legacy/theme_support/ThemeSupport.ts b/front_end/ui/legacy/theme_support/ThemeSupport.ts
index 298ba78952..43ee9341ec 100644
--- a/front_end/ui/legacy/theme_support/ThemeSupport.ts
+++ b/front_end/ui/legacy/theme_support/ThemeSupport.ts
@@ -152,14 +152,19 @@ export class ThemeSupport extends EventTarget {
}
#applyThemeToDocument(document: Document): void {
+ // Get theme from url, to allow for theme inheritance from the Cloudflare dashboard
+ const urlParams = new URLSearchParams(document.location.search);
+ const theme = urlParams.get('theme') ?? 'systemPreferred';
+
const isForcedColorsMode = window.matchMedia('(forced-colors: active)').matches;
const systemPreferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default';
- const useSystemPreferred = this.setting.get() === 'systemPreferred' || isForcedColorsMode;
- this.themeNameInternal = useSystemPreferred ? systemPreferredTheme : this.setting.get();
+ const useSystemPreferred = theme === 'systemPreferred' || isForcedColorsMode;
+ this.themeNameInternal = useSystemPreferred ? systemPreferredTheme : theme;
document.documentElement.classList.toggle('theme-with-dark-background', this.themeNameInternal === 'dark');
- const useChromeTheme = Common.Settings.moduleSetting('chrome-theme-colors').get();
+ // Disable this—it adds blue headers which are out of keeping with Cloudflare styling
+ const useChromeTheme = false;
const isIncognito = Root.Runtime.hostConfig.isOffTheRecord === true;
// Baseline is the name of Chrome's default color theme and there are two of these: default and grayscale.
// The collective name for the rest of the color themes is dynamic.
--
2.39.5 (Apple Git-154)