admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 01:56:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): Allow overriding theme from query params (#7591)

Browse Source 
Allow overriding theme through query params.. to be able to override it
from preview iframe in webcomponent

Github issue / Community forum post (link here to close automatically):
This commit is contained in:
Mutasem Aldmour
2023-11-02 16:06:33 +01:00
committed by GitHub
parent 59dc36abd9
commit 2854a0cf46
5 changed files with 89 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
packages/editor-ui/src/stores/ui.store.ts
View File

@@ -37,7 +37,6 @@ import {
DEBUG_PAYWALL_MODAL_KEY,
N8N_PRICING_PAGE_URL,
WORKFLOW_HISTORY_VERSION_RESTORE,
LOCAL_STORAGE_THEME,
} from '@/constants';
import type {
CloudUpdateLinkSourceType,
@@ -64,37 +63,23 @@ import { useCloudPlanStore } from '@/stores/cloudPlan.store';
import { useTelemetryStore } from '@/stores/telemetry.store';
import { dismissBannerPermanently } from '@/api/ui';
import type { BannerName } from 'n8n-workflow';
import {
addThemeToBody,
getPreferredTheme,
getThemeOverride,
isValidTheme,
updateTheme,
} from './ui.utils';
let savedTheme: ThemeOption = 'system';
try {
const value = localStorage.getItem(LOCAL_STORAGE_THEME) as AppliedThemeOption;
if (['light', 'dark'].includes(value)) {
const value = getThemeOverride();
if (isValidTheme(value)) {
savedTheme = value;
addThemeToBody(value);
}
} catch (e) {}
function addThemeToBody(theme: AppliedThemeOption) {
window.document.body.setAttribute('data-theme', theme);
}
function updateTheme(theme: ThemeOption) {
if (theme === 'system') {
window.document.body.removeAttribute('data-theme');
localStorage.removeItem(LOCAL_STORAGE_THEME);
} else {
addThemeToBody(theme);
localStorage.setItem(LOCAL_STORAGE_THEME, theme);
}
}
function getPreferredTheme(): AppliedThemeOption {
const isDarkMode =
!!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)')?.matches;
return isDarkMode ? 'dark' : 'light';
}
export const useUIStore = defineStore(STORES.UI, {
state: (): UIState => ({
activeActions: [],

36
packages/editor-ui/src/stores/ui.utils.ts Normal file
View File

@@ -0,0 +1,36 @@
import type { AppliedThemeOption, ThemeOption } from '@/Interface';
import { LOCAL_STORAGE_THEME } from '@/constants';
export function addThemeToBody(theme: AppliedThemeOption) {
window.document.body.setAttribute('data-theme', theme);
}
export function isValidTheme(theme: string | null): theme is AppliedThemeOption {
return !!theme && ['light', 'dark'].includes(theme);
}
// query param allows overriding theme for demo view in preview iframe without flickering
export function getThemeOverride() {
return getQueryParam('theme') || localStorage.getItem(LOCAL_STORAGE_THEME);
}
function getQueryParam(paramName: string): string | null {
return new URLSearchParams(window.location.search).get(paramName);
}
export function updateTheme(theme: ThemeOption) {
if (theme === 'system') {
window.document.body.removeAttribute('data-theme');
localStorage.removeItem(LOCAL_STORAGE_THEME);
} else {
addThemeToBody(theme);
localStorage.setItem(LOCAL_STORAGE_THEME, theme);
}
}
export function getPreferredTheme(): AppliedThemeOption {
const isDarkMode =
!!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)')?.matches;
return isDarkMode ? 'dark' : 'light';
}