Add dark mode [db]
This commit is contained in:
Vendored
+30
@@ -0,0 +1,30 @@
|
||||
// Variables
|
||||
$theme: dark;
|
||||
|
||||
@import "bootstrap";
|
||||
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
@import "helpers";
|
||||
@import "fa-utils";
|
||||
@import "block-collapse";
|
||||
@import "form-help";
|
||||
|
||||
@import "bootstrap-customizations/paginate";
|
||||
@import "bootstrap-customizations/card";
|
||||
@import "bootstrap-customizations/tooltip";
|
||||
@import "bootstrap-customizations/navbar";
|
||||
@import "bootstrap-customizations/footer";
|
||||
@import "bootstrap-customizations/link";
|
||||
@import "bootstrap-customizations/border";
|
||||
@import "bootstrap-customizations/button";
|
||||
@import "bootstrap-customizations/responsive";
|
||||
@import "bootstrap-customizations/typography";
|
||||
|
||||
.bio-table {
|
||||
td {
|
||||
padding-top: dist(2);
|
||||
}
|
||||
}
|
||||
@@ -39,3 +39,7 @@
|
||||
min-width: 1.5rem;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.card .auth-footer {
|
||||
background-color: $body-bg;
|
||||
}
|
||||
|
||||
@@ -2,5 +2,5 @@
|
||||
.page-footer {
|
||||
font-size: 95%;
|
||||
background: $body-bg;
|
||||
border-top: 2px dotted $gray-200;
|
||||
border-top: 2px dotted $footer-separator-color;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// layout tweaks
|
||||
.page-navbar {
|
||||
background: white;
|
||||
background: $navbar-bg;
|
||||
border-bottom: 1px solid $primary;
|
||||
|
||||
box-shadow: 0 -3px 8px rgba(black, 1);
|
||||
|
||||
@@ -25,3 +25,60 @@ $tooltip-arrow-color: $tooltip-bg;
|
||||
|
||||
$pagination-padding-y-sm: dist(1);
|
||||
$pagination-padding-x-sm: dist(3);
|
||||
|
||||
$navbar-bg: white;
|
||||
|
||||
$footer-separator-color: $gray-200;
|
||||
|
||||
$theme: light !default;
|
||||
@if $theme == dark {
|
||||
// dark mode overrides
|
||||
|
||||
$body-bg: $gray-900;
|
||||
$body-color: $gray-100;
|
||||
$text-muted: $gray-500;
|
||||
$link-color: lighten($primary, 15%);
|
||||
$link-hover-color: lighten($primary, 20%);
|
||||
|
||||
$card-bg: $gray-800;
|
||||
$list-group-bg: $gray-800;
|
||||
$list-group-hover-bg: $gray-700;
|
||||
$list-group-disabled-color: $gray-400;
|
||||
$list-group-action-color: $gray-200;
|
||||
$list-group-action-hover-color: $gray-200;
|
||||
$list-group-action-active-bg: $gray-600;
|
||||
$list-group-action-active-color: $gray-100;
|
||||
|
||||
$tooltip-color: rgba($white, 0.9);
|
||||
|
||||
$navbar-bg: lighten($gray-900, 2%);
|
||||
$footer-separator-color: $gray-800;
|
||||
|
||||
$close-color: $white;
|
||||
|
||||
$input-bg: $gray-700;
|
||||
$input-color: $gray-200;
|
||||
$input-disabled-bg: $gray-900;
|
||||
$input-border-color: $gray-600;
|
||||
$input-focus-bg: $input-bg;
|
||||
$input-focus-color: $input-color;
|
||||
$input-group-addon-bg: $gray-800;
|
||||
$input-group-addon-color: $input-color;
|
||||
$input-group-addon-border-color: $input-border-color;
|
||||
|
||||
$custom-select-color: $input-color;
|
||||
$custom-select-bg: $input-bg;
|
||||
$custom-select-disabled-bg: $input-disabled-bg;
|
||||
$custom-select-indicator-color: $gray-300;
|
||||
$custom-select-border-color: $input-border-color;
|
||||
$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23");
|
||||
|
||||
$dropdown-bg: $gray-700;
|
||||
$dropdown-link-color: $gray-300;
|
||||
$dropdown-link-hover-color: lighten($gray-300, 5%);
|
||||
$dropdown-link-hover-bg: $gray-800;
|
||||
$dropdown-link-disabled-color: $gray-500;
|
||||
$dropdown-header-color: $gray-400;
|
||||
|
||||
$border-color: $gray-600;
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card-footer bg-white">
|
||||
<div class="card-footer auth-footer">
|
||||
<div class="form-group row mb-0">
|
||||
<span class="col-md-4 col-form-label text-md-right text-muted">…or authenticate with</span>
|
||||
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card-footer bg-white text-muted">
|
||||
<div class="card-footer auth-footer text-muted">
|
||||
You can also register by logging in with
|
||||
<a href="{{route('oauth-google-authorize')}}">Google</a>,
|
||||
<a href="{{route('oauth-github-authorize')}}">GitHub</a>,
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<script src="{{ asset('js/app.js') }}" defer></script>
|
||||
|
||||
<!-- Styles -->
|
||||
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
|
||||
<link href="{{ dark_mode() ? asset('css/app-dark.css') : asset('css/app.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('fonts/fa-dtbl-1.css') }}" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
{{-- Global navbar --}}
|
||||
|
||||
<nav class="navbar navbar-expand-md navbar-light page-navbar">
|
||||
<nav class="navbar navbar-expand-md navbar-{{ dark_mode() ? 'dark' : 'light' }} page-navbar">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="{{ route('dash') }}" aria-label="Go to Dashboard">
|
||||
<img src="/images/logo.svg" aria-hidden=true alt="LOGO" height="32px" style="margin: -10px 0" class="mr-2">{{--
|
||||
<img src="/images/logo{{ dark_mode() ? '-dark' : '' }}.svg" aria-hidden=true alt="LOGO" height="32px" style="margin: -10px 0" class="mr-2">{{--
|
||||
--}}datatable.directory
|
||||
</a>
|
||||
|
||||
|
||||
@@ -16,6 +16,11 @@
|
||||
<a href="'.e(route('profile.edit')).'">profile settings</a> page.
|
||||
', 'text-muted', false) !!}
|
||||
</div>
|
||||
<div class="col-md-10 mt-3">
|
||||
{!! Widget::header(2, 'General') !!}
|
||||
{!! Widget::checkbox('dark_mode', 'Use Dark Mode')->value($user->dark_mode) !!}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-10 mt-3">
|
||||
{!! Widget::header(2, 'Identifiers') !!}
|
||||
|
||||
Reference in New Issue
Block a user