| <style> |
| div { |
| width: 200px; |
| height: 200px; |
| display: inline-block; |
| background-color: green; |
| } |
| .centered { |
| text-align: center; |
| } |
| </style> |
| <body> |
| <table> |
| <tr> |
| <td colspan="3"><h3>light-dark() CSS function</h3></td> |
| </tr> |
| <tr> |
| <td><div></div></td> |
| <td><div></div></td> |
| <td><div></div></td> |
| </tr> |
| <tr> |
| <td><span class="centered">inline SVG</span></td> |
| <td><span class="centered"><img> src</span></td> |
| <td><span class="centered"> CSS background-image</span></td> |
| </tr> |
| <tr> |
| <td colspan="3"><h3>prefers-color-scheme media query</h3></td> |
| </tr> |
| <tr> |
| <td><div></div></td> |
| <td><div></div></td> |
| <td><div></div></td> |
| </tr> |
| <tr> |
| <td><span class="centered">inline SVG</span></td> |
| <td><span class="centered"><img> src</span></td> |
| <td><span class="centered"> CSS background-image</span></td> |
| </tr> |
| </table> |
| </body> |
