Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[EuiProvider] Detect OS/system light vs darkmode as a default #8026

Merged
merged 10 commits into from
Sep 23, 2024
Merged

[EuiProvider] Detect OS/system light vs darkmode as a default #8026

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3d8caa4
Create provider/listener for detecting system light/dark mode setting
cee-chen Sep 16, 2024
a9cee51
[storybook] inherit toolbar/global from system setting
cee-chen Sep 16, 2024
acaf347
[src-docs] Update to not set an initial theme, which allows inheritin…
cee-chen Sep 16, 2024
23f4492
[src-docs] Remove existing theme context light/dark mode in favor of …
cee-chen Sep 16, 2024
6b215a5
[src-docs] Update codesandboxes - remove theme/color mode context and…
cee-chen Sep 16, 2024
80dc95e
[src-docs] remove text docs unnecessarily referencing theme
cee-chen Sep 16, 2024
6386602
[src-docs] remove unnecessary `theme` render prop and `selectedTheme`…
cee-chen Sep 16, 2024
b7be6d8
changelog
cee-chen Sep 16, 2024
918b951
Merge branch 'main' into system-color-mode
cee-chen Sep 23, 2024
2cdacd7
[PR feedback] Clean up types in src-docs ThemeContext
cee-chen Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 3 additions & 10 deletions packages/eui/src-docs/src/views/avatar/avatar_icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,8 @@
import React, { useContext } from 'react';
import { ThemeContext } from '../../components';

import { EuiAvatar, EuiSpacer, EuiTitle } from '../../../../src/components';
import React from 'react';
import { EuiAvatar, EuiSpacer, EuiTitle, useEuiTheme } from '../../../../src';

export default () => {
const themeContext = useContext(ThemeContext);

/**
* Setup theme based on current light/dark theme
*/
const isDarkTheme = themeContext.theme.includes('dark');
const isDarkTheme = useEuiTheme().colorMode === 'DARK';

return (
<div>
Expand Down
11 changes: 3 additions & 8 deletions packages/eui/src-docs/src/views/empty_prompt/_types_of_empty_states.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useEffect, useContext } from 'react';
import React, { useState, useEffect } from 'react';
import reactElementToJSXString from 'react-element-to-jsx-string';
import classNames from 'classnames';
import {
Expand All @@ -20,8 +20,8 @@ import {
EuiDescriptionListDescription,
EuiLoadingSpinner,
useIsWithinBreakpoints,
useEuiTheme,
} from '../../../../src';
import { ThemeContext } from '../../components/with_theme';
import { typesOfPanelColors } from './_types_of_panel_colors';
// @ts-ignore Importing from JS file
import { typesOfUseCases } from './_types_of_use_cases';
Expand All @@ -43,12 +43,7 @@ import singleSvg from '../../images/single.svg';
import contentCenterSvg from '../../images/content_center.svg';

export default () => {
const themeContext = useContext(ThemeContext);

/**
* Setup theme based on current light/dark theme
*/
const isDarkTheme = themeContext.theme.includes('dark');
const isDarkTheme = useEuiTheme().colorMode === 'DARK';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yay for being able to reuse things! 👏


const useCasesOptions: EuiRadioGroupOption[] = Object.values(
typesOfUseCases
Expand Down
9 changes: 4 additions & 5 deletions packages/eui/src-docs/src/views/empty_prompt/prompt_types/no_permission.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
import React, { useContext } from 'react';
import React from 'react';
import {
EuiEmptyPrompt,
EuiImage,
EuiButton,
EuiButtonEmpty,
} from '../../../../../src/components';
import { ThemeContext } from '../../../components/with_theme';
useEuiTheme,
} from '../../../../../src';
import pageNotFoundLight from '../../../images/empty-prompt/accessDenied--light.png';
import pageNotFoundDark from '../../../images/empty-prompt/accessDenied--dark.png';

export default () => {
const themeContext = useContext(ThemeContext);
const isDarkTheme = themeContext.theme.includes('dark');
const isDarkTheme = useEuiTheme().colorMode === 'DARK';

const iconImg: string = isDarkTheme ? pageNotFoundDark : pageNotFoundLight;

Expand Down
9 changes: 4 additions & 5 deletions packages/eui/src-docs/src/views/empty_prompt/prompt_types/page_not_found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
import React, { useContext } from 'react';
import React from 'react';
import {
EuiEmptyPrompt,
EuiImage,
EuiButton,
EuiButtonEmpty,
} from '../../../../../src/components';
import { ThemeContext } from '../../../components/with_theme';
useEuiTheme,
} from '../../../../../src';

import pageNotFoundDark from '../../../images/empty-prompt/pageNotFound--dark.png';
import pageNotFoundLight from '../../../images/empty-prompt/pageNotFound--light.png';
import pageNotFoundDark2x from '../../../images/empty-prompt/pageNotFound--dark@2x.png';
import pageNotFoundLight2x from '../../../images/empty-prompt/pageNotFound--light@2x.png';

export default () => {
const themeContext = useContext(ThemeContext);
const isDarkTheme = themeContext.theme.includes('dark');
const isDarkTheme = useEuiTheme().colorMode === 'DARK';

const pageNotFound = isDarkTheme ? pageNotFoundDark : pageNotFoundLight;
const pageNotFound2x = isDarkTheme ? pageNotFoundDark2x : pageNotFoundLight2x;
Expand Down
18 changes: 9 additions & 9 deletions packages/eui/src-docs/src/views/home/home_illustration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import React, { useContext } from 'react';
import { ThemeContext } from '../../components/with_theme';
import React from 'react';
import illustrationDarkMode from '../../images/illustration-eui-hero-500-darkmode-shadow.svg';
import illustrationLightMode from '../../images/illustration-eui-hero-500-shadow.svg';
import { EuiImage } from '../../../../src/components/image';
import { EuiImage, useEuiTheme } from '../../../../src';

function Icon() {
const themeContext: any = useContext(ThemeContext);
const { colorMode } = useEuiTheme();

const illustration = themeContext.theme.includes('dark') ? (
<EuiImage alt="Elastic UI" url={illustrationDarkMode} />
) : (
<EuiImage alt="Elastic UI" url={illustrationLightMode} />
);
const illustration =
colorMode === 'DARK' ? (
<EuiImage alt="Elastic UI" url={illustrationDarkMode} />
) : (
<EuiImage alt="Elastic UI" url={illustrationLightMode} />
);

return (
<div className="guideHomePage__illustration">
Expand Down