spanish-quizzer

commit 549c95858683b4bf83671b70a9184e56b94d6ec2
parent a0974cdbc1a857e62ff803c24674eae1be394b8e
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Tue, 24 Mar 2020 08:15:55 -0700

Merge pull request #6 from AsherMorgan/feature-darkMode

Implement dark mode.
Diffstat:
M
README.md
 | 
1
+
M
Styles.css
 | 
38
++++++++++++++++++++++++++++++++------
M
index.html
 | 
14
++++++++++++--

3 files changed, 45 insertions(+), 8 deletions(-)
diff --git a/README.md b/README.md
@@ -9,6 +9,7 @@ Try it [here](https://ashermorgan.github.io/Spanish-Quizzer/).
 - View the correct answer when you make a mistake.
 - Easily type accented characters (``` a` ``` is converted into ```á```)
 - Easily type tildes (``` n` ``` and ``` n~ ``` are converted into ```ñ```)
+- Dark Mode
 
 ## Vocabulary Sets
 Spanish Quizzer currently supports the following vocabulary sets:
diff --git a/Styles.css b/Styles.css
@@ -1,38 +1,63 @@
+/******** Body styles ********/
 body {
     font-family: Arial, Helvetica, sans-serif;
     text-align: center;
 }
 
 
-#title {
-    font-size: 25px;
-    font-weight: bold;
-    cursor: pointer;
-}
-
 
+/******** Settings styles ********/
 #settingsTable {
     margin: auto;
     text-align: left;
 }
 
+
 .settingsFilter {
     width: 136px;
 }
 
+
 #settingsStart {
     width: 75px;
 }
 
 
+
+/******** Label styles ********/
+#title {
+    font-size: 25px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+
 .label {
     font-weight: bold;
 }
 
+
 .text {
     font-weight: normal;
 }
 
+
 .error {
 	color: red;
 }
+
+
+
+/******** Dark mode styles ********/
+body.dark {
+    background-color: #101010;
+    color: #f0f0f0;
+}
+
+
+.dark button, .dark input, .dark select {
+    background-color: #303030;
+    color: #ffffff;
+    border-color: #ffffff;
+    border-width: 1px;
+}
+\ No newline at end of file
diff --git a/index.html b/index.html
@@ -21,13 +21,13 @@
 
         <div id="settings">
             <br/>
-            <label class="label">Choose the terms that you want to study.</label>
+            <label class="text">Choose your settings and then click start.</label>
             <br/>
             <br/>
             <table id="settingsTable">
                 <tr>
                     <td class="label" colspan="2">Common Words</td> 
-                </tr> 
+                </tr>
                 <tr>
                     <td>
                         <label class="text" for="settingsMode0">Verbs</label>
@@ -284,6 +284,16 @@
                         </select>
                     </td>
                 </tr>
+                <tr><td><br/></td></tr>
+                <tr>
+                    <td class="label" colspan="2">Quizzer Settings</td> 
+                </tr> 
+                <tr>
+                    <td colspan="2">
+                        <input type="checkbox" id="settingsDarkMode" oninput="document.body.classList.toggle('dark');">
+                        <label class="text" for="settingsDarkMode">Dark Mode</label>
+                    </td>
+                </tr>
             </table>
             <br/>
             <button id="settingsStart" onclick="Start()">Start</button>