simple-login/app
1
1
Fork 0
mirror of https://github.com/simple-login/app.git synced 2024-11-10 09:13:45 +08:00
Code Issues Projects Releases Packages Wiki Activity

Dark mode implementation

Browse source 
* Using CSS variable as a solution
* The new darkmode css is now live in another file so that upgarding
dashboard.css doesn't affect the darkmode itself
* Used a naive darkmode controller by client javascript. No persistance
state is stored in the backend at the moment
This commit is contained in:
doanguyen 2020-05-10 16:40:56 +02:00
parent cde8452e5b
commit 7ef78c991f
6 changed files with 123 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/dashboard/templates/dashboard/domain_detail/dns.html
View file

@ -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"

14
app/dashboard/templates/dashboard/index.html
View file

@ -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>

90
static/assets/css/darkmode.css Normal file
View file

@ -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;
}

13
static/assets/js/core.js
View file

@ -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')
})
});

1
templates/base.html
View file

@ -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>

3
templates/header.html
View file

@ -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>