1
0
Fork 0

Add dark theme for Web UI

This commit is contained in:
Dmitry Sharshakov 2020-02-27 23:30:04 +03:00 committed by GitHub
parent 18d90ecd96
commit 389536aff0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 98 additions and 6 deletions

View file

@ -13,13 +13,14 @@
<q-route-tab to="/udp" icon="eva-globe-2-outline" no-caps label="UDP" />
</q-tabs>
<q-space />
<q-btn @click="$q.dark.toggle()" stretch flat no-caps icon="invert_colors" :label="`${$q.dark.isActive ? 'Light' : 'Dark'} theme`" class="btn-menu" />
<q-btn type="a" :href="`https://docs.traefik.io/${parsedVersion}`" target="_blank" stretch flat no-caps label="Documentation" class="btn-menu" />
<q-btn v-if="version" type="a" href="https://github.com/containous/traefik/" target="_blank" stretch flat no-caps :label="`${name} ${version}`" class="btn-menu" />
</q-toolbar>
</div>
</section>
<section class="app-section bg-white text-black">
<section class="app-section text-black sub-nav" :class="{ 'bg-white': !$q.dark.isActive }">
<div class="app-section-wrap app-boxed app-boxed-xl">
<slot />
</div>
@ -72,6 +73,10 @@ export default {
min-height: 64px;
}
.body--dark .sub-nav {
background-color: #0e204c;
}
.logo {
display: inline-block;
img {