Skip to content

Add dark theme info to themes docs #717

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

Merged
merged 1 commit into from
Jul 10, 2020
Merged

Add dark theme info to themes docs #717

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 7 additions & 2 deletions packages/dev/docs/pages/react-spectrum/theming.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,13 @@ which define the values for the variables in each color scheme and platform scal
a CSS class which includes the variables it defines, and `Provider` applies these classes according to
media queries and prop settings.

React Spectrum includes a default theme, which includes dark and light color schemes, along with medium and
large platform scales. You can import it and pass it to the `Provider` to apply it.
React Spectrum includes two themes by default. The `defaultTheme` uses the Spectrum `light` and `dark` color themes
and is suitable for most applications. The `darkTheme` uses the Spectrum `dark` and `darkest` color themes, and is
suitable for applications that are optimal with a darker interface regardless of operating system setting
(e.g. photo/video editors). See the [Spectrum color](https://spectrum.adobe.com/page/color/#Color-themes-and-modes)
page for more information.

Import your desired theme and pass it to your application's `Provider` to apply it.

```tsx
import {theme} from '@react-spectrum/theme-default';
Expand Down