Created
January 9, 2023 13:10
-
-
Save Maxim-Kolmogorov/cca0e0b7e5b4e77ee8a241c5571a52e1 to your computer and use it in GitHub Desktop.
CSS dark mode support.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
<style> | |
header { | |
display: flex; | |
justify-content: space-between; | |
font-size: 20px; | |
font-weight: bold; | |
margin-bottom: 2em; | |
} | |
@media (prefers-color-scheme: dark) { | |
html { | |
background-color: black; | |
color: white; | |
} | |
} | |
</style> | |
</head> | |
<header> | |
<div>Item 1</div> | |
<div>Item 2</div> | |
<div>Item 3</div> | |
</header> | |
<body> | |
<h1>Title 1</h1> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget risus congue, pharetra nunc sit amet, sodales magna. Mauris in augue lacus. Aliquam erat volutpat. Pellentesque erat dolor, ornare sed sapien at, suscipit sagittis tortor. Maecenas mattis maximus mauris a cursus. Praesent bibendum sem nec maximus aliquet. Vivamus nec odio vel nunc dapibus hendrerit semper eget mi. Vivamus eu volutpat metus. Aenean eu sollicitudin velit. Morbi varius metus non nulla fringilla, feugiat luctus leo tempus. Maecenas tincidunt lorem nisi, a tincidunt velit sodales sit amet.</p> | |
<p>Nullam nec dolor arcu. Maecenas viverra eleifend bibendum. Nunc nibh neque, malesuada quis tincidunt eget, hendrerit in diam. Aliquam erat volutpat. Fusce vehicula nisi ut libero ornare mollis. Donec interdum in nunc ut mattis. Sed eget arcu sem. Nulla ut laoreet orci, a aliquam ante. Suspendisse laoreet massa at diam gravida vulputate.</p> | |
<p>Praesent pellentesque sagittis dui, in pellentesque neque dictum ultricies. Duis eget placerat mauris. Etiam vitae metus dolor. Donec rhoncus iaculis ultricies. Proin accumsan urna nec orci mattis ornare. Integer in pellentesque orci, nec eleifend lectus. Cras varius, augue in elementum finibus, mi enim aliquet orci, ac fermentum massa dui id lacus.</p> | |
<h2>Title 2</h2> | |
<p>Ut tempor nisl a sapien tristique, quis aliquet elit tempus. Fusce in nisi quis libero semper pellentesque ac eu quam. Morbi egestas, enim molestie pulvinar molestie, ex sem varius mi, ut condimentum velit ante in leo. Nam aliquet vitae nisi ut cursus. Sed sodales non justo vel porttitor. Integer vitae lacus vitae justo suscipit vehicula sit amet eu est. Duis vitae commodo est, ut pellentesque magna. Duis id convallis lacus, in ultricies turpis. Aenean vitae dignissim nisi, eget molestie massa. Sed maximus, nunc ut ullamcorper feugiat, massa libero tempor risus, in mattis diam arcu et est. Morbi vehicula fringilla risus non tempus. Vivamus justo est, lobortis sed malesuada at, pharetra et purus. Phasellus quis urna dictum, tristique enim sit amet, venenatis risus. Fusce facilisis finibus sem, sed pulvinar nunc pulvinar venenatis.</p> | |
<p>Vestibulum sed urna sollicitudin justo efficitur consectetur. Sed ultricies justo eget urna fermentum ultricies eu vel mauris. Morbi aliquet scelerisque odio eu porta. Integer libero libero, sagittis sed cursus ac, congue id diam. Vivamus congue leo mauris, in maximus eros rhoncus quis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer tincidunt leo nibh, id aliquet sem congue eget. Pellentesque et justo tempus, euismod tellus non, auctor nisi. Nulla sed ullamcorper magna. In sed congue purus. Nunc et diam ut velit ultricies condimentum non vel odio.</p> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment