Skip to content

Commit

Permalink
Add dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
ZMYaro committed May 3, 2021
1 parent 658238f commit 4d25e7c
Show file tree
Hide file tree
Showing 6 changed files with 259 additions and 6 deletions.
Binary file removed imgs/info.png
Binary file not shown.
1 change: 1 addition & 0 deletions imgs/info.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 6 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,19 @@
<link rel="stylesheet" type="text/css" href="styles/material-elements.css" />
<link rel="stylesheet" type="text/css" href="styles/material-depth.css" />
<link rel="stylesheet" type="text/css" href="styles/material-widgets.css" />
<link rel="stylesheet" type="text/css" href="styles/material-dark.css" media="(prefers-color-scheme: dark)" />
<link rel="stylesheet" type="text/css" href="styles/styles.css" />

<script type="text/javascript" src="scripts/material-touch.js"></script>
<script type="text/javascript" src="scripts/game.js"></script>
</head>
<body>
<div role="toolbar" class="appBar">
<button title="About" id="aboutBtn"><img src="imgs/info.png" alt="About" /></button>
<button title="About" id="aboutBtn">
<svg role="img" aria-label="About">
<use href="imgs/info.svg#icon" xlink:href="imgs/info.svg#icon"></use>
</svg>
</button>
</div>
<div class="view active" id="gameScreen">
<h1>Choose one.</h1>
Expand Down
7 changes: 4 additions & 3 deletions manifest.appcache
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
CACHE MANIFEST
# 2017-01-01, v1
# 2020-05-03, v1
index.html
imgs/info.png
imgs/info.svg
scripts/game.js
scripts/material-touch.js
styles/material-elements.css
styles/material-dark.css
styles/material-depth.css
styles/material-elements.css
styles/material-widgets.css
styles/styles.css
227 changes: 227 additions & 0 deletions styles/material-dark.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
/* Base Material styles for dark theme
* Part of the MaterialZ CSS library
*
* Copyright 2015-2021 Zachary Yaro
* Released under the MIT license
* https://materialz.dev/LICENSE.txt
*/

@charset "UTF-8";

body {
background-color: #121212;
color: #ffffff;
}

/* --------======== BUTTONS and DROP-DOWNS ========-------- */
select {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAIAgMAAADCRZTUAAAACVBMVEUAAAD///////9zeKVjAAAAAnRSTlMAgJsrThgAAAAySURBVAjXY8hatWolAwxIrVq1BM5hW7VqApzDuGqVAwMcZAG1IDQBtSA0AbUgNCG0AAD8iAqhtDTiaAAAAABJRU5ErkJggg==);
}
button:not(:disabled):hover,
button:focus,
[role="button"]:not(:disabled):hover,
[role="button"]:focus,
input[type="button"]:not(:disabled):hover,
input[type="button"]:focus,
input[type="submit"]:not(:disabled):hover,
input[type="submit"]:focus,
input[type="reset"]:not(:disabled):hover,
input[type="reset"]:focus,
select:not(:disabled):hover,
select:focus {
background-color: #313131;
background-color: rgba(128, 128, 128, 0.2);
}
/* The “active” class is used to force the appearance of the active/pressed state */
button:not(:disabled):active,
button:not(:disabled).active,
[role="button"]:not(:disabled):active,
[role="button"]:not(:disabled).active,
input[type="button"]:not(:disabled):active,
input[type="button"]:not(:disabled).active,
input[type="submit"]:not(:disabled):active,
input[type="submit"]:not(:disabled).active,
input[type="reset"]:not(:disabled):active,
input[type="reset"]:not(:disabled).active,
select:not(:disabled):active,
select:not(:disabled).active {
background-color: #444444;
background-color: rgba(128, 128, 128, 0.4);
}

/* --------======== RADIO BUTTONS AND CHECKBOXES ========-------- */
input[type="checkbox"]::after {
border-color: #1d1d1d;
}

/* --------======== TEXT FIELDS ========-------- */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
textarea,
select[size] {
border-bottom-color: #c8c8c8;
}

/* --------======== TOOLBARS ========-------- */
[role="toolbar"] button [role="img"],
[role="toolbar"] [role="button"] [role="img"],
[role="toolbar"] input[type="button"] [role="img"],
[role="toolbar"] input[type="submit"] [role="img"],
[role="toolbar"] input[type="reset"] [role="img"] {
fill: rgba(255, 255, 255, 0.9);
}

/* --------======== LISTS ========-------- */
.list li {
border-color: #363636;
border-color: rgba(128, 128, 128, 0.25);
}

/* --------======== CARDS ========-------- */
.card,
.card.z1 {
background-color: #1d1d1d;
}
button.z1,
button.z2,
button.z3,
button.z4,
button.z5,
[role="button"].z1,
[role="button"].z2,
[role="button"].z3,
[role="button"].z4,
[role="button"].z5 ,
input[type="button"].z1,
input[type="button"].z2,
input[type="button"].z3,
input[type="button"].z4,
input[type="button"].z5,
input[type="submit"].z1,
input[type="submit"].z2,
input[type="submit"].z3,
input[type="submit"].z4,
input[type="submit"].z5,
input[type="reset"].z1,
input[type="reset"].z2,
input[type="reset"].z3,
input[type="reset"].z4,
input[type="reset"].z5 {
background-color: #212121;
}
.card.z2,
button.z1:hover,
button.z2:hover,
button.z3:hover,
button.z4:hover,
button.z5:hover,
[role="button"].z1:hover,
[role="button"].z2:hover,
[role="button"].z3:hover,
[role="button"].z4:hover,
[role="button"].z5:hover,
input[type="button"].z1:hover,
input[type="button"].z2:hover,
input[type="button"].z3:hover,
input[type="button"].z4:hover,
input[type="button"].z5:hover,
input[type="submit"].z1:hover,
input[type="submit"].z2:hover,
input[type="submit"].z3:hover,
input[type="submit"].z4:hover,
input[type="submit"].z5:hover,
input[type="reset"].z1:hover,
input[type="reset"].z2:hover,
input[type="reset"].z3:hover,
input[type="reset"].z4:hover,
input[type="reset"].z5:hover,
button.z1:focus,
button.z2:focus,
button.z3:focus,
button.z4:focus,
button.z5:focus,
[role="button"].z1:focus,
[role="button"].z2:focus,
[role="button"].z3:focus,
[role="button"].z4:focus,
[role="button"].z5:focus,
input[type="button"].z1:focus,
input[type="button"].z2:focus,
input[type="button"].z3:focus,
input[type="button"].z4:focus,
input[type="button"].z5:focus,
input[type="submit"].z1:focus,
input[type="submit"].z2:focus,
input[type="submit"].z3:focus,
input[type="submit"].z4:focus,
input[type="submit"].z5:focus,
input[type="reset"].z1:focus,
input[type="reset"].z2:focus,
input[type="reset"].z3:focus,
input[type="reset"].z4:focus,
input[type="reset"].z5:focus {
background-color: #272727;
}
.card.z3,
button.z1:not(:disabled):active,
button.z2:not(:disabled):active,
button.z3:not(:disabled):active,
button.z4:not(:disabled):active,
button.z5:not(:disabled):active,
[role="button"].z1:active,
[role="button"].z2:active,
[role="button"].z3:active,
[role="button"].z4:active,
[role="button"].z5:active,
input[type="button"].z1:not(:disabled):active,
input[type="button"].z2:not(:disabled):active,
input[type="button"].z3:not(:disabled):active,
input[type="button"].z4:not(:disabled):active,
input[type="button"].z5:not(:disabled):active,
input[type="submit"].z1:not(:disabled):active,
input[type="submit"].z2:not(:disabled):active,
input[type="submit"].z3:not(:disabled):active,
input[type="submit"].z4:not(:disabled):active,
input[type="submit"].z5:not(:disabled):active,
input[type="reset"].z1:not(:disabled):active,
input[type="reset"].z2:not(:disabled):active,
input[type="reset"].z3:not(:disabled):active,
input[type="reset"].z4:not(:disabled):active,
input[type="reset"].z5:not(:disabled):active,
button.z1:not(:disabled).active,
button.z2:not(:disabled).active,
button.z3:not(:disabled).active,
button.z4:not(:disabled).active,
button.z5:not(:disabled).active,
[role="button"].z1.active,
[role="button"].z2.active,
[role="button"].z3.active,
[role="button"].z4.active,
[role="button"].z5.active,
input[type="button"].z1:not(:disabled).active,
input[type="button"].z2:not(:disabled).active,
input[type="button"].z3:not(:disabled).active,
input[type="button"].z4:not(:disabled).active,
input[type="button"].z5:not(:disabled).active,
input[type="submit"].z1:not(:disabled).active,
input[type="submit"].z2:not(:disabled).active,
input[type="submit"].z3:not(:disabled).active,
input[type="submit"].z4:not(:disabled).active,
input[type="submit"].z5:not(:disabled).active,
input[type="reset"].z1:not(:disabled).active,
input[type="reset"].z2:not(:disabled).active,
input[type="reset"].z3:not(:disabled).active,
input[type="reset"].z4:not(:disabled).active,
input[type="reset"].z5:not(:disabled).active {
background-color: #2d2d2d;
}
.card.z4 {
background-color: #353535;
}
.card.z5 {
background-color: #373737;
}
23 changes: 21 additions & 2 deletions styles/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@
}
.appBar[role="toolbar"] button:enabled:hover,
.appBar[role="toolbar"] button:enabled:focus {
background-color: rgba(0,0,0,0.07);
background-color: rgba(0, 0, 0, 0.07);
}
.appBar[role="toolbar"] button:enabled:active {
background-color: rgba(0,0,0,0.13);
background-color: rgba(0, 0, 0, 0.13);
}

#aboutBtn {
Expand Down Expand Up @@ -75,6 +75,25 @@
width: 256px;
}

@media (prefers-color-scheme: dark) {
.appBar[role="toolbar"] button:enabled:hover,
.appBar[role="toolbar"] button:enabled:focus {
background-color: rgba(255, 255, 255, 0.07);
}
.appBar[role="toolbar"] button:enabled:active {
background-color: rgba(255, 255, 255, 0.13);
}
.view {
background-color: #121212; /* MaterialZ dark background */
}
.view button {
background-color: #2d2d2d;
}
.view button.z1:active,
.view button.z1.active {
background-color: #353535;
}
}
@media (max-width: 600px) {
.view h1 {
font-size: 300%;
Expand Down

0 comments on commit 4d25e7c

Please sign in to comment.