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.

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

feat: add dark theme #44

Merged
merged 3 commits into from
Feb 19, 2019
Merged

feat: add dark theme #44

merged 3 commits into from
Feb 19, 2019

Conversation

markov00
Copy link
Member

@markov00 markov00 commented Feb 6, 2019

This PR introduce the a better theming on charts. Now the theme has a clear and flatter structure.

A new theme is added: DARK_THEME.

A switch to test the DARK theme is added to storybook

feb-06-2019 11-16-43

fix #35

BREAKING CHANGES:

The Theme interface was refactored completely with a flatter structure.

emmacunningham
emmacunningham previously approved these changes Feb 6, 2019
Copy link
Contributor

@emmacunningham emmacunningham left a comment

Choose a reason for hiding this comment

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

Code LGTM (just left a couple of questions for my own clarification); tested locally on Firefox.

src/lib/themes/theme.ts Outdated Show resolved Hide resolved
@markov00 markov00 changed the title feat: add dark theme [wip] feat: add dark theme Feb 8, 2019
@markov00 markov00 dismissed emmacunningham’s stale review February 12, 2019 21:57

I've updated the theme structure after the reviews

@markov00 markov00 changed the title [wip] feat: add dark theme feat: add dark theme Feb 12, 2019
Copy link
Contributor

@emmacunningham emmacunningham left a comment

Choose a reason for hiding this comment

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

Just a couple of minor comments otherwise LGTM. Thanks for doing all the Theme refactoring!

The Dark Theme is now available.
The AxisConfig has now a cleaner styling, splitted by axis or tick styles.
Changing a theme is now easier and it's not necessary tied to a darkmode flag. New
theme can be added and used on the charts.

fix elastic#35

BREAKING CHANGE: The `Theme.AxisConfig` type has a different signature.
It now contains `axisTitleStyle`, `axisLineStyle`, `tickLabelStyle` and
`tickLineStyle` defined as `TextStyle` or `StrokeStyle` elements.
The `Theme` interface is changed in a more flat structure.
`darkMode` prop from `Setting` is removed.
`theme` prop in `Setting` is now a `Theme` type object, not a `PartialTheme`.
You can use `mergeWithDefaultTheme` function to merge an existing theme
with a partial one.
@markov00 markov00 merged commit 766f1ad into elastic:master Feb 19, 2019
markov00 pushed a commit that referenced this pull request Feb 19, 2019
# [2.0.0](v1.1.1...v2.0.0) (2019-02-19)

### Features

* add dark theme ([#44](#44)) ([766f1ad](766f1ad)), closes [#35](#35)

### BREAKING CHANGES

* The `Theme.AxisConfig` type has a different signature.
It now contains `axisTitleStyle`, `axisLineStyle`, `tickLabelStyle` and
`tickLineStyle` defined as `TextStyle` or `StrokeStyle` elements.
The `Theme` interface is changed in a more flat structure.
`darkMode` prop from `Setting` is removed.
`theme` prop in `Setting` is now a `Theme` type object, not a `PartialTheme`.
You can use `mergeWithDefaultTheme` function to merge an existing theme
with a partial one.
@markov00
Copy link
Member Author

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00 markov00 added the released Issue released publicly label Feb 19, 2019
@markov00 markov00 mentioned this pull request Feb 19, 2019
93 tasks
@markov00 markov00 deleted the style/darkmode branch February 19, 2019 10:00
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this pull request Feb 10, 2022
# [2.0.0](elastic/elastic-charts@v1.1.1...v2.0.0) (2019-02-19)

### Features

* add dark theme ([opensearch-project#44](elastic/elastic-charts#44)) ([bf772a0](elastic/elastic-charts@bf772a0)), closes [opensearch-project#35](elastic/elastic-charts#35)

### BREAKING CHANGES

* The `Theme.AxisConfig` type has a different signature.
It now contains `axisTitleStyle`, `axisLineStyle`, `tickLabelStyle` and
`tickLineStyle` defined as `TextStyle` or `StrokeStyle` elements.
The `Theme` interface is changed in a more flat structure.
`darkMode` prop from `Setting` is removed.
`theme` prop in `Setting` is now a `Theme` type object, not a `PartialTheme`.
You can use `mergeWithDefaultTheme` function to merge an existing theme
with a partial one.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
released Issue released publicly
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add dark mode switch button
3 participants