Merge pull request #34 from Hareesh0-inf/darkmode

Added Darkmode

src/static/darkmode.js

@@ -0,0 +1,20 @@
+
+function addDarkmodeWidget() {
+const options = {
+    bottom: '64px', // default: '32px'
+    right: '32px', // default: '32px'
+    left: 'unset', // default: 'unset'
+    time: '0.5s', // default: '0.3s'
+    mixColor: '#e5e5e5', // default: '#fff'    
+    backgroundColor: '#fff',  // default: '#fff'
+    buttonColorDark: '#fff',  // default: '#100f2c'
+    buttonColorLight: '#3C3D37', // default: '#fff'
+    saveInCookies: true, // default: true,
+    label: '🌖', // default: ''
+    autoMatchOsTheme: true // default: true
+  }
+
+const darkmode = new Darkmode(options);
+darkmode.showWidget();
+}
+window.addEventListener('load', addDarkmodeWidget);

src/static/style.css

@@ -35,6 +35,14 @@ h1 {
     border: 1px solid #ccc;
 }
 
+.darkmode--activated .candidate-select {
+    border: 1px solid #787878;
+}
+
+.candidate-select:hover {
+    background-color:  #E0E0E0;
+}
+
 .count {
     margin: 1.3rem 0;
 }
@@ -62,11 +70,10 @@ h1 {
 }
 
 .vote-results th, .vote-results td {
-    border: 1px solid #ddd;
+    border: 1px solid #000000;
     padding: 8px;
     text-align: center;
 }
-
 .vote-results th {
     background-color: #007bff;
     color: white;
@@ -124,6 +131,18 @@ h1 {
     margin-bottom: 20px;
 }
 
+.darkmode--activated .input-field {
+    padding: 10px;
+    font-size: 16px;
+    border-radius: 4px;
+    border: 1px solid #787878;
+    margin-bottom: 20px;
+}
+
+.input-field:hover {
+    background-color: #D5D5D5;
+}
+
 .btn-submit {
     padding: 10px 20px;
     background-color: #007bff;

src/templates/index.html

@@ -50,7 +50,9 @@ <h3>Vote Counts:</h3>
     <!-- Bootstrap JS & Popper.js -->
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
-
+    <!-- Script for Darkmode -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
+    <script src="../static/darkmode.js"></script>
     <!-- Script to handle voting functionality -->
     <script>
         document.getElementById("voteButton").addEventListener("click", function() {

src/templates/login.html

@@ -40,4 +40,7 @@ <h2>Login</h2>
         <p>Don't have an account? <a href="/register">Register here</a>.</p>
     </div>
 </body>
+<!-- Script for Darkmode -->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
+<script src="../static/darkmode.js"></script>
 </html>

src/templates/register.html

@@ -27,4 +27,7 @@ <h2>Register</h2>
         <p>Already have an account? <a href="/login">Login here</a>.</p>
     </div>
 </body>
+<!-- Script for Darkmode -->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
+<script src="../static/darkmode.js"></script>
 </html>

src/templates/results.html

@@ -38,4 +38,7 @@ <h2>Winner(s):</h2>
         <a href="/logout" class="btn-logout">Logout</a>
     </div>
 </body>
+<!-- Script for Darkmode -->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
+<script src="../static/darkmode.js"></script>
 </html>

src/templates/vote.html

@@ -37,4 +37,7 @@ <h2 class="count">Total Vote Counts: {{ total_vote_count }}</h2>
         <a href="/logout" class="btn-logout">Logout</a>
     </div>
 </body>
+<!-- Script for Darkmode -->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
+<script src="../static/darkmode.js"></script>
 </html>