Skip to content

docs(high-contrast): add documentation #3431

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.

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

Merged
merged 40 commits into from
Feb 13, 2024
Merged
Changes from 1 commit
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
51d3849
docs(high-contrast): add first pass
liamdebeasi Feb 5, 2024
c03b24b
docs: add always playground
liamdebeasi Feb 5, 2024
066a161
typos
liamdebeasi Feb 5, 2024
26d1c49
docs: add to sidebar
liamdebeasi Feb 5, 2024
cee93a2
docs(high-contrast): add system docs
liamdebeasi Feb 5, 2024
12504b0
content clean up
liamdebeasi Feb 5, 2024
028cc3f
content changes
liamdebeasi Feb 5, 2024
35f01f8
add overview, clean up
liamdebeasi Feb 6, 2024
759eb86
chore: clean up
liamdebeasi Feb 6, 2024
4e22fca
chore: clean up
liamdebeasi Feb 6, 2024
f48f7fe
fix imports
liamdebeasi Feb 6, 2024
3b19c23
add class demo
liamdebeasi Feb 6, 2024
70f6314
lint
liamdebeasi Feb 6, 2024
3e3009f
a word
liamdebeasi Feb 6, 2024
ba11cf3
Update high-contrast-mode.md
liamdebeasi Feb 6, 2024
715de6f
add color=“light”
liamdebeasi Feb 6, 2024
ad007e3
update packagejson
liamdebeasi Feb 6, 2024
8f76445
remove commented out files
liamdebeasi Feb 6, 2024
e569314
Update docs/theming/high-contrast-mode.md
liamdebeasi Feb 9, 2024
ea4cfea
Update docs/theming/high-contrast-mode.md
liamdebeasi Feb 9, 2024
baa16e7
note dark mode for high contrast system
liamdebeasi Feb 9, 2024
5d62e64
Update docs/theming/high-contrast-mode.md
liamdebeasi Feb 9, 2024
65b2433
Update docs/theming/high-contrast-mode.md
liamdebeasi Feb 9, 2024
8b1b0fe
fix vue typo
liamdebeasi Feb 9, 2024
895624e
note why we are importing both light and dark themes
liamdebeasi Feb 9, 2024
e462370
show how to import dark always theme
liamdebeasi Feb 9, 2024
bcafcbe
remove extra code
liamdebeasi Feb 9, 2024
484db1b
clean up
liamdebeasi Feb 9, 2024
90ca840
avoid custom titles to avoid linter
liamdebeasi Feb 9, 2024
e46374c
lint
liamdebeasi Feb 9, 2024
31ca911
note default behavior
liamdebeasi Feb 9, 2024
851d6f7
clarify
liamdebeasi Feb 9, 2024
daadec0
clarify customization options
liamdebeasi Feb 12, 2024
3d246bb
Update docs/theming/high-contrast-mode.md
liamdebeasi Feb 12, 2024
025151c
typo
liamdebeasi Feb 12, 2024
225dc62
use css class terminology
liamdebeasi Feb 12, 2024
c27e062
use css term
liamdebeasi Feb 12, 2024
eea4903
another typo
liamdebeasi Feb 12, 2024
5b70e28
consistent links
liamdebeasi Feb 12, 2024
7e623d6
css
liamdebeasi Feb 12, 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
Prev Previous commit
Next Next commit
typos
  • Loading branch information
liamdebeasi committed Feb 5, 2024
commit 066a161702e7e86ffd5c893d6ad976bb256456fe
8 changes: 2 additions & 6 deletions docs/theming/high-contrast-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ There are three provided ways to enable the high contrast theme in an app: **alw

### Always

The default theme provided with Ionic Framework also uses the default color contrast levels. The high contrast theme can be enabled by importing the following stylesheet in the appropriate files:
The default theme provided with Ionic Framework also uses the default color contrast levels. The high contrast theme can be enabled by importing the following stylesheet in the appropriate files. This approach will enable the high contrast theme regardless of a user's preference for high contrast.

<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>

Expand Down Expand Up @@ -60,16 +60,12 @@ import '@ionic/vue/css/themes/high-contrast.always.css';

This sets the [application colors](/docs/theming/themes#application-colors) and [stepped colors](/docs/theming/themes#stepped-colors) on the [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector. The high contrast dark theme can be applied by importing `high-contrast-dark.always.css` instead of `high-contrast.always.css`.

The following example will always display the high contrast light theme, regardless of the system settings for high contrast or dark mode.
The following example will always display the high contrast light theme, regardless of the user's preference for high contrast or dark mode.

import AlwaysHighContrastMode from '@site/static/usage/v8/theming/always-high-contrast-mode/index.md';

<AlwaysHighContrastMode />

:::caution Important
Avoid targeting the `.ios` or `.md` selectors to override the Ionic dark theme, as these classes are added to each component and will take priority over globally defined variables. Instead, we can target the mode-specific classes on the `:root` element.
:::

### System

The system approach to enabling high contrast mode involves checking the system settings for the user's preferred contrast. This is the default when starting a new Ionic Framework app. Importing the following stylesheets in the appropriate file will automatically retrieve the user's preference from the system settings and apply the high contrast theme when high contrast is preferred.
Expand Down