diff --git a/docs/updating/8-0.md b/docs/updating/8-0.md index f3bddb7c0eb..afe4557370a 100644 --- a/docs/updating/8-0.md +++ b/docs/updating/8-0.md @@ -97,9 +97,9 @@ In previous versions, it was recommended to define the dark theme in the followi 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: ```css -/* @import '@ionic/angular/css/themes/dark.always.css'; */ -/* @import "@ionic/angular/css/themes/dark.class.css"; */ -@import '@ionic/angular/css/themes/dark.system.css'; +/* @import '@ionic/angular/css/palettes/dark.always.css'; */ +/* @import "@ionic/angular/css/palettes/dark.class.css"; */ +@import '@ionic/angular/css/palettes/dark.system.css'; ``` 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 `` element and is identical to the selector `html`, except that its specificity is higher. diff --git a/static/code/stackblitz/v8/angular/styles.css b/static/code/stackblitz/v8/angular/styles.css index 9976736eeb4..4532a9076d4 100644 --- a/static/code/stackblitz/v8/angular/styles.css +++ b/static/code/stackblitz/v8/angular/styles.css @@ -32,6 +32,6 @@ * https://ionicframework.com/docs/theming/dark-mode */ -/* @import "~@ionic/angular/css/themes/dark.always.css"; */ -/* @import "~@ionic/angular/css/themes/dark.class.css"; */ -@import "~@ionic/angular/css/themes/dark.system.css"; +/* @import "~@ionic/angular/css/palettes/dark.always.css"; */ +/* @import "~@ionic/angular/css/palettes/dark.class.css"; */ +@import "~@ionic/angular/css/palettes/dark.system.css"; diff --git a/static/code/stackblitz/v8/html/index.ts b/static/code/stackblitz/v8/html/index.ts index ee69ed49698..d40f1794291 100644 --- a/static/code/stackblitz/v8/html/index.ts +++ b/static/code/stackblitz/v8/html/index.ts @@ -25,9 +25,9 @@ import '@ionic/core/css/display.css'; * https://ionicframework.com/docs/theming/dark-mode */ -// import '@ionic/core/css/themes/dark.always.css'; -// import '@ionic/core/css/themes/dark.class.css'; -import '@ionic/core/css/themes/dark.system.css'; +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; /* Theme variables */ import './theme/variables.css'; diff --git a/static/code/stackblitz/v8/react/app.tsx b/static/code/stackblitz/v8/react/app.tsx index 668e3374307..d575e20e73c 100644 --- a/static/code/stackblitz/v8/react/app.tsx +++ b/static/code/stackblitz/v8/react/app.tsx @@ -24,9 +24,9 @@ import '@ionic/react/css/display.css'; * https://ionicframework.com/docs/theming/dark-mode */ -// import '@ionic/react/css/themes/dark.always.css'; -// import '@ionic/react/css/themes/dark.class.css'; -import '@ionic/react/css/themes/dark.system.css'; +// import '@ionic/react/css/palettes/dark.always.css'; +// import '@ionic/react/css/palettes/dark.class.css'; +import '@ionic/react/css/palettes/dark.system.css'; /* Theme variables */ import './theme/variables.css'; diff --git a/static/code/stackblitz/v8/react/app.withContent.tsx b/static/code/stackblitz/v8/react/app.withContent.tsx index bcc98294168..b55f8817771 100644 --- a/static/code/stackblitz/v8/react/app.withContent.tsx +++ b/static/code/stackblitz/v8/react/app.withContent.tsx @@ -24,9 +24,9 @@ import '@ionic/react/css/display.css'; * https://ionicframework.com/docs/theming/dark-mode */ -// import '@ionic/react/css/themes/dark.always.css'; -// import '@ionic/react/css/themes/dark.class.css'; -import '@ionic/react/css/themes/dark.system.css'; +// import '@ionic/react/css/palettes/dark.always.css'; +// import '@ionic/react/css/palettes/dark.class.css'; +import '@ionic/react/css/palettes/dark.system.css'; /* Theme variables */ import './theme/variables.css'; diff --git a/static/code/stackblitz/v8/vue/main.ts b/static/code/stackblitz/v8/vue/main.ts index 5e4ba10662b..420eb2569a9 100644 --- a/static/code/stackblitz/v8/vue/main.ts +++ b/static/code/stackblitz/v8/vue/main.ts @@ -26,9 +26,9 @@ import '@ionic/vue/css/display.css'; * https://ionicframework.com/docs/theming/dark-mode */ -// import '@ionic/vue/css/themes/dark.always.css'; -// import '@ionic/vue/css/themes/dark.class.css'; -import '@ionic/vue/css/themes/dark.system.css'; +// import '@ionic/vue/css/palettes/dark.always.css'; +// import '@ionic/vue/css/palettes/dark.class.css'; +import '@ionic/vue/css/palettes/dark.system.css'; /* Theme variables */ import './theme/variables.css'; diff --git a/static/usage/v8/common.js b/static/usage/v8/common.js index 24ae787faa4..1c84b69d961 100644 --- a/static/usage/v8/common.js +++ b/static/usage/v8/common.js @@ -1,7 +1,7 @@ const linkElement = document.createElement('link'); linkElement.rel = 'stylesheet'; -linkElement.href = 'https://cdn.jsdelivr.net/npm/@ionic/core@next/css/themes/dark.class.css'; +linkElement.href = 'https://cdn.jsdelivr.net/npm/@ionic/core@next/css/palettes/dark.class.css'; document.head.appendChild(linkElement);