Feature flag for auto app theme
If feature flag is disabled, Auto App theme is behaving like
Light App theme.
Google-Bug-Id: b/244586175
Release-Notes: skip
Change-Id: I1f1ae85dc3623142ad060cceec4338c49ecd99aa
diff --git a/polygerrit-ui/app/elements/gr-app-element.ts b/polygerrit-ui/app/elements/gr-app-element.ts
index ece88ae..2476a5e 100644
--- a/polygerrit-ui/app/elements/gr-app-element.ts
+++ b/polygerrit-ui/app/elements/gr-app-element.ts
@@ -71,6 +71,7 @@
import {isDarkTheme, prefersDarkColorScheme} from '../utils/theme-util';
import {AppTheme} from '../constants/constants';
import {subscribe} from './lit/subscription-controller';
+import {KnownExperimentId} from '../services/flags/flags';
interface ErrorInfo {
text: string;
@@ -171,6 +172,8 @@
private readonly restApiService = getAppContext().restApiService;
+ private readonly flagsService = getAppContext().flagsService;
+
private readonly getBrowserModel = resolve(this, browserModelToken);
private readonly shortcuts = new ShortcutController(this);
@@ -645,7 +648,10 @@
}
private applyTheme() {
- const showDarkTheme = isDarkTheme(this.theme);
+ const showDarkTheme = isDarkTheme(
+ this.theme,
+ this.flagsService.isEnabled(KnownExperimentId.AUTO_APP_THEME)
+ );
document.documentElement.classList.toggle('darkTheme', showDarkTheme);
document.documentElement.classList.toggle('lightTheme', !showDarkTheme);
if (showDarkTheme) {
diff --git a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.ts b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.ts
index 39d44cf..1ad78a6 100644
--- a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.ts
+++ b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.ts
@@ -62,6 +62,7 @@
import {pageNavStyles} from '../../../styles/gr-page-nav-styles';
import {menuPageStyles} from '../../../styles/gr-menu-page-styles';
import {formStyles} from '../../../styles/gr-form-styles';
+import {KnownExperimentId} from '../../../services/flags/flags';
const GERRIT_DOCS_BASE_URL =
'https://gerrit-review.googlesource.com/' + 'Documentation';
@@ -199,6 +200,8 @@
private readonly userModel = getAppContext().userModel;
+ private readonly flagsService = getAppContext().flagsService;
+
override connectedCallback() {
super.connectedCallback();
// Polymer 2: anchor tag won't work on shadow DOM
@@ -712,20 +715,32 @@
super.disconnectedCallback();
}
+ private mapTheme(theme: AppTheme) {
+ if (this.flagsService.isEnabled(KnownExperimentId.AUTO_APP_THEME)) {
+ return theme;
+ }
+ if (theme === AppTheme.AUTO) return AppTheme.LIGHT;
+ return theme;
+ }
+
private renderTheme() {
return html`
<section>
<label class="title" for="themeSelect">Theme</label>
<span class="value">
<gr-select
- .bindValue=${this.localPrefs.theme ?? AppTheme.AUTO}
+ .bindValue=${this.mapTheme(this.localPrefs.theme ?? AppTheme.AUTO)}
@change=${() => {
this.localPrefs.theme = this.themeSelect.value as AppTheme;
this.prefsChanged = true;
}}
>
<select id="themeSelect">
- <option value="AUTO">Auto (based on OS prefs)</option>
+ ${when(
+ this.flagsService.isEnabled(KnownExperimentId.AUTO_APP_THEME),
+ () =>
+ html`<option value="AUTO">Auto (based on OS prefs)</option>`
+ )}
<option value="LIGHT">Light</option>
<option value="DARK">Dark</option>
</select>
diff --git a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view_test.ts b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view_test.ts
index c6eb31b..10be124 100644
--- a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view_test.ts
+++ b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view_test.ts
@@ -173,7 +173,6 @@
<span class="value">
<gr-select>
<select id="themeSelect">
- <option value="AUTO">Auto (based on OS prefs)</option>
<option value="LIGHT">Light</option>
<option value="DARK">Dark</option>
</select>
diff --git a/polygerrit-ui/app/services/flags/flags.ts b/polygerrit-ui/app/services/flags/flags.ts
index 78c0631..9ca2cef 100644
--- a/polygerrit-ui/app/services/flags/flags.ts
+++ b/polygerrit-ui/app/services/flags/flags.ts
@@ -24,4 +24,5 @@
MENTION_USERS = 'UiFeature__mention_users',
PATCHSET_LEVEL_COMMENT_USES_GRCOMMENT = 'UiFeature__patchset_level_comment_uses_GrComment',
RENDER_MARKDOWN = 'UiFeature__render_markdown',
+ AUTO_APP_THEME = 'UiFeature__auto_app_theme',
}
diff --git a/polygerrit-ui/app/utils/theme-util.ts b/polygerrit-ui/app/utils/theme-util.ts
index da4500a..d113bcf 100644
--- a/polygerrit-ui/app/utils/theme-util.ts
+++ b/polygerrit-ui/app/utils/theme-util.ts
@@ -16,8 +16,8 @@
return window.matchMedia('(prefers-color-scheme: dark)');
}
-export function isDarkTheme(theme: AppTheme) {
- if (theme === AppTheme.AUTO) return isDarkThemeInOs();
+export function isDarkTheme(theme: AppTheme, autoModeEnabled: boolean) {
+ if (autoModeEnabled && theme === AppTheme.AUTO) return isDarkThemeInOs();
return theme === AppTheme.DARK;
}
