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

Commit 13b5605

Browse files
author
Matty Goo
authored
chore(theme): remove dark theme (#2169)
BREAKING CHANGE: deleted `mdc-theme-light-or-dark` and `mdc-theme-dark`
1 parent d2e53e8 commit 13b5605

File tree

7 files changed

+16
-140
lines changed

7 files changed

+16
-140
lines changed

demos/common.scss

-32
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,12 @@
2424
$mdc-theme-primary: #6200ee !default; // baseline purple, 500 tone
2525
$mdc-theme-secondary: #018786 !default; // baseline teal, 600 tone
2626

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

37-
$dark-button-color: $material-color-light-green-a200;
38-
3933
// Used by ready.js to test whether the CSS has finished loading.
4034
.demo-ready-detect {
4135
position: relative;
@@ -47,32 +41,6 @@ fieldset {
4741
border: 0;
4842
}
4943

50-
// TODO mgoo: remove these dark theme when complete with removing other components
51-
.mdc-button {
52-
@include mdc-theme-dark {
53-
@include mdc-button-ink-color($dark-button-color);
54-
@include mdc-states($dark-button-color);
55-
}
56-
}
57-
58-
.mdc-button--raised {
59-
@include mdc-theme-dark(".mdc-button", true) {
60-
@include mdc-button-filled-accessible($dark-button-color);
61-
}
62-
}
63-
64-
.mdc-button--unelevated {
65-
@include mdc-theme-dark(".mdc-button", true) {
66-
@include mdc-button-filled-accessible($dark-button-color);
67-
}
68-
}
69-
70-
.mdc-button--stroked {
71-
@include mdc-theme-dark(".mdc-button", true) {
72-
@include mdc-button-stroke-color($dark-button-color);
73-
}
74-
}
75-
7644
.catalog-title {
7745
font-family: "Roboto Mono", monospace;
7846
}

demos/icon-toggle.scss

-4
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,6 @@
1818
@import "../packages/mdc-icon-toggle/mdc-icon-toggle";
1919
@import "../packages/mdc-ripple/mixins";
2020

21-
.mdc-theme--dark {
22-
background: #303030;
23-
}
24-
2521
.demo-wrapper {
2622
margin-left: 1rem;
2723
}

docs/code/readme_standards.md

-3
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,6 @@ CSS Class | Description
4141
`mdc-foo` | Sets the foo
4242
```
4343

44-
Remember to document `<COMPONENT_NAME>--theme-dark` CSS class if the component
45-
changes its appearance in Dark Theme context.
46-
4744
### Sass Variables and Mixins
4845

4946
Sass variables are documented in a tabular format (See Tabular Format section).

docs/theming.md

+16-26
Original file line numberDiff line numberDiff line change
@@ -430,37 +430,27 @@ Since our cards only contain text and no components, let's keep it simple for no
430430
> Note: in the future we plan to provide a Javascript utility method for changing all derived colors and making this
431431
use-case easier.
432432

433+
## Custom Themes
433434

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

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

440-
> Note: When using a dark theme, you probably want to choose a dark color as the background for your page, and adjust
441-
the MDC Web `background` color to match.
442-
443-
In order to apply a dark theme to a single element, you can use its `--theme-dark` class. For example, for a button:
444-
445-
```html
446-
<button class="mdc-button mdc-button--raised mdc-button--theme-dark">
447-
Raised dark button
448-
</button>
443+
```scss
444+
.accessible-button {
445+
@include mdc-button-filled-accessible(blue);
446+
}
449447
```
450448

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

453451
```html
454-
<section class="mdc-theme--dark">
455-
<button class="mdc-button mdc-button--raised">
456-
Still dark
457-
</button>
458-
459-
<button class="mdc-button">
460-
Me too!
461-
</button>
462-
</section>
452+
<button class="mdc-button accessible-button">
453+
<i class="material-icons mdc-button__icon">favorite</i>
454+
Button
455+
</button>
463456
```
464-
465-
> Note: there's currently no way to set a light portion inside of a dark one, so if you want to achieve that effect
466-
you'll need to selectively apply dark classes to everything except the light bits.

packages/mdc-theme/README.md

-9
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,6 @@ and five text styles:
3434

3535
> **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.
3636
37-
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.
38-
39-
> **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.
40-
4137
## Design & API Documentation
4238

4339
<ul class="icon-list">
@@ -141,11 +137,6 @@ CSS Class | Description
141137
Mixin | Description
142138
--- | ---
143139
`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.
144-
`mdc-theme-dark($root-selector, $compound)` | Creates a rule that is applied when the current selector is within an Dark Theme context
145-
146-
#### `mdc-theme-dark($root-selector, $compound)`
147-
148-
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.
149140

150141
#### `mdc-theme-prop` Properties
151142

packages/mdc-theme/_functions.scss

-9
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,6 @@ $_mdc-theme-tonal-offset: 7%;
6464
@return if(mdc-theme-tone($color) == "dark", "light", "dark");
6565
}
6666

67-
// DEPRECATED. Use mdc-theme-contrast-tone instead.
68-
@function mdc-theme-light-or-dark($color) {
69-
// stylelint-disable indentation
70-
@warn "The 'mdc-theme-light-or-dark' mixin is DEPRECATED and will be REMOVED in a future version. " +
71-
"Please use 'mdc-theme-contrast-tone' or 'mdc-theme-tone' (as applicable) instead.";
72-
@return mdc-theme-contrast-tone($color);
73-
// stylelint-enable indentation
74-
}
75-
7667
// lighten() and darken() require values to be between 0% and 100%.
7768
@function mdc-theme-clamp-percentage_($percentage) {
7869
@return max(0%, min(100%, $percentage));

packages/mdc-theme/_mixins.scss

-57
Original file line numberDiff line numberDiff line change
@@ -76,60 +76,3 @@
7676
}
7777
}
7878
}
79-
80-
// Creates a rule to be used in MDC Web components for dark theming, and applies the provided contents.
81-
// Should provide the $root-selector option if applied to anything other than the root selector.
82-
// When used with a modifier class, provide a second argument of `true` for the $compound parameter
83-
// to specify that this should be attached as a compound class.
84-
//
85-
// Usage example:
86-
//
87-
// ```scss
88-
// .mdc-foo {
89-
// color: black;
90-
//
91-
// @include mdc-theme-dark {
92-
// color: white;
93-
// }
94-
//
95-
// &__bar {
96-
// background: black;
97-
//
98-
// @include mdc-theme-dark(".mdc-foo") {
99-
// background: white;
100-
// }
101-
// }
102-
// }
103-
//
104-
// .mdc-foo--disabled {
105-
// opacity: .38;
106-
//
107-
// @include mdc-theme-dark(".mdc-foo", true) {
108-
// opacity: .5;
109-
// }
110-
// }
111-
// ```
112-
113-
// TODO: matt goo - remove this once all dark theme is removed
114-
@mixin mdc-theme-dark($root-selector: null, $compound: false) {
115-
@if ($root-selector) {
116-
@at-root {
117-
@if ($compound) {
118-
#{$root-selector}--theme-dark#{&},
119-
.mdc-theme--dark & {
120-
@content;
121-
}
122-
} @else {
123-
#{$root-selector}--theme-dark &,
124-
.mdc-theme--dark & {
125-
@content;
126-
}
127-
}
128-
}
129-
} @else {
130-
&--theme-dark,
131-
.mdc-theme--dark & {
132-
@content;
133-
}
134-
}
135-
}

0 commit comments

Comments
 (0)