Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Commit

Permalink
chore(theme): remove dark theme (#2169)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: deleted `mdc-theme-light-or-dark` and `mdc-theme-dark`
  • Loading branch information
Matty Goo authored Feb 3, 2018
1 parent d2e53e8 commit 13b5605
Show file tree
Hide file tree
Showing 7 changed files with 16 additions and 140 deletions.
32 changes: 0 additions & 32 deletions demos/common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,18 +24,12 @@
$mdc-theme-primary: #6200ee !default; // baseline purple, 500 tone
$mdc-theme-secondary: #018786 !default; // baseline teal, 600 tone

// Import button and ripple mixins to apply overrides for dark theme
// TODO(kfranqueiro): Pending further design discussion around how to manage dark theme
@import "../packages/mdc-button/mixins";
@import "../packages/mdc-ripple/mixins";
// All demo pages have a top toolbar, and most of them use theme variables.
// Import these *after* setting theme colors to override defaults in mdc-theme.
@import "../packages/mdc-theme/mdc-theme";
@import "../packages/mdc-toolbar/mdc-toolbar";
@import "../packages/mdc-typography/mdc-typography";

$dark-button-color: $material-color-light-green-a200;

// Used by ready.js to test whether the CSS has finished loading.
.demo-ready-detect {
position: relative;
Expand All @@ -47,32 +41,6 @@ fieldset {
border: 0;
}

// TODO mgoo: remove these dark theme when complete with removing other components
.mdc-button {
@include mdc-theme-dark {
@include mdc-button-ink-color($dark-button-color);
@include mdc-states($dark-button-color);
}
}

.mdc-button--raised {
@include mdc-theme-dark(".mdc-button", true) {
@include mdc-button-filled-accessible($dark-button-color);
}
}

.mdc-button--unelevated {
@include mdc-theme-dark(".mdc-button", true) {
@include mdc-button-filled-accessible($dark-button-color);
}
}

.mdc-button--stroked {
@include mdc-theme-dark(".mdc-button", true) {
@include mdc-button-stroke-color($dark-button-color);
}
}

.catalog-title {
font-family: "Roboto Mono", monospace;
}
Expand Down
4 changes: 0 additions & 4 deletions demos/icon-toggle.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,6 @@
@import "../packages/mdc-icon-toggle/mdc-icon-toggle";
@import "../packages/mdc-ripple/mixins";

.mdc-theme--dark {
background: #303030;
}

.demo-wrapper {
margin-left: 1rem;
}
Expand Down
3 changes: 0 additions & 3 deletions docs/code/readme_standards.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,6 @@ CSS Class | Description
`mdc-foo` | Sets the foo
```

Remember to document `<COMPONENT_NAME>--theme-dark` CSS class if the component
changes its appearance in Dark Theme context.

### Sass Variables and Mixins

Sass variables are documented in a tabular format (See Tabular Format section).
Expand Down
42 changes: 16 additions & 26 deletions docs/theming.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -430,37 +430,27 @@ Since our cards only contain text and no components, let's keep it simple for no
> Note: in the future we plan to provide a Javascript utility method for changing all derived colors and making this
use-case easier.

## Custom Themes

## Dark Themes
Most MDC Web components provide a set of Sass mixins to customize their appearance,
such as changing the fill color, ink color, stroke width, etc.
These mixins are documented in each component's README file
(e.g., the [Button readme](../packages/mdc-button/README.md#advanced-sass-mixins)).

Beyond what we've covered in this document so far, there's also the concept of a _dark theme_. All MDC Web components have
been designed to work with both light themes (that assume a light-colored background) and dark themes (with dark-colored
backgrounds), but the default is always light.
For example, to change the fill color of a button and automatically select an accessible ink color,
simply call the `mdc-button-filled-accessible` mixin inside a custom CSS class:

> Note: When using a dark theme, you probably want to choose a dark color as the background for your page, and adjust
the MDC Web `background` color to match.

In order to apply a dark theme to a single element, you can use its `--theme-dark` class. For example, for a button:

```html
<button class="mdc-button mdc-button--raised mdc-button--theme-dark">
Raised dark button
</button>
```scss
.accessible-button {
@include mdc-button-filled-accessible(blue);
}
```

Alternatively, you can set your entire page (or a portion of it) to a dark theme by using the `mdc-theme--dark` class:
Then apply the custom class to the button elements:

```html
<section class="mdc-theme--dark">
<button class="mdc-button mdc-button--raised">
Still dark
</button>

<button class="mdc-button">
Me too!
</button>
</section>
<button class="mdc-button accessible-button">
<i class="material-icons mdc-button__icon">favorite</i>
Button
</button>
```

> Note: there's currently no way to set a light portion inside of a dark one, so if you want to achieve that effect
you'll need to selectively apply dark classes to everything except the light bits.
9 changes: 0 additions & 9 deletions packages/mdc-theme/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,6 @@ and five text styles:

> **A note about Primary and Secondary**, don't confuse primary/secondary _color_ with primary/secondary _text_. The former refers to the primary/secondary _theme_ color that is used to establish a visual identity and color many parts of your application. The latter refers to the style of text that is most prominent (low opacity, high contrast), and used to display most content.
Some components can change their appearance when in a Dark Theme context, aka placed on top of a dark background. There are two ways to specify if a component is in a Dark Theme context. The first is to add `mdc-theme--dark` to a *container* element, which holds the component. The second way is to add `<component_name>--theme-dark` modifier class to the actual component element. For example, `mdc-button--theme-dark` would put the MDC Button in a Dark Theme context.

> **A note about Dark Theme context**, don't confuse Dark Theme context with a component that has a dark color. Dark Theme context means the component sits on top of a dark background.
## Design & API Documentation

<ul class="icon-list">
Expand Down Expand Up @@ -141,11 +137,6 @@ CSS Class | Description
Mixin | Description
--- | ---
`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.
`mdc-theme-dark($root-selector, $compound)` | Creates a rule that is applied when the current selector is within an Dark Theme context

#### `mdc-theme-dark($root-selector, $compound)`

Creates a rule that is applied when the current selector is within an Dark Theme context. If you are using the mixin on anything other than the base selector of the component, e.g. `.mdc-button`, you need to specify `$root-selector` as the base selector as a parameter. You can also specify `$compound` to true if the the current selector is a compound selector with the base selector, e.g. a modifier class to the component root element.

#### `mdc-theme-prop` Properties

Expand Down
9 changes: 0 additions & 9 deletions packages/mdc-theme/_functions.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,15 +64,6 @@ $_mdc-theme-tonal-offset: 7%;
@return if(mdc-theme-tone($color) == "dark", "light", "dark");
}

// DEPRECATED. Use mdc-theme-contrast-tone instead.
@function mdc-theme-light-or-dark($color) {
// stylelint-disable indentation
@warn "The 'mdc-theme-light-or-dark' mixin is DEPRECATED and will be REMOVED in a future version. " +
"Please use 'mdc-theme-contrast-tone' or 'mdc-theme-tone' (as applicable) instead.";
@return mdc-theme-contrast-tone($color);
// stylelint-enable indentation
}

// lighten() and darken() require values to be between 0% and 100%.
@function mdc-theme-clamp-percentage_($percentage) {
@return max(0%, min(100%, $percentage));
Expand Down
57 changes: 0 additions & 57 deletions packages/mdc-theme/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,60 +76,3 @@
}
}
}

// Creates a rule to be used in MDC Web components for dark theming, and applies the provided contents.
// Should provide the $root-selector option if applied to anything other than the root selector.
// When used with a modifier class, provide a second argument of `true` for the $compound parameter
// to specify that this should be attached as a compound class.
//
// Usage example:
//
// ```scss
// .mdc-foo {
// color: black;
//
// @include mdc-theme-dark {
// color: white;
// }
//
// &__bar {
// background: black;
//
// @include mdc-theme-dark(".mdc-foo") {
// background: white;
// }
// }
// }
//
// .mdc-foo--disabled {
// opacity: .38;
//
// @include mdc-theme-dark(".mdc-foo", true) {
// opacity: .5;
// }
// }
// ```

// TODO: matt goo - remove this once all dark theme is removed
@mixin mdc-theme-dark($root-selector: null, $compound: false) {
@if ($root-selector) {
@at-root {
@if ($compound) {
#{$root-selector}--theme-dark#{&},
.mdc-theme--dark & {
@content;
}
} @else {
#{$root-selector}--theme-dark &,
.mdc-theme--dark & {
@content;
}
}
}
} @else {
&--theme-dark,
.mdc-theme--dark & {
@content;
}
}
}

0 comments on commit 13b5605

Please sign in to comment.