Skip to content

Commit

Permalink
Add invert dark to docs
Browse files Browse the repository at this point in the history
  • Loading branch information
jorg-vr committed Jul 1, 2024
1 parent 52c7444 commit d86486c
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 0 deletions.
4 changes: 4 additions & 0 deletions en/references/exercise-description/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -175,14 +175,18 @@ You can also include tables or other elements in a centered group.

If you want to use separate images for light mode and dark mode (e.g. with a different background color) you can add the `light-only` or `dark-only` class to the image. The `light-only` class will only show the image when light mode is used while the `dark-only` class will only show the image when dark mode is used. These classes also work for other HTML elements.

You can also invert an image for dark mode by adding the `invert-dark` class.

```html
<img src="dark-image.jpg" class="dark-only" />
<img src="light-image.jpg" class="light-only" />
<img src="invertable-image.jpg" class="dark-invert" />
```

```markdown
[Show image](dark-image.jpg){: .dark-only}
[Show image](light-image.jpg){: .light-only}
[Show image](invertable-image.jpg){: .dark-invert}
```

## Tables
Expand Down
4 changes: 4 additions & 0 deletions nl/references/exercise-description/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -174,14 +174,18 @@ Naast afbeeldingen kan je ook tabellen en andere elementen in een gecentreerde g

Als je een aparte afbeelding wil gebruiken voor lichte modus en donkere modus (bv. met een andere achtergrondkleur), dan kan je de `light-only` of `dark-only` klassen toevoegen aan een afbeelding. De `light-only` klasse zal de afbeelding enkel tonen in lichte modus terwijl de `dark-only` class de afbeelding enkel zal tonen in donkere modus. Deze klassen werken ook voor andere HTML-elementen.

Je kan een afbeelding ook inverteren in dark mode door de `dark-invert` klasse toe te voegen.

```html
<img src="dark-image.jpg" class="dark-only" />
<img src="light-image.jpg" class="light-only" />
<img src="invertable-image.jpg" class="dark-invert" />
```

```markdown
[Show image](dark-image.jpg){: .dark-only}
[Show image](light-image.jpg){: .light-only}
[Show image](invertable-image.jpg){: .dark-invert}
```

---
Expand Down

0 comments on commit d86486c

Please sign in to comment.