Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(theming): update dark mode guide with new dark theme files and playgrounds #3384

Merged
merged 23 commits into from
Jan 23, 2024
Merged

feat(theming): update dark mode guide with new dark theme files and playgrounds #3384

Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
b07fd82
feat(theming): add the dark mode playground for system dark theme
brandyscarney Jan 12, 2024
2ab7915
feat(theming): add the dark mode playground for always dark theme
brandyscarney Jan 12, 2024
e4732c1
feat(theming): add the dark mode playground for class dark theme
brandyscarney Jan 12, 2024
79ac39a
docs(theming): fix css styles to target body
brandyscarney Jan 15, 2024
ba7b26a
fix(playgrounds): update common to add new dark theme class
brandyscarney Jan 15, 2024
17e1850
fix(theming): move dark mode overrides to the variables css file
brandyscarney Jan 15, 2024
ce1e0a3
style: lint
brandyscarney Jan 15, 2024
f0f3914
docs(dark-mode): initial check in of updated docs
brandyscarney Jan 16, 2024
3fb7daf
fix(theming): update to use new theme selectors
brandyscarney Jan 16, 2024
6c3987a
style: clarify comments for variables and style imports files
brandyscarney Jan 16, 2024
17021cb
docs(dark-mode): update Ionic Dark Theme section with new files
brandyscarney Jan 16, 2024
dffe77d
fix(theming): add a custom variable that is not mode-specific
brandyscarney Jan 16, 2024
14f36a9
style: lint
brandyscarney Jan 16, 2024
bf2b4c2
fix(playgrounds): include the dark class file for all playground demos
brandyscarney Jan 16, 2024
35e12c5
Merge branch 'feature-8.0' into FW-5788
brandyscarney Jan 16, 2024
1b3749a
docs(dark-mode): remove tilde
brandyscarney Jan 17, 2024
b97806d
docs(dark-mode): remove tilde
brandyscarney Jan 18, 2024
17ee56c
docs(dark-mode): remove tilde and fix quotes
brandyscarney Jan 18, 2024
a00ba11
docs(theming): update dark mode to remove info blocks
brandyscarney Jan 18, 2024
693d72b
docs(theming): update css variables
brandyscarney Jan 19, 2024
65fd8cb
docs(theming): add back info blocks
brandyscarney Jan 22, 2024
8dbfaad
docs(dark-mode): remove tilde
brandyscarney Jan 22, 2024
f0362ad
docs(dark-mode): fix quotes
brandyscarney Jan 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/theming/css-variables.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
```
Expand Down
627 changes: 508 additions & 119 deletions docs/theming/dark-mode.md
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions static/code/stackblitz/v8/angular/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
}
2 changes: 1 addition & 1 deletion static/code/stackblitz/v8/angular/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
/**
* Ionic Dark Theme
* -----------------------------------------------------
* For more info, please see:
* For more information, please see:
* https://ionicframework.com/docs/theming/dark-mode
*/

Expand Down
4 changes: 2 additions & 2 deletions static/code/stackblitz/v8/html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<html>

<head>
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7.6.2-dev.11704998705.1e1f9850/css/core.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7.6.2-dev.11704998705.1e1f9850/css/ionic.bundle.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7.6.2-dev.11705355381.14b22962/css/core.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7.6.2-dev.11705355381.14b22962/css/ionic.bundle.css" />
</head>

<body>
Expand Down
2 changes: 1 addition & 1 deletion static/code/stackblitz/v8/html/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/

Expand Down
4 changes: 2 additions & 2 deletions static/code/stackblitz/v8/html/index.withContent.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<html>

<head>
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7.6.2-dev.11704998705.1e1f9850/css/core.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7.6.2-dev.11704998705.1e1f9850/css/ionic.bundle.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7.6.2-dev.11705355381.14b22962/css/core.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7.6.2-dev.11705355381.14b22962/css/ionic.bundle.css" />
</head>

<body>
Expand Down
2 changes: 1 addition & 1 deletion static/code/stackblitz/v8/html/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"dependencies": {
"@ionic/core": "7.6.2-dev.11704998705.1e1f9850"
"@ionic/core": "7.6.2-dev.11705355381.14b22962"
}
}
2 changes: 1 addition & 1 deletion static/code/stackblitz/v8/react/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/

Expand Down
2 changes: 1 addition & 1 deletion static/code/stackblitz/v8/react/app.withContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/

Expand Down
36 changes: 18 additions & 18 deletions static/code/stackblitz/v8/react/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions static/code/stackblitz/v8/react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion static/code/stackblitz/v8/vue/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/

Expand Down
36 changes: 18 additions & 18 deletions static/code/stackblitz/v8/vue/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions static/code/stackblitz/v8/vue/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
Loading