Skip to content

Commit ca38d23

Browse files
mapsandappsmapsandapps
authored
fix: rename themes to palettes in playground imports (#3543)
1 parent 3d51a1c commit ca38d23

File tree

7 files changed

+19
-19
lines changed

7 files changed

+19
-19
lines changed

‎docs/updating/8-0.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,9 @@ In previous versions, it was recommended to define the dark theme in the followi
9797
In Ionic Framework version 8, the dark theme is being distributed via css files that can be imported. Below is an example of importing a dark theme file in Angular:
9898

9999
```css
100-
/* @import '@ionic/angular/css/themes/dark.always.css'; */
101-
/* @import "@ionic/angular/css/themes/dark.class.css"; */
102-
@import '@ionic/angular/css/themes/dark.system.css';
100+
/* @import '@ionic/angular/css/palettes/dark.always.css'; */
101+
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
102+
@import '@ionic/angular/css/palettes/dark.system.css';
103103
```
104104

105105
The dark theme is now applied to the `:root` selector instead of the `body` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector represents the `<html>` element and is identical to the selector `html`, except that its specificity is higher.

‎static/code/stackblitz/v8/angular/styles.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,6 @@
3232
* https://ionicframework.com/docs/theming/dark-mode
3333
*/
3434

35-
/* @import "~@ionic/angular/css/themes/dark.always.css"; */
36-
/* @import "~@ionic/angular/css/themes/dark.class.css"; */
37-
@import "~@ionic/angular/css/themes/dark.system.css";
35+
/* @import "~@ionic/angular/css/palettes/dark.always.css"; */
36+
/* @import "~@ionic/angular/css/palettes/dark.class.css"; */
37+
@import "~@ionic/angular/css/palettes/dark.system.css";

‎static/code/stackblitz/v8/html/index.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ import '@ionic/core/css/display.css';
2525
* https://ionicframework.com/docs/theming/dark-mode
2626
*/
2727

28-
// import '@ionic/core/css/themes/dark.always.css';
29-
// import '@ionic/core/css/themes/dark.class.css';
30-
import '@ionic/core/css/themes/dark.system.css';
28+
// import '@ionic/core/css/palettes/dark.always.css';
29+
// import '@ionic/core/css/palettes/dark.class.css';
30+
import '@ionic/core/css/palettes/dark.system.css';
3131

3232
/* Theme variables */
3333
import './theme/variables.css';

‎static/code/stackblitz/v8/react/app.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ import '@ionic/react/css/display.css';
2424
* https://ionicframework.com/docs/theming/dark-mode
2525
*/
2626

27-
// import '@ionic/react/css/themes/dark.always.css';
28-
// import '@ionic/react/css/themes/dark.class.css';
29-
import '@ionic/react/css/themes/dark.system.css';
27+
// import '@ionic/react/css/palettes/dark.always.css';
28+
// import '@ionic/react/css/palettes/dark.class.css';
29+
import '@ionic/react/css/palettes/dark.system.css';
3030

3131
/* Theme variables */
3232
import './theme/variables.css';

‎static/code/stackblitz/v8/react/app.withContent.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ import '@ionic/react/css/display.css';
2424
* https://ionicframework.com/docs/theming/dark-mode
2525
*/
2626

27-
// import '@ionic/react/css/themes/dark.always.css';
28-
// import '@ionic/react/css/themes/dark.class.css';
29-
import '@ionic/react/css/themes/dark.system.css';
27+
// import '@ionic/react/css/palettes/dark.always.css';
28+
// import '@ionic/react/css/palettes/dark.class.css';
29+
import '@ionic/react/css/palettes/dark.system.css';
3030

3131
/* Theme variables */
3232
import './theme/variables.css';

‎static/code/stackblitz/v8/vue/main.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ import '@ionic/vue/css/display.css';
2626
* https://ionicframework.com/docs/theming/dark-mode
2727
*/
2828

29-
// import '@ionic/vue/css/themes/dark.always.css';
30-
// import '@ionic/vue/css/themes/dark.class.css';
31-
import '@ionic/vue/css/themes/dark.system.css';
29+
// import '@ionic/vue/css/palettes/dark.always.css';
30+
// import '@ionic/vue/css/palettes/dark.class.css';
31+
import '@ionic/vue/css/palettes/dark.system.css';
3232

3333
/* Theme variables */
3434
import './theme/variables.css';

‎static/usage/v8/common.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const linkElement = document.createElement('link');
22

33
linkElement.rel = 'stylesheet';
4-
linkElement.href = 'https://cdn.jsdelivr.net/npm/@ionic/core@next/css/themes/dark.class.css';
4+
linkElement.href = 'https://cdn.jsdelivr.net/npm/@ionic/core@next/css/palettes/dark.class.css';
55

66
document.head.appendChild(linkElement);
77

0 commit comments

Comments
 (0)