{ __( 'We’ve logged the issue to help us track down the problem.' ) }
{ __( 'Try restarting the app, if the problem persists' ) }{ ' ' } {
{ __( 'Select a site to view details.' ) }
+ { __( 'Select a site to view details.' ) } +
{ __( 'Imagine' ) }
{ __( 'Create' ) }
{ __( 'Design' ) }
+
{ __( "Can't find your site?" ) }{ ' ' } getIpcApi().openURL( site.url ) } onKeyDown={ ( e: React.KeyboardEvent ) => { @@ -426,12 +426,12 @@ function Footer( { }, [ disabled ] ); return ( - + diff --git a/apps/studio/src/modules/sync/components/sync-tab-image.tsx b/apps/studio/src/modules/sync/components/sync-tab-image.tsx index 4cab01d8d1..0765b33517 100644 --- a/apps/studio/src/modules/sync/components/sync-tab-image.tsx +++ b/apps/studio/src/modules/sync/components/sync-tab-image.tsx @@ -9,7 +9,7 @@ export const SyncTabImage = () => ( > - + @@ -44,7 +44,7 @@ export const SyncTabImage = () => ( ( /> - + - + ( - + { text } ) ) } @@ -103,7 +103,7 @@ function NoAuthSyncTab() { { if ( isOffline ) { return; @@ -203,7 +203,7 @@ export function ContentTabSync( { selectedSite }: { selectedSite: SiteDetails } disconnectSite( { siteId: id, localSiteId: selectedSite.id } ) } /> - + dispatch( connectedSitesActions.openModal( 'connect' ) ) } diff --git a/apps/studio/src/modules/sync/tests/environment-badge.test.tsx b/apps/studio/src/modules/sync/tests/environment-badge.test.tsx index e96bf19dee..63d725b2dc 100644 --- a/apps/studio/src/modules/sync/tests/environment-badge.test.tsx +++ b/apps/studio/src/modules/sync/tests/environment-badge.test.tsx @@ -56,7 +56,7 @@ describe( 'EnvironmentBadge', () => { const badgeElement = container.firstChild as HTMLElement; expect( badgeElement ).toBeInTheDocument(); - expect( badgeElement.className ).toContain( 'bg-white' ); - expect( badgeElement.className ).toContain( 'text-a8c-blue-50' ); + expect( badgeElement.className ).toContain( 'bg-frame' ); + expect( badgeElement.className ).toContain( 'text-frame-theme' ); } ); } ); diff --git a/apps/studio/src/modules/user-settings/components/color-scheme-picker.tsx b/apps/studio/src/modules/user-settings/components/color-scheme-picker.tsx new file mode 100644 index 0000000000..adf2572ac9 --- /dev/null +++ b/apps/studio/src/modules/user-settings/components/color-scheme-picker.tsx @@ -0,0 +1,66 @@ +import { useI18n } from '@wordpress/react-i18n'; +import { cx } from 'src/lib/cx'; +import darkAppearanceIllustration from '../../../../assets/appearance-dark.svg'; +import lightAppearanceIllustration from '../../../../assets/appearance-light.svg'; +import systemAppearanceIllustration from '../../../../assets/appearance-system.svg'; +import { SettingsFormField } from './settings-form-field'; + +interface ColorSchemePickerProps { + value: 'system' | 'light' | 'dark'; + onChange: ( value: 'system' | 'light' | 'dark' ) => void; +} + +export const ColorSchemePicker = ( { value, onChange }: ColorSchemePickerProps ) => { + const { __ } = useI18n(); + const colorSchemeOptions: Array< { + value: 'system' | 'light' | 'dark'; + label: string; + illustration: string; + } > = [ + { value: 'system', label: __( 'System' ), illustration: systemAppearanceIllustration }, + { value: 'light', label: __( 'Light' ), illustration: lightAppearanceIllustration }, + { value: 'dark', label: __( 'Dark' ), illustration: darkAppearanceIllustration }, + ]; + + return ( + + + { colorSchemeOptions.map( ( option ) => { + const isSelected = value === option.value; + + return ( + onChange( option.value ) } + className={ cx( + 'group flex flex-col items-center p-0 bg-transparent rounded-[4px] focus-visible:outline-none focus-visible:outline focus-visible:outline-[2px] focus-visible:outline-frame-theme focus-visible:outline-offset-[4px]' + ) } + > + + + { option.label } + + + ); + } ) } + + + ); +}; diff --git a/apps/studio/src/modules/user-settings/components/preferences-tab.tsx b/apps/studio/src/modules/user-settings/components/preferences-tab.tsx index f88d75ca89..6ed18d09c5 100644 --- a/apps/studio/src/modules/user-settings/components/preferences-tab.tsx +++ b/apps/studio/src/modules/user-settings/components/preferences-tab.tsx @@ -3,6 +3,7 @@ import { useI18n } from '@wordpress/react-i18n'; import { useState } from 'react'; import Button from 'src/components/button'; import { isWindowsStore } from 'src/lib/app-globals'; +import { ColorSchemePicker } from 'src/modules/user-settings/components/color-scheme-picker'; import { EditorPicker } from 'src/modules/user-settings/components/editor-picker'; import { LanguagePicker } from 'src/modules/user-settings/components/language-picker'; import { StudioCliToggle } from 'src/modules/user-settings/components/studio-cli-toggle'; @@ -12,8 +13,10 @@ import { SupportedTerminal } from 'src/modules/user-settings/lib/terminal'; import { useAppDispatch, useI18nLocale } from 'src/stores'; import { saveUserLocale } from 'src/stores/i18n-slice'; import { + useGetColorSchemeQuery, useGetUserEditorQuery, useGetUserTerminalQuery, + useSaveColorSchemeMutation, useSaveUserEditorMutation, useSaveUserTerminalMutation, useGetStudioCliIsInstalledQuery, @@ -25,10 +28,12 @@ export const PreferencesTab = ( { onClose }: { onClose: () => void } ) => { const savedLocale = useI18nLocale(); const dispatch = useAppDispatch(); + const { data: colorScheme } = useGetColorSchemeQuery(); const { data: editor } = useGetUserEditorQuery(); const { data: terminal } = useGetUserTerminalQuery(); const { data: isCliInstalled } = useGetStudioCliIsInstalledQuery(); + const [ saveColorSchemePreference ] = useSaveColorSchemeMutation(); const [ saveEditor ] = useSaveUserEditorMutation(); const [ saveTerminal ] = useSaveUserTerminalMutation(); const [ saveCliIsInstalled ] = useSaveStudioCliIsInstalledMutation(); @@ -68,13 +73,19 @@ export const PreferencesTab = ( { onClose }: { onClose: () => void } ) => { return ( <> - - saveColorSchemePreference( value ) } /> - + + + + + { ! isWindowsStore() && ( ) } diff --git a/apps/studio/src/modules/user-settings/components/studio-cli-toggle.tsx b/apps/studio/src/modules/user-settings/components/studio-cli-toggle.tsx index 679017b088..e8675ce89d 100644 --- a/apps/studio/src/modules/user-settings/components/studio-cli-toggle.tsx +++ b/apps/studio/src/modules/user-settings/components/studio-cli-toggle.tsx @@ -16,8 +16,9 @@ export function StudioCliToggle( { value, onChange }: StudioCLIToggleProps ) { return ( - + onChange( event.target.checked ) } diff --git a/apps/studio/src/modules/user-settings/lib/ipc-handlers.ts b/apps/studio/src/modules/user-settings/lib/ipc-handlers.ts index 25019a3a94..2e4dd1c2b3 100644 --- a/apps/studio/src/modules/user-settings/lib/ipc-handlers.ts +++ b/apps/studio/src/modules/user-settings/lib/ipc-handlers.ts @@ -1,4 +1,4 @@ -import { BrowserWindow, IpcMainInvokeEvent } from 'electron'; +import { BrowserWindow, IpcMainInvokeEvent, nativeTheme } from 'electron'; import { DEFAULT_TERMINAL } from 'src/constants'; import { sendIpcEventToRenderer, sendIpcEventToRendererWithWindow } from 'src/ipc-utils'; import { isInstalled } from 'src/lib/is-installed'; @@ -58,6 +58,19 @@ export async function getUserEditor(): Promise< SupportedEditor | null > { return userData.preferredEditor ?? null; } +export async function saveColorScheme( + event: IpcMainInvokeEvent, + colorScheme: 'system' | 'light' | 'dark' +) { + nativeTheme.themeSource = colorScheme; + await updateAppdata( { colorScheme } ); +} + +export async function getColorScheme(): Promise< 'system' | 'light' | 'dark' > { + const userData = await loadUserData(); + return userData.colorScheme ?? 'system'; +} + export function showUserSettings( event: IpcMainInvokeEvent, tabName?: UserSettingsTabName ) { const parentWindow = BrowserWindow.fromWebContents( event.sender ); sendIpcEventToRendererWithWindow( parentWindow, 'user-settings', { tabName } ); diff --git a/apps/studio/src/modules/whats-new/assets/dark-mode-illustration.svg b/apps/studio/src/modules/whats-new/assets/dark-mode-illustration.svg new file mode 100644 index 0000000000..30ddaa762c --- /dev/null +++ b/apps/studio/src/modules/whats-new/assets/dark-mode-illustration.svg @@ -0,0 +1,413 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/studio/src/modules/whats-new/components/whats-new-modal.tsx b/apps/studio/src/modules/whats-new/components/whats-new-modal.tsx index ca4af529dd..3661531e48 100644 --- a/apps/studio/src/modules/whats-new/components/whats-new-modal.tsx +++ b/apps/studio/src/modules/whats-new/components/whats-new-modal.tsx @@ -7,8 +7,7 @@ import { getIpcApi } from 'src/lib/get-ipc-api'; import { getLocalizedLink } from 'src/lib/get-localized-link'; import blueprintsIllustration from 'src/modules/whats-new/assets/blueprints-illustration.svg'; import cliIllustration from 'src/modules/whats-new/assets/cli-illustration.svg'; -import pressableSyncIllustration from 'src/modules/whats-new/assets/pressable-sync-illustration.svg'; -import selectiveSyncIllustration from 'src/modules/whats-new/assets/selective-sync-illustration.svg'; +import darkModeIllustration from 'src/modules/whats-new/assets/dark-mode-illustration.svg'; import { useI18nLocale } from 'src/stores'; interface WhatsNewPage { @@ -32,10 +31,10 @@ const PageContent = ( { isIntroPage = false, }: Omit< WhatsNewPage, 'image' > & { isIntroPage?: boolean } ) => ( - { title } + { title } @@ -45,7 +44,7 @@ const PageContent = ( { { learnMoreUrl && ( getIpcApi().openURL( learnMoreUrl ) } - className="text-a8c-blue-50 text-m leading-s cursor-pointer" + className="text-frame-theme text-m leading-s cursor-pointer" > { learnMoreLabel || __( 'Learn more' ) } @@ -57,6 +56,13 @@ const PageContent = ( { export default function WhatsNewModal( { showModal, onClose }: WhatsNewModalProps ) { const locale = useI18nLocale(); const whatsNewPages: WhatsNewPage[] = [ + { + image: darkModeIllustration, + title: __( 'Dark mode is here' ), + description: __( + 'Studio now supports light, dark, and system appearance modes. Head to Settings to choose your preferred look.' + ), + }, { image: cliIllustration, title: __( 'WP-CLI support and CLI site management' ), @@ -82,22 +88,6 @@ export default function WhatsNewModal( { showModal, onClose }: WhatsNewModalProp ), learnMoreUrl: getLocalizedLink( locale, 'docsBlueprints' ), }, - { - image: selectiveSyncIllustration, - title: __( 'Synchronize with precision' ), - description: __( - 'Synchronize specific plugins, themes, or the database for fast, precise updates to your WordPress.com or Pressable sites.' - ), - learnMoreUrl: `${ getLocalizedLink( locale, 'docsSync' ) }#pull`, - }, - { - image: pressableSyncIllustration, - title: __( 'Sync to your favorite host' ), - description: __( - 'Pull and push your Studio sites to WordPress.com or Pressable with a single click. No more manual uploads or FTP transfers!' - ), - learnMoreUrl: getLocalizedLink( locale, 'docsSync' ), - }, ]; if ( ! showModal ) { @@ -109,7 +99,7 @@ export default function WhatsNewModal( { showModal, onClose }: WhatsNewModalProp onFinish={ onClose } contentLabel={ __( "What's New in Studio" ) } className={ cx( - 'whats-new-modal !w-[360px] !h-[470px] overflow-hidden [&_.components-button.is-compact.has-icon_svg]:!fill-white [&_.components-button.is-tertiary]:!outline-1 [&_.components-button.is-tertiary]:!outline-solid [&_.components-button.is-tertiary]:!outline-a8c-blue-50', + 'whats-new-modal !w-[360px] !h-[470px] overflow-hidden [&_.components-button.is-compact.has-icon_svg]:!fill-white [&_.components-button.is-tertiary]:!outline-1 [&_.components-button.is-tertiary]:!outline-solid [&_.components-button.is-tertiary]:!outline-frame-theme', '[&_*]:select-none', 'focus:outline-none' ) } diff --git a/apps/studio/src/preload.ts b/apps/studio/src/preload.ts index e5f92d685f..2e707143e8 100644 --- a/apps/studio/src/preload.ts +++ b/apps/studio/src/preload.ts @@ -144,6 +144,8 @@ const api: IpcApi = { saveUserTerminal: ( preferredTerminal ) => ipcRendererInvoke( 'saveUserTerminal', preferredTerminal ), getUserTerminal: () => ipcRendererInvoke( 'getUserTerminal' ), + saveColorScheme: ( colorScheme ) => ipcRendererInvoke( 'saveColorScheme', colorScheme ), + getColorScheme: () => ipcRendererInvoke( 'getColorScheme' ), getUserEditor: () => ipcRendererInvoke( 'getUserEditor' ), saveUserEditor: ( editor ) => ipcRendererInvoke( 'saveUserEditor', editor ), comparePaths: ( path1, path2 ) => ipcRendererInvoke( 'comparePaths', path1, path2 ), diff --git a/apps/studio/src/storage/storage-types.ts b/apps/studio/src/storage/storage-types.ts index 199c7b7719..0909dfd0a2 100644 --- a/apps/studio/src/storage/storage-types.ts +++ b/apps/studio/src/storage/storage-types.ts @@ -31,6 +31,7 @@ export interface UserData { lastSeenVersion?: string; preferredTerminal?: SupportedTerminal; preferredEditor?: SupportedEditor; + colorScheme?: 'system' | 'light' | 'dark'; betaFeatures?: BetaFeatures; stopSitesOnQuit?: boolean; } diff --git a/apps/studio/src/stores/installed-apps-api.ts b/apps/studio/src/stores/installed-apps-api.ts index b5684ebd18..07b2700489 100644 --- a/apps/studio/src/stores/installed-apps-api.ts +++ b/apps/studio/src/stores/installed-apps-api.ts @@ -27,7 +27,13 @@ const getFirstInstalledEditor = async (): Promise< SupportedEditor | null > => { export const installedAppsApi = createApi( { reducerPath: 'installedAppsApi', baseQuery: fetchBaseQuery(), - tagTypes: [ 'StudioCliIsInstalled', 'InstalledApps', 'UserEditor', 'UserTerminal' ], + tagTypes: [ + 'StudioCliIsInstalled', + 'InstalledApps', + 'UserEditor', + 'UserTerminal', + 'ColorScheme', + ], endpoints: ( builder ) => ( { getStudioCliIsInstalled: builder.query< boolean, void >( { queryFn: async () => { @@ -91,6 +97,20 @@ export const installedAppsApi = createApi( { }, invalidatesTags: [ 'UserTerminal' ], } ), + getColorScheme: builder.query< 'system' | 'light' | 'dark', void >( { + queryFn: async () => { + const colorScheme = await getIpcApi().getColorScheme(); + return { data: colorScheme }; + }, + providesTags: [ 'ColorScheme' ], + } ), + saveColorScheme: builder.mutation< 'system' | 'light' | 'dark', 'system' | 'light' | 'dark' >( { + queryFn: async ( colorScheme ) => { + await getIpcApi().saveColorScheme( colorScheme ); + return { data: colorScheme }; + }, + invalidatesTags: [ 'ColorScheme' ], + } ), } ), } ); @@ -102,6 +122,8 @@ export const { useSaveUserTerminalMutation, useGetStudioCliIsInstalledQuery, useSaveStudioCliIsInstalledMutation, + useGetColorSchemeQuery, + useSaveColorSchemeMutation, } = installedAppsApi; export const selectInstalledEditors = createSelector( diff --git a/apps/studio/src/tests/main-window.test.ts b/apps/studio/src/tests/main-window.test.ts index f0119b3bb8..f9261d5fa7 100644 --- a/apps/studio/src/tests/main-window.test.ts +++ b/apps/studio/src/tests/main-window.test.ts @@ -74,6 +74,12 @@ vi.mock( 'electron', () => { dialog: { showMessageBox: vi.fn(), }, + nativeTheme: { + themeSource: 'system', + }, + screen: { + getAllDisplays: vi.fn().mockReturnValue( [] ), + }, BrowserWindow: MockBrowserWindow, shell: { trashItem: vi.fn(), diff --git a/apps/studio/tailwind.config.js b/apps/studio/tailwind.config.js index 930453cc59..52267fde4d 100644 --- a/apps/studio/tailwind.config.js +++ b/apps/studio/tailwind.config.js @@ -153,6 +153,19 @@ module.exports = { 'development-text': 'hsl(200, 95%, 28%)', 'circle-env-production': '#069e08', 'circle-env-staging': '#f7ba42', + // Content frame colors (CSS custom properties, swap in dark mode) + frame: 'var(--color-frame-bg)', + 'frame-text': 'var(--color-frame-text)', + 'frame-text-secondary': 'var(--color-frame-text-secondary)', + 'frame-border': 'var(--color-frame-border)', + 'frame-surface': 'var(--color-frame-surface)', + 'frame-surface-alt': 'var(--color-frame-surface-alt)', + 'frame-theme': 'var(--color-frame-theme)', + 'frame-theme-hover': 'var(--color-frame-theme-hover)', + 'frame-code-text': 'var(--color-frame-code-text)', + 'frame-running': 'var(--color-frame-running)', + 'frame-error': 'var(--color-frame-error)', + 'frame-tab-active': 'var(--color-frame-tab-active)', }, spacing: { chrome: `${ APP_CHROME_SPACING }px`,
@@ -45,7 +44,7 @@ const PageContent = ( { { learnMoreUrl && ( getIpcApi().openURL( learnMoreUrl ) } - className="text-a8c-blue-50 text-m leading-s cursor-pointer" + className="text-frame-theme text-m leading-s cursor-pointer" > { learnMoreLabel || __( 'Learn more' ) } @@ -57,6 +56,13 @@ const PageContent = ( { export default function WhatsNewModal( { showModal, onClose }: WhatsNewModalProps ) { const locale = useI18nLocale(); const whatsNewPages: WhatsNewPage[] = [ + { + image: darkModeIllustration, + title: __( 'Dark mode is here' ), + description: __( + 'Studio now supports light, dark, and system appearance modes. Head to Settings to choose your preferred look.' + ), + }, { image: cliIllustration, title: __( 'WP-CLI support and CLI site management' ), @@ -82,22 +88,6 @@ export default function WhatsNewModal( { showModal, onClose }: WhatsNewModalProp ), learnMoreUrl: getLocalizedLink( locale, 'docsBlueprints' ), }, - { - image: selectiveSyncIllustration, - title: __( 'Synchronize with precision' ), - description: __( - 'Synchronize specific plugins, themes, or the database for fast, precise updates to your WordPress.com or Pressable sites.' - ), - learnMoreUrl: `${ getLocalizedLink( locale, 'docsSync' ) }#pull`, - }, - { - image: pressableSyncIllustration, - title: __( 'Sync to your favorite host' ), - description: __( - 'Pull and push your Studio sites to WordPress.com or Pressable with a single click. No more manual uploads or FTP transfers!' - ), - learnMoreUrl: getLocalizedLink( locale, 'docsSync' ), - }, ]; if ( ! showModal ) { @@ -109,7 +99,7 @@ export default function WhatsNewModal( { showModal, onClose }: WhatsNewModalProp onFinish={ onClose } contentLabel={ __( "What's New in Studio" ) } className={ cx( - 'whats-new-modal !w-[360px] !h-[470px] overflow-hidden [&_.components-button.is-compact.has-icon_svg]:!fill-white [&_.components-button.is-tertiary]:!outline-1 [&_.components-button.is-tertiary]:!outline-solid [&_.components-button.is-tertiary]:!outline-a8c-blue-50', + 'whats-new-modal !w-[360px] !h-[470px] overflow-hidden [&_.components-button.is-compact.has-icon_svg]:!fill-white [&_.components-button.is-tertiary]:!outline-1 [&_.components-button.is-tertiary]:!outline-solid [&_.components-button.is-tertiary]:!outline-frame-theme', '[&_*]:select-none', 'focus:outline-none' ) } diff --git a/apps/studio/src/preload.ts b/apps/studio/src/preload.ts index e5f92d685f..2e707143e8 100644 --- a/apps/studio/src/preload.ts +++ b/apps/studio/src/preload.ts @@ -144,6 +144,8 @@ const api: IpcApi = { saveUserTerminal: ( preferredTerminal ) => ipcRendererInvoke( 'saveUserTerminal', preferredTerminal ), getUserTerminal: () => ipcRendererInvoke( 'getUserTerminal' ), + saveColorScheme: ( colorScheme ) => ipcRendererInvoke( 'saveColorScheme', colorScheme ), + getColorScheme: () => ipcRendererInvoke( 'getColorScheme' ), getUserEditor: () => ipcRendererInvoke( 'getUserEditor' ), saveUserEditor: ( editor ) => ipcRendererInvoke( 'saveUserEditor', editor ), comparePaths: ( path1, path2 ) => ipcRendererInvoke( 'comparePaths', path1, path2 ), diff --git a/apps/studio/src/storage/storage-types.ts b/apps/studio/src/storage/storage-types.ts index 199c7b7719..0909dfd0a2 100644 --- a/apps/studio/src/storage/storage-types.ts +++ b/apps/studio/src/storage/storage-types.ts @@ -31,6 +31,7 @@ export interface UserData { lastSeenVersion?: string; preferredTerminal?: SupportedTerminal; preferredEditor?: SupportedEditor; + colorScheme?: 'system' | 'light' | 'dark'; betaFeatures?: BetaFeatures; stopSitesOnQuit?: boolean; } diff --git a/apps/studio/src/stores/installed-apps-api.ts b/apps/studio/src/stores/installed-apps-api.ts index b5684ebd18..07b2700489 100644 --- a/apps/studio/src/stores/installed-apps-api.ts +++ b/apps/studio/src/stores/installed-apps-api.ts @@ -27,7 +27,13 @@ const getFirstInstalledEditor = async (): Promise< SupportedEditor | null > => { export const installedAppsApi = createApi( { reducerPath: 'installedAppsApi', baseQuery: fetchBaseQuery(), - tagTypes: [ 'StudioCliIsInstalled', 'InstalledApps', 'UserEditor', 'UserTerminal' ], + tagTypes: [ + 'StudioCliIsInstalled', + 'InstalledApps', + 'UserEditor', + 'UserTerminal', + 'ColorScheme', + ], endpoints: ( builder ) => ( { getStudioCliIsInstalled: builder.query< boolean, void >( { queryFn: async () => { @@ -91,6 +97,20 @@ export const installedAppsApi = createApi( { }, invalidatesTags: [ 'UserTerminal' ], } ), + getColorScheme: builder.query< 'system' | 'light' | 'dark', void >( { + queryFn: async () => { + const colorScheme = await getIpcApi().getColorScheme(); + return { data: colorScheme }; + }, + providesTags: [ 'ColorScheme' ], + } ), + saveColorScheme: builder.mutation< 'system' | 'light' | 'dark', 'system' | 'light' | 'dark' >( { + queryFn: async ( colorScheme ) => { + await getIpcApi().saveColorScheme( colorScheme ); + return { data: colorScheme }; + }, + invalidatesTags: [ 'ColorScheme' ], + } ), } ), } ); @@ -102,6 +122,8 @@ export const { useSaveUserTerminalMutation, useGetStudioCliIsInstalledQuery, useSaveStudioCliIsInstalledMutation, + useGetColorSchemeQuery, + useSaveColorSchemeMutation, } = installedAppsApi; export const selectInstalledEditors = createSelector( diff --git a/apps/studio/src/tests/main-window.test.ts b/apps/studio/src/tests/main-window.test.ts index f0119b3bb8..f9261d5fa7 100644 --- a/apps/studio/src/tests/main-window.test.ts +++ b/apps/studio/src/tests/main-window.test.ts @@ -74,6 +74,12 @@ vi.mock( 'electron', () => { dialog: { showMessageBox: vi.fn(), }, + nativeTheme: { + themeSource: 'system', + }, + screen: { + getAllDisplays: vi.fn().mockReturnValue( [] ), + }, BrowserWindow: MockBrowserWindow, shell: { trashItem: vi.fn(), diff --git a/apps/studio/tailwind.config.js b/apps/studio/tailwind.config.js index 930453cc59..52267fde4d 100644 --- a/apps/studio/tailwind.config.js +++ b/apps/studio/tailwind.config.js @@ -153,6 +153,19 @@ module.exports = { 'development-text': 'hsl(200, 95%, 28%)', 'circle-env-production': '#069e08', 'circle-env-staging': '#f7ba42', + // Content frame colors (CSS custom properties, swap in dark mode) + frame: 'var(--color-frame-bg)', + 'frame-text': 'var(--color-frame-text)', + 'frame-text-secondary': 'var(--color-frame-text-secondary)', + 'frame-border': 'var(--color-frame-border)', + 'frame-surface': 'var(--color-frame-surface)', + 'frame-surface-alt': 'var(--color-frame-surface-alt)', + 'frame-theme': 'var(--color-frame-theme)', + 'frame-theme-hover': 'var(--color-frame-theme-hover)', + 'frame-code-text': 'var(--color-frame-code-text)', + 'frame-running': 'var(--color-frame-running)', + 'frame-error': 'var(--color-frame-error)', + 'frame-tab-active': 'var(--color-frame-tab-active)', }, spacing: { chrome: `${ APP_CHROME_SPACING }px`,