feat(theming): update dark mode guide with new dark theme files and p…

…laygrounds (#3384)
ionic-team · Jan 23, 2024 · 50546f5 · 50546f5
1 parent 388c0e1
commit 50546f5
Show file tree

Hide file tree

Showing 62 changed files with 1,666 additions and 1,053 deletions.
diff --git a/docs/theming/css-variables.md b/docs/theming/css-variables.md
@@ -31,12 +31,12 @@ When using the Ionic CLI to start an Angular project, the `src/theme/variables.s
 }
 
 /* Set text color of the entire app for iOS only */
-.ios {
+:root.ios {
   --ion-text-color: #000;
 }
 
 /* Set text color of the entire app for Material Design only */
-.md {
+:root.md {
   --ion-text-color: #222;
 }
 ```

diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md
diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json
@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@ionic/angular": "7.6.2-dev.11704998705.1e1f9850",
-    "@ionic/core": "7.6.2-dev.11704998705.1e1f9850",
+    "@ionic/angular": "7.6.2-dev.11705355381.14b22962",
+    "@ionic/core": "7.6.2-dev.11705355381.14b22962",
     "@angular/platform-browser-dynamic": "17.0.4"
   }
 }
diff --git a/static/code/stackblitz/v8/angular/styles.css b/static/code/stackblitz/v8/angular/styles.css
@@ -28,7 +28,7 @@
 /**
  * Ionic Dark Theme
  * -----------------------------------------------------
- * For more info, please see:
+ * For more information, please see:
  * https://ionicframework.com/docs/theming/dark-mode
  */
 

diff --git a/static/code/stackblitz/v8/html/index.html b/static/code/stackblitz/v8/html/index.html
@@ -1,8 +1,8 @@
 <html>
 
 <head>
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/[email protected].11704998705.1e1f9850/css/core.css" />
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/[email protected].11704998705.1e1f9850/css/ionic.bundle.css" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/[email protected].11705355381.14b22962/css/core.css" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/[email protected].11705355381.14b22962/css/ionic.bundle.css" />
 </head>
 
 <body>

diff --git a/static/code/stackblitz/v8/html/index.ts b/static/code/stackblitz/v8/html/index.ts
@@ -21,7 +21,7 @@ import '@ionic/core/css/display.css';
 /**
  * Ionic Dark Theme
  * -----------------------------------------------------
- * For more info, please see:
+ * For more information, please see:
  * https://ionicframework.com/docs/theming/dark-mode
  */
 

diff --git a/static/code/stackblitz/v8/html/index.withContent.html b/static/code/stackblitz/v8/html/index.withContent.html
@@ -1,8 +1,8 @@
 <html>
 
 <head>
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/[email protected].11704998705.1e1f9850/css/core.css" />
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/[email protected].11704998705.1e1f9850/css/ionic.bundle.css" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/[email protected].11705355381.14b22962/css/core.css" />
+  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/[email protected].11705355381.14b22962/css/ionic.bundle.css" />
 </head>
 
 <body>

diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json
@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "@ionic/core": "7.6.2-dev.11704998705.1e1f9850"
+    "@ionic/core": "7.6.2-dev.11705355381.14b22962"
   }
 }
diff --git a/static/code/stackblitz/v8/react/app.tsx b/static/code/stackblitz/v8/react/app.tsx
@@ -20,7 +20,7 @@ import '@ionic/react/css/display.css';
 /**
  * Ionic Dark Theme
  * -----------------------------------------------------
- * For more info, please see:
+ * For more information, please see:
  * https://ionicframework.com/docs/theming/dark-mode
  */
 

diff --git a/static/code/stackblitz/v8/react/app.withContent.tsx b/static/code/stackblitz/v8/react/app.withContent.tsx
@@ -20,7 +20,7 @@ import '@ionic/react/css/display.css';
 /**
  * Ionic Dark Theme
  * -----------------------------------------------------
- * For more info, please see:
+ * For more information, please see:
  * https://ionicframework.com/docs/theming/dark-mode
  */
 

diff --git a/static/code/stackblitz/v8/react/package-lock.json b/static/code/stackblitz/v8/react/package-lock.json
diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "7.6.2-dev.11704998705.1e1f9850",
-    "@ionic/react-router": "7.6.2-dev.11704998705.1e1f9850",
+    "@ionic/react": "7.6.2-dev.11705355381.14b22962",
+    "@ionic/react-router": "7.6.2-dev.11705355381.14b22962",
     "@types/node": "^20.0.0",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",

diff --git a/static/code/stackblitz/v8/vue/main.ts b/static/code/stackblitz/v8/vue/main.ts
@@ -22,7 +22,7 @@ import '@ionic/vue/css/display.css';
 /**
  * Ionic Dark Theme
  * -----------------------------------------------------
- * For more info, please see:
+ * For more information, please see:
  * https://ionicframework.com/docs/theming/dark-mode
  */
 

diff --git a/static/code/stackblitz/v8/vue/package-lock.json b/static/code/stackblitz/v8/vue/package-lock.json
diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "7.6.2-dev.11704998705.1e1f9850",
-    "@ionic/vue-router": "7.6.2-dev.11704998705.1e1f9850",
+    "@ionic/vue": "7.6.2-dev.11705355381.14b22962",
+    "@ionic/vue-router": "7.6.2-dev.11705355381.14b22962",
     "vue": "^3.2.25",
     "vue-router": "4.2.5"
   },