-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(theming): migrate Dark Mode Codepens to playground examples (#3067)
Resolves #2998 Co-authored-by: Colum Ferry <[email protected]>
- Loading branch information
1 parent
6c5b117
commit 8ad4e0a
Showing
21 changed files
with
1,832 additions
and
210 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
45 changes: 45 additions & 0 deletions
45
static/usage/v7/theming/automatic-dark-mode/angular/example_component_html.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| ```html | ||
| <ion-header class="ion-no-border"> | ||
| <ion-toolbar> | ||
| <ion-buttons slot="start"> | ||
| <ion-back-button default-href="#"></ion-back-button> | ||
| </ion-buttons> | ||
| <ion-title>Display</ion-title> | ||
| <ion-buttons slot="end"> | ||
| <ion-button color="dark"> | ||
| <ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon> | ||
| </ion-button> | ||
| </ion-buttons> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
|
|
||
| <ion-content> | ||
| <ion-list-header>Appearance</ion-list-header> | ||
| <ion-list [inset]="true"> | ||
| <ion-item [button]="true">Text Size</ion-item> | ||
| <ion-item> | ||
| <ion-toggle justify="space-between">Bold Text</ion-toggle> | ||
| </ion-item> | ||
| </ion-list> | ||
|
|
||
| <ion-list-header>Brightness</ion-list-header> | ||
| <ion-list [inset]="true"> | ||
| <ion-item> | ||
| <ion-range value="40"> | ||
| <ion-icon name="sunny-outline" slot="start"></ion-icon> | ||
| <ion-icon name="sunny" slot="end"></ion-icon> | ||
| </ion-range> | ||
| </ion-item> | ||
| <ion-item> | ||
| <ion-toggle justify="space-between" checked>True Tone</ion-toggle> | ||
| </ion-item> | ||
| </ion-list> | ||
|
|
||
| <ion-list [inset]="true"> | ||
| <ion-item [button]="true"> | ||
| <ion-label>Night Shift</ion-label> | ||
| <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text> | ||
| </ion-item> | ||
| </ion-list> | ||
| </ion-content> | ||
| ``` |
24 changes: 24 additions & 0 deletions
24
static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| ```ts | ||
| import { Component, OnInit } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-example', | ||
| templateUrl: 'example.component.html', | ||
| }) | ||
| export class ExampleComponent implements OnInit { | ||
| ngOnInit() { | ||
| // Use matchMedia to check the user preference | ||
| const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); | ||
|
|
||
| this.toggleDarkTheme(prefersDark.matches); | ||
|
|
||
| // Listen for changes to the prefers-color-scheme media query | ||
| prefersDark.addEventListener('change', (mediaQuery) => this.toggleDarkTheme(mediaQuery.matches)); | ||
| } | ||
|
|
||
| // Add or remove the "dark" class on the document body | ||
| toggleDarkTheme(shouldAdd) { | ||
| document.body.classList.toggle('dark', shouldAdd); | ||
| } | ||
| } | ||
| ``` |
25 changes: 25 additions & 0 deletions
25
static/usage/v7/theming/automatic-dark-mode/angular/global_css.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| ```css | ||
| /* | ||
| * Optional CSS | ||
| * ----------------------------------- | ||
| */ | ||
|
|
||
| /* This sets a different background and item background in light mode on ios */ | ||
| .ios body { | ||
| --ion-background-color: #f2f2f6; | ||
| --ion-toolbar-background: var(--ion-background-color); | ||
| --ion-item-background: #fff; | ||
| } | ||
|
|
||
| /* This sets a different background and item background in light mode on md */ | ||
| .md body { | ||
| --ion-background-color: #f9f9f9; | ||
| --ion-toolbar-background: var(--ion-background-color); | ||
| --ion-item-background: #fff; | ||
| } | ||
|
|
||
| /* This is added for the flashing that happens when toggling between themes */ | ||
| ion-item { | ||
| --transition: none; | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Theming</title> | ||
| <link rel="stylesheet" href="../../../common.css" /> | ||
| <script src="../../../common.js"></script> | ||
| <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <ion-app> | ||
| <ion-header class="ion-no-border"> | ||
| <ion-toolbar> | ||
| <ion-buttons slot="start"> | ||
| <ion-back-button default-href="#"></ion-back-button> | ||
| </ion-buttons> | ||
| <ion-title>Display</ion-title> | ||
| <ion-buttons slot="end"> | ||
| <ion-button color="dark"> | ||
| <ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon> | ||
| </ion-button> | ||
| </ion-buttons> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
|
|
||
| <ion-content> | ||
| <ion-list-header>Appearance</ion-list-header> | ||
| <ion-list inset="true"> | ||
| <ion-item button="true">Text Size</ion-item> | ||
| <ion-item> | ||
| <ion-toggle justify="space-between">Bold Text</ion-toggle> | ||
| </ion-item> | ||
| </ion-list> | ||
|
|
||
| <ion-list-header>Brightness</ion-list-header> | ||
| <ion-list inset="true"> | ||
| <ion-item> | ||
| <ion-range value="40"> | ||
| <ion-icon name="sunny-outline" slot="start"></ion-icon> | ||
| <ion-icon name="sunny" slot="end"></ion-icon> | ||
| </ion-range> | ||
| </ion-item> | ||
| <ion-item> | ||
| <ion-toggle justify="space-between" checked>True Tone</ion-toggle> | ||
| </ion-item> | ||
| </ion-list> | ||
|
|
||
| <ion-list inset="true"> | ||
| <ion-item button="true"> | ||
| <ion-label>Night Shift</ion-label> | ||
| <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text> | ||
| </ion-item> | ||
| </ion-list> | ||
| </ion-content> | ||
| </ion-app> | ||
|
|
||
| <script> | ||
| // Use matchMedia to check the user preference | ||
| const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); | ||
|
|
||
| // Listen for changes to the prefers-color-scheme media query | ||
| prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches)); | ||
|
|
||
| // Add or remove the "dark" class on the document body | ||
| function toggleDarkTheme(shouldAdd) { | ||
| document.body.classList.toggle('dark', shouldAdd); | ||
| } | ||
| </script> | ||
|
|
||
| <style> | ||
| /* | ||
| * Optional CSS | ||
| * ----------------------------------- | ||
| */ | ||
|
|
||
| /* This sets a different background and item background in light mode on ios */ | ||
| .ios body { | ||
| --ion-background-color: #f2f2f6; | ||
| --ion-toolbar-background: var(--ion-background-color); | ||
| --ion-item-background: #fff; | ||
| } | ||
|
|
||
| /* This sets a different background and item background in light mode on md */ | ||
| .md body { | ||
| --ion-background-color: #f9f9f9; | ||
| --ion-toolbar-background: var(--ion-background-color); | ||
| --ion-item-background: #fff; | ||
| } | ||
|
|
||
| /* This sets a different item background in dark mode on ios */ | ||
| .ios body.dark { | ||
| --ion-item-background: #1c1c1d; | ||
| } | ||
|
|
||
| /* This is added for the flashing that happens when toggling between themes */ | ||
| ion-item { | ||
| --transition: none; | ||
| } | ||
| </style> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import Playground from '@site/src/components/global/Playground'; | ||
|
|
||
| import javascript_index_html from './javascript.md'; | ||
|
|
||
| import react_main_tsx from './react/main_tsx.md'; | ||
| import react_main_css from './react/main_css.md'; | ||
|
|
||
| import vue from './vue.md'; | ||
|
|
||
| import angular_example_component_html from './angular/example_component_html.md'; | ||
| import angular_example_component_ts from './angular/example_component_ts.md'; | ||
| import angular_global_css from './angular/global_css.md'; | ||
|
|
||
| import variables_css from './theme/variables_css.md'; | ||
|
|
||
| <Playground | ||
| version="7" | ||
| code={{ | ||
| javascript: { | ||
| files: { | ||
| 'index.html': javascript_index_html, | ||
| 'theme/variables.css': variables_css, | ||
| }, | ||
| }, | ||
| react: { | ||
| files: { | ||
| 'src/main.tsx': react_main_tsx, | ||
| 'src/main.css': react_main_css, | ||
| 'src/theme/variables.css': variables_css, | ||
| }, | ||
| }, | ||
| vue: { | ||
| files: { | ||
| 'src/components/Example.vue': vue, | ||
| 'src/theme/variables.css': variables_css, | ||
| }, | ||
| }, | ||
| angular: { | ||
| files: { | ||
| 'src/app/example.component.html': angular_example_component_html, | ||
| 'src/app/example.component.ts': angular_example_component_ts, | ||
| 'src/global.css': angular_global_css, | ||
| 'src/theme/variables.css': variables_css, | ||
| }, | ||
| }, | ||
| }} | ||
| src="usage/v7/theming/automatic-dark-mode/demo.html" | ||
| devicePreview | ||
| includeIonContent={false} | ||
| /> |
105 changes: 105 additions & 0 deletions
105
static/usage/v7/theming/automatic-dark-mode/javascript.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| ```html | ||
| <html> | ||
| <head> | ||
| <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" /> | ||
| <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" /> | ||
|
|
||
| <script> | ||
| window.Ionic = { | ||
| config: { | ||
| mode: 'ios', | ||
| }, | ||
| }; | ||
| </script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <ion-app> | ||
| <ion-header class="ion-no-border"> | ||
| <ion-toolbar> | ||
| <ion-buttons slot="start"> | ||
| <ion-back-button default-href="#"></ion-back-button> | ||
| </ion-buttons> | ||
| <ion-title>Display</ion-title> | ||
| <ion-buttons slot="end"> | ||
| <ion-button color="dark"> | ||
| <ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon> | ||
| </ion-button> | ||
| </ion-buttons> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
|
|
||
| <ion-content> | ||
| <ion-list-header>Appearance</ion-list-header> | ||
| <ion-list inset="true"> | ||
| <ion-item button="true">Text Size</ion-item> | ||
| <ion-item> | ||
| <ion-toggle justify="space-between">Bold Text</ion-toggle> | ||
| </ion-item> | ||
| </ion-list> | ||
|
|
||
| <ion-list-header>Brightness</ion-list-header> | ||
| <ion-list inset="true"> | ||
| <ion-item> | ||
| <ion-range value="40"> | ||
| <ion-icon name="sunny-outline" slot="start"></ion-icon> | ||
| <ion-icon name="sunny" slot="end"></ion-icon> | ||
| </ion-range> | ||
| </ion-item> | ||
| <ion-item> | ||
| <ion-toggle justify="space-between" checked>True Tone</ion-toggle> | ||
| </ion-item> | ||
| </ion-list> | ||
|
|
||
| <ion-list inset="true"> | ||
| <ion-item button="true"> | ||
| <ion-label>Night Shift</ion-label> | ||
| <ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text> | ||
| </ion-item> | ||
| </ion-list> | ||
| </ion-content> | ||
|
|
||
| <script> | ||
| // Use matchMedia to check the user preference | ||
| const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); | ||
| toggleDarkTheme(prefersDark.matches); | ||
| // Listen for changes to the prefers-color-scheme media query | ||
| prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches)); | ||
| // Add or remove the "dark" class on the document body | ||
| function toggleDarkTheme(shouldAdd) { | ||
| document.body.classList.toggle('dark', shouldAdd); | ||
| } | ||
| </script> | ||
|
|
||
| <style> | ||
| /* | ||
| * Optional CSS | ||
| * ----------------------------------- | ||
| */ | ||
| /* This sets a different background and item background in light mode on ios */ | ||
| .ios body { | ||
| --ion-background-color: #f2f2f6; | ||
| --ion-toolbar-background: var(--ion-background-color); | ||
| --ion-item-background: #fff; | ||
| } | ||
| /* This sets a different background and item background in light mode on md */ | ||
| .md body { | ||
| --ion-background-color: #f9f9f9; | ||
| --ion-toolbar-background: var(--ion-background-color); | ||
| --ion-item-background: #fff; | ||
| } | ||
| /* This is added for the flashing that happens when toggling between themes */ | ||
| ion-item { | ||
| --transition: none; | ||
| } | ||
| </style> | ||
| </ion-app> | ||
| </body> | ||
| </html> | ||
| ``` |
25 changes: 25 additions & 0 deletions
25
static/usage/v7/theming/automatic-dark-mode/react/main_css.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| ```css | ||
| /* | ||
| * Optional CSS | ||
| * ----------------------------------- | ||
| */ | ||
|
|
||
| /* This sets a different background and item background in light mode on ios */ | ||
| .ios body { | ||
| --ion-background-color: #f2f2f6; | ||
| --ion-toolbar-background: var(--ion-background-color); | ||
| --ion-item-background: #fff; | ||
| } | ||
|
|
||
| /* This sets a different background and item background in light mode on md */ | ||
| .md body { | ||
| --ion-background-color: #f9f9f9; | ||
| --ion-toolbar-background: var(--ion-background-color); | ||
| --ion-item-background: #fff; | ||
| } | ||
|
|
||
| /* This is added for the flashing that happens when toggling between themes */ | ||
| ion-item { | ||
| --transition: none; | ||
| } | ||
| ``` |
Oops, something went wrong.
8ad4e0aThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
ionic-docs – ./
ionic-docs-gqykycf8t.vercel.app
ionic-docs-ionic1.vercel.app
ionic-docs-git-main-ionic1.vercel.app