Merge pull request #177 from simple-login/darkmode-2

Dark mode implementation

app/dashboard/templates/dashboard/domain_detail/dns.html

@@ -8,7 +8,7 @@
 
 
 {% block domain_detail_content %}
-  <div class="bg-white p-4" style="max-width: 60rem; margin: auto">
+  <div class="p-4 mr-auto" style="max-width: 60rem;">
     <h1 class="h2"> {{ custom_domain.domain }} </h1>
     <div class="">Please follow the steps below to set up your domain.</div>
 
@@ -35,7 +35,7 @@
       </div>
 
       {% for priority, email_server in EMAIL_SERVERS_WITH_PRIORITY %}
-        <div class="mb-3 p-3" style="background-color: #eee">
+        <div class="mb-3 p-3 bg-secondary">
           Record: MX <br>
           Domain: {{ custom_domain.domain }} or @ <br>
           Priority: {{ priority }} <br>
@@ -62,7 +62,7 @@
       {% if not mx_ok %}
         <div class="text-danger mt-4">
           Your DNS is not correctly set. The MX record we obtain is:
-          <div class="mb-3 p-3" style="background-color: #eee">
+          <div class="mb-3 p-3 bg-secondary">
             {% if not mx_errors %}
               (Empty)
             {% endif %}
@@ -97,7 +97,7 @@
 
       <div class="mb-2">Add the following TXT DNS record to your domain.</div>
 
-      <div class="mb-2 p-3" style="background-color: #eee">
+      <div class="mb-2 p-3 bg-secondary">
         Record: TXT <br>
         Domain: {{ custom_domain.domain }} or @ <br>
         Value:
@@ -125,7 +125,7 @@
       {% if not spf_ok %}
         <div class="text-danger mt-4">
           Your DNS is not correctly set. The TXT record we obtain is:
-          <div class="mb-3 p-3" style="background-color: #eee">
+          <div class="mb-3 p-3 bg-secondary">
             {% if not spf_errors %}
               (Empty)
             {% endif %}
@@ -162,7 +162,7 @@
 
       <div class="mb-2">Add the following CNAME DNS record to your domain.</div>
 
-      <div class="mb-2 p-3" style="background-color: #eee">
+      <div class="mb-2 p-3 bg-secondary">
         Record: CNAME <br>
         Domain: <em data-toggle="tooltip"
                     title="Click to copy"
@@ -197,7 +197,7 @@
             The CNAME record we obtain for
             <em>dkim._domainkey.{{ custom_domain.domain }}</em> is:
 
-            <div class="mb-3 p-3" style="background-color: #eee">
+            <div class="mb-3 p-3 bg-secondary">
               {% for r in dkim_errors %}
                 {{ r }} <br>
               {% endfor %}
@@ -231,7 +231,7 @@
 
       <div class="mb-2">Add the following TXT DNS record to your domain.</div>
 
-      <div class="mb-2 p-3" style="background-color: #eee">
+      <div class="mb-2 p-3 bg-secondary">
         Record: TXT <br>
         Domain: <em data-toggle="tooltip"
                     title="Click to copy"

app/dashboard/templates/dashboard/index.html

@@ -153,13 +153,15 @@
           </form>
         </div>
 
-        <a v-if="!showFilter" @click="toggleFilter()" class="btn btn-secondary">
-          <i class="fe fe-chevrons-left"></i> Filters
-        </a>
+        <div class="btn-group">
+          <a v-if="!showFilter" @click="toggleFilter()" class="btn btn-outline-secondary">
+            <i class="fe fe-chevrons-left"></i> Filters
+          </a>
 
-        <a v-if="showFilter" @click="toggleFilter()" class="btn btn-outline-secondary">
-          <i class="fe fe-chevrons-right"></i>
-        </a>
+          <a v-if="showFilter" @click="toggleFilter()" class="btn btn-outline-secondary">
+            <i class="fe fe-chevrons-right"></i>
+          </a>
+        </div>
       </div>
     </div>
   </div>

static/assets/css/darkmode.css

@@ -0,0 +1,90 @@
+/**
+ * SimpleLogin dark mode implementation
+ */
+:root {
+    --primary-color: var(--blue);
+    --secondary-color: var(--green);
+    --font-color: var(--dark);
+    --bg-color: var(--light);
+    --heading-color: #818cab;
+    --heading-background: #FFF;
+    --border: 1px solid rgba(0, 40, 100, 0.12);
+    --input-bg-color: var(--light);
+}
+
+[data-theme="dark"] {
+    --primary-color: var(--blue);
+    --secondary-color: var(--green);
+    --font-color: var(--white);
+    --bg-color: #000;
+    --heading-color: #818cab;
+    --heading-background: #1a1a1a;
+    --input-bg-color: #4c4c4c;
+    --border: 1px solid rgba(228, 236, 238, 0.35);
+}
+
+/** Override the bootstrap color configurations */
+body {
+    color: var(--font-color);
+    background-color: var(--bg-color);
+}
+
+a {
+    color: var(--primary-color);
+}
+
+a:hover {
+    color: var(--primary-color)
+}
+
+hr {
+    border-top: var(--border);
+}
+
+.form-control, .dataTables_wrapper .dataTables_length select, .dataTables_wrapper.dataTables_filter input {
+    color: var(--font-color);
+    background-color: var(--input-bg-color);
+}
+
+.form-control:focus, .dataTables_wrapper .dataTables_length select:focus, .dataTables_wrapper .dataTables_filter input:focus {
+    border-color: #1991eb;
+    outline: 0;
+    box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+    background-color: var(--input-bg-color);
+    color: var(--font-color);
+}
+
+.form-control:disabled, .dataTables_wrapper .dataTables_length select:disabled, .dataTables_wrapper .dataTables_filter input:disabled, .form-control[readonly], .dataTables_wrapper .dataTables_length select[readonly], .dataTables_wrapper .dataTables_filter input[readonly] {
+    background-color: var(--input-bg-color);
+}
+
+.custom-select, .dataTables_wrapper .dataTables_length select {
+    color: var(--font-color);
+    background-color: var(--input-bg-color);
+    border-color: var(--border);
+}
+
+.card {
+    background-color: var(--heading-background);
+}
+
+.header {
+    background: var(--heading-background);
+    border-bottom: var(--border);
+}
+
+.footer {
+    border-top: var(--border);
+    color: var(--font-color);
+    background: transparent;
+}
+
+.custom-switch-indicator {
+    background: var(--input-bg-color);
+}
+
+em {
+    color: var(--dark);
+    border-radius: 2px;
+    padding: 0 8px;
+}

static/assets/js/core.js

@@ -104,4 +104,17 @@ $(document).ready(function() {
       });
     });
   }
+
+  /** Dark mode controller */
+  if (store.get('dark-mode') === true) {
+    document.documentElement.setAttribute('data-theme', 'dark')
+  }
+  $('[data-toggle="dark-mode"]').on('click', function () {
+    if (store.get('dark-mode') === true) {
+      store.set('dark-mode', false);
+      return document.documentElement.setAttribute('data-theme', 'light')
+    }
+    store.set('dark-mode', true)
+    document.documentElement.setAttribute('data-theme', 'dark')
+  })
 });

templates/base.html

@@ -26,6 +26,7 @@
 
   <!-- Dashboard Core -->
   <link href="/static/assets/css/dashboard.css" rel="stylesheet"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='assets/css/darkmode.css') }}?v={{ VERSION }}">
 
   <!-- Tabler JS -->
   <script src="/static/assets/js/vendors/jquery-3.2.1.min.js"></script>

templates/header.html

@@ -6,6 +6,9 @@
       </a>
 
       <div class="d-flex order-lg-2 ml-auto">
+        <div class="nav-item" data-toggle="dark-mode" title='Toggle bright/dark mode'>
+          <i class="fe fe-moon"></i>
+        </div>
         {% if current_user.should_show_upgrade_button() %}
           <div class="nav-item">
             <a href="{{ url_for('dashboard.pricing') }}" class="btn btn-sm btn-outline-primary">Upgrade</a>