Skip to content

Commit

Permalink
Merge pull request #435 from dodona-edu/enhace/add-invert-dark
Browse files Browse the repository at this point in the history
Add invert dark to docs
  • Loading branch information
jorg-vr authored Jul 1, 2024
2 parents 52c7444 + d86486c commit c28d6b1
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 c28d6b1

Please sign in to comment.