Skip to content

feat: add dark theme#44

Merged
markov00 merged 3 commits intoelastic:masterfrom
markov00:style/darkmode
Feb 19, 2019
Merged

feat: add dark theme#44
markov00 merged 3 commits intoelastic:masterfrom
markov00:style/darkmode

Conversation

@markov00
Copy link
Copy Markdown
Collaborator

@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
Copy Markdown
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.

@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
Copy Markdown
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
Copy Markdown
Collaborator 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