Skip to content

Instantly share code, notes, and snippets.

@mr4torr

mr4torr/dark-mode.html

Last active September 11, 2019 22:11
Show Gist options
  • Save mr4torr/eb50b99c41c5eda3464dab3cc22a914d to your computer and use it in GitHub Desktop.
Save mr4torr/eb50b99c41c5eda3464dab3cc22a914d to your computer and use it in GitHub Desktop.
Download ZIP
dark mode icon svg ( https://codesandbox.io/s/ody79 )
Raw
dark-mode.html
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<style>
.row {
display: flex;
}
.icon {
padding: 10px;
flex: 1;
}
.bg-dark {
background: #3c4043;
}
.mode-light {
fill: #e8eaed;
}
.mode-dark {
fill: #3c4043;
}
</style>
</head>
<body>
<div class="row">
<div class="icon">
<svg class="dark-mode mode-dark" viewBox="0 0 24 24">
<path
d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6c3.31 0 6 2.69 6 6s-2.69 6-6 6z"
></path>
<path d="M0 0h24v24H0V0z" fill="none"></path>
</svg>
</div>
<div class="icon bg-dark">
<svg class="dark-mode mode-light" viewBox="0 0 24 24">
<path
d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zm-2 5.79V18h-3.52L12 20.48 9.52 18H6v-3.52L3.52 12 6 9.52V6h3.52L12 3.52 14.48 6H18v3.52L20.48 12 18 14.48zM12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5z"
></path>
<path d="M0 0h24v24H0V0z" fill="none"></path>
</svg>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment