Skip to content

Commit 8ad4e0a

Browse files
brandyscarneyColy010
brandyscarney
and
Coly010
authored
docs(theming): migrate Dark Mode Codepens to playground examples (#3067)
Resolves #2998 Co-authored-by: Colum Ferry <[email protected]>
1 parent 6c5b117 commit 8ad4e0a

21 files changed

+1832
-210
lines changed

‎docs/theming/dark-mode.md

Lines changed: 173 additions & 210 deletions
Large diffs are not rendered by default.

‎static/usage/v7/theming/automatic-dark-mode/angular/example_component_html.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
```html
2+
<ion-header class="ion-no-border">
3+
<ion-toolbar>
4+
<ion-buttons slot="start">
5+
<ion-back-button default-href="#"></ion-back-button>
6+
</ion-buttons>
7+
<ion-title>Display</ion-title>
8+
<ion-buttons slot="end">
9+
<ion-button color="dark">
10+
<ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon>
11+
</ion-button>
12+
</ion-buttons>
13+
</ion-toolbar>
14+
</ion-header>
15+
16+
<ion-content>
17+
<ion-list-header>Appearance</ion-list-header>
18+
<ion-list [inset]="true">
19+
<ion-item [button]="true">Text Size</ion-item>
20+
<ion-item>
21+
<ion-toggle justify="space-between">Bold Text</ion-toggle>
22+
</ion-item>
23+
</ion-list>
24+
25+
<ion-list-header>Brightness</ion-list-header>
26+
<ion-list [inset]="true">
27+
<ion-item>
28+
<ion-range value="40">
29+
<ion-icon name="sunny-outline" slot="start"></ion-icon>
30+
<ion-icon name="sunny" slot="end"></ion-icon>
31+
</ion-range>
32+
</ion-item>
33+
<ion-item>
34+
<ion-toggle justify="space-between" checked>True Tone</ion-toggle>
35+
</ion-item>
36+
</ion-list>
37+
38+
<ion-list [inset]="true">
39+
<ion-item [button]="true">
40+
<ion-label>Night Shift</ion-label>
41+
<ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>
42+
</ion-item>
43+
</ion-list>
44+
</ion-content>
45+
```

‎static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
```ts
2+
import { Component, OnInit } from '@angular/core';
3+
4+
@Component({
5+
selector: 'app-example',
6+
templateUrl: 'example.component.html',
7+
})
8+
export class ExampleComponent implements OnInit {
9+
ngOnInit() {
10+
// Use matchMedia to check the user preference
11+
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
12+
13+
this.toggleDarkTheme(prefersDark.matches);
14+
15+
// Listen for changes to the prefers-color-scheme media query
16+
prefersDark.addEventListener('change', (mediaQuery) => this.toggleDarkTheme(mediaQuery.matches));
17+
}
18+
19+
// Add or remove the "dark" class on the document body
20+
toggleDarkTheme(shouldAdd) {
21+
document.body.classList.toggle('dark', shouldAdd);
22+
}
23+
}
24+
```

‎static/usage/v7/theming/automatic-dark-mode/angular/global_css.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
```css
2+
/*
3+
* Optional CSS
4+
* -----------------------------------
5+
*/
6+
7+
/* This sets a different background and item background in light mode on ios */
8+
.ios body {
9+
--ion-background-color: #f2f2f6;
10+
--ion-toolbar-background: var(--ion-background-color);
11+
--ion-item-background: #fff;
12+
}
13+
14+
/* This sets a different background and item background in light mode on md */
15+
.md body {
16+
--ion-background-color: #f9f9f9;
17+
--ion-toolbar-background: var(--ion-background-color);
18+
--ion-item-background: #fff;
19+
}
20+
21+
/* This is added for the flashing that happens when toggling between themes */
22+
ion-item {
23+
--transition: none;
24+
}
25+
```

‎static/usage/v7/theming/automatic-dark-mode/demo.html

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Theming</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
</head>
12+
13+
<body>
14+
<ion-app>
15+
<ion-header class="ion-no-border">
16+
<ion-toolbar>
17+
<ion-buttons slot="start">
18+
<ion-back-button default-href="#"></ion-back-button>
19+
</ion-buttons>
20+
<ion-title>Display</ion-title>
21+
<ion-buttons slot="end">
22+
<ion-button color="dark">
23+
<ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon>
24+
</ion-button>
25+
</ion-buttons>
26+
</ion-toolbar>
27+
</ion-header>
28+
29+
<ion-content>
30+
<ion-list-header>Appearance</ion-list-header>
31+
<ion-list inset="true">
32+
<ion-item button="true">Text Size</ion-item>
33+
<ion-item>
34+
<ion-toggle justify="space-between">Bold Text</ion-toggle>
35+
</ion-item>
36+
</ion-list>
37+
38+
<ion-list-header>Brightness</ion-list-header>
39+
<ion-list inset="true">
40+
<ion-item>
41+
<ion-range value="40">
42+
<ion-icon name="sunny-outline" slot="start"></ion-icon>
43+
<ion-icon name="sunny" slot="end"></ion-icon>
44+
</ion-range>
45+
</ion-item>
46+
<ion-item>
47+
<ion-toggle justify="space-between" checked>True Tone</ion-toggle>
48+
</ion-item>
49+
</ion-list>
50+
51+
<ion-list inset="true">
52+
<ion-item button="true">
53+
<ion-label>Night Shift</ion-label>
54+
<ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>
55+
</ion-item>
56+
</ion-list>
57+
</ion-content>
58+
</ion-app>
59+
60+
<script>
61+
// Use matchMedia to check the user preference
62+
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
63+
64+
// Listen for changes to the prefers-color-scheme media query
65+
prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches));
66+
67+
// Add or remove the "dark" class on the document body
68+
function toggleDarkTheme(shouldAdd) {
69+
document.body.classList.toggle('dark', shouldAdd);
70+
}
71+
</script>
72+
73+
<style>
74+
/*
75+
* Optional CSS
76+
* -----------------------------------
77+
*/
78+
79+
/* This sets a different background and item background in light mode on ios */
80+
.ios body {
81+
--ion-background-color: #f2f2f6;
82+
--ion-toolbar-background: var(--ion-background-color);
83+
--ion-item-background: #fff;
84+
}
85+
86+
/* This sets a different background and item background in light mode on md */
87+
.md body {
88+
--ion-background-color: #f9f9f9;
89+
--ion-toolbar-background: var(--ion-background-color);
90+
--ion-item-background: #fff;
91+
}
92+
93+
/* This sets a different item background in dark mode on ios */
94+
.ios body.dark {
95+
--ion-item-background: #1c1c1d;
96+
}
97+
98+
/* This is added for the flashing that happens when toggling between themes */
99+
ion-item {
100+
--transition: none;
101+
}
102+
</style>
103+
</body>
104+
</html>

‎static/usage/v7/theming/automatic-dark-mode/index.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript_index_html from './javascript.md';
4+
5+
import react_main_tsx from './react/main_tsx.md';
6+
import react_main_css from './react/main_css.md';
7+
8+
import vue from './vue.md';
9+
10+
import angular_example_component_html from './angular/example_component_html.md';
11+
import angular_example_component_ts from './angular/example_component_ts.md';
12+
import angular_global_css from './angular/global_css.md';
13+
14+
import variables_css from './theme/variables_css.md';
15+
16+
<Playground
17+
version="7"
18+
code={{
19+
javascript: {
20+
files: {
21+
'index.html': javascript_index_html,
22+
'theme/variables.css': variables_css,
23+
},
24+
},
25+
react: {
26+
files: {
27+
'src/main.tsx': react_main_tsx,
28+
'src/main.css': react_main_css,
29+
'src/theme/variables.css': variables_css,
30+
},
31+
},
32+
vue: {
33+
files: {
34+
'src/components/Example.vue': vue,
35+
'src/theme/variables.css': variables_css,
36+
},
37+
},
38+
angular: {
39+
files: {
40+
'src/app/example.component.html': angular_example_component_html,
41+
'src/app/example.component.ts': angular_example_component_ts,
42+
'src/global.css': angular_global_css,
43+
'src/theme/variables.css': variables_css,
44+
},
45+
},
46+
}}
47+
src="usage/v7/theming/automatic-dark-mode/demo.html"
48+
devicePreview
49+
includeIonContent={false}
50+
/>

‎static/usage/v7/theming/automatic-dark-mode/javascript.md

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
```html
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
5+
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />
6+
7+
<script>
8+
window.Ionic = {
9+
config: {
10+
mode: 'ios',
11+
},
12+
};
13+
</script>
14+
</head>
15+
16+
<body>
17+
<ion-app>
18+
<ion-header class="ion-no-border">
19+
<ion-toolbar>
20+
<ion-buttons slot="start">
21+
<ion-back-button default-href="#"></ion-back-button>
22+
</ion-buttons>
23+
<ion-title>Display</ion-title>
24+
<ion-buttons slot="end">
25+
<ion-button color="dark">
26+
<ion-icon slot="icon-only" ios="person-circle-outline" md="person-circle"></ion-icon>
27+
</ion-button>
28+
</ion-buttons>
29+
</ion-toolbar>
30+
</ion-header>
31+
32+
<ion-content>
33+
<ion-list-header>Appearance</ion-list-header>
34+
<ion-list inset="true">
35+
<ion-item button="true">Text Size</ion-item>
36+
<ion-item>
37+
<ion-toggle justify="space-between">Bold Text</ion-toggle>
38+
</ion-item>
39+
</ion-list>
40+
41+
<ion-list-header>Brightness</ion-list-header>
42+
<ion-list inset="true">
43+
<ion-item>
44+
<ion-range value="40">
45+
<ion-icon name="sunny-outline" slot="start"></ion-icon>
46+
<ion-icon name="sunny" slot="end"></ion-icon>
47+
</ion-range>
48+
</ion-item>
49+
<ion-item>
50+
<ion-toggle justify="space-between" checked>True Tone</ion-toggle>
51+
</ion-item>
52+
</ion-list>
53+
54+
<ion-list inset="true">
55+
<ion-item button="true">
56+
<ion-label>Night Shift</ion-label>
57+
<ion-text slot="end" color="medium">9:00 PM to 8:00 AM</ion-text>
58+
</ion-item>
59+
</ion-list>
60+
</ion-content>
61+
62+
<script>
63+
// Use matchMedia to check the user preference
64+
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
65+
66+
toggleDarkTheme(prefersDark.matches);
67+
68+
// Listen for changes to the prefers-color-scheme media query
69+
prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches));
70+
71+
// Add or remove the "dark" class on the document body
72+
function toggleDarkTheme(shouldAdd) {
73+
document.body.classList.toggle('dark', shouldAdd);
74+
}
75+
</script>
76+
77+
<style>
78+
/*
79+
* Optional CSS
80+
* -----------------------------------
81+
*/
82+
83+
/* This sets a different background and item background in light mode on ios */
84+
.ios body {
85+
--ion-background-color: #f2f2f6;
86+
--ion-toolbar-background: var(--ion-background-color);
87+
--ion-item-background: #fff;
88+
}
89+
90+
/* This sets a different background and item background in light mode on md */
91+
.md body {
92+
--ion-background-color: #f9f9f9;
93+
--ion-toolbar-background: var(--ion-background-color);
94+
--ion-item-background: #fff;
95+
}
96+
97+
/* This is added for the flashing that happens when toggling between themes */
98+
ion-item {
99+
--transition: none;
100+
}
101+
</style>
102+
</ion-app>
103+
</body>
104+
</html>
105+
```

‎static/usage/v7/theming/automatic-dark-mode/react/main_css.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
```css
2+
/*
3+
* Optional CSS
4+
* -----------------------------------
5+
*/
6+
7+
/* This sets a different background and item background in light mode on ios */
8+
.ios body {
9+
--ion-background-color: #f2f2f6;
10+
--ion-toolbar-background: var(--ion-background-color);
11+
--ion-item-background: #fff;
12+
}
13+
14+
/* This sets a different background and item background in light mode on md */
15+
.md body {
16+
--ion-background-color: #f9f9f9;
17+
--ion-toolbar-background: var(--ion-background-color);
18+
--ion-item-background: #fff;
19+
}
20+
21+
/* This is added for the flashing that happens when toggling between themes */
22+
ion-item {
23+
--transition: none;
24+
}
25+
```

0 commit comments

Comments
 (0)