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
42 lines
2.3 KiB
Diff
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)
|
|
|