mirror of
https://github.com/grocy/grocy.git
synced 2025-08-16 18:54:35 +00:00
Quick test implementation of night (references #71)
This commit is contained in:
Bernd Bestel
186
public/css/grocy_night_mode.css
Normal file
186
public/css/grocy_night_mode.css
Normal file
@@ -0,0 +1,186 @@
|
||||
.night-mode body {
|
||||
color: #c1c1c1;
|
||||
}
|
||||
|
||||
.night-mode .table-info,
|
||||
.night-mode .table-info > td,
|
||||
.night-mode .table-info > th {
|
||||
background-color: #07373f;
|
||||
}
|
||||
|
||||
.night-mode .btn-info {
|
||||
color:#c1c1c1;
|
||||
background-color:#07373f;
|
||||
border-color:#07373f;
|
||||
}
|
||||
|
||||
.night-mode .btn-warning {
|
||||
color:#c1c1c1;
|
||||
background-color:#473604;
|
||||
border-color:#473604;
|
||||
}
|
||||
|
||||
.night-mode .btn-danger {
|
||||
color:#c1c1c1;
|
||||
background-color:#471116;
|
||||
border-color:#471116;
|
||||
}
|
||||
|
||||
.night-mode .btn-success {
|
||||
color:#c1c1c1;
|
||||
background-color:#0d3a18;
|
||||
border-color:#0d3a18;
|
||||
}
|
||||
|
||||
.night-mode .form-control {
|
||||
color: #495057;
|
||||
background-color: #333131;
|
||||
border: 1px solid #ced4da;
|
||||
}
|
||||
|
||||
.night-mode .content-wrapper {
|
||||
background: #333131;
|
||||
}
|
||||
|
||||
.night-mode table.dataTable tr.group td {
|
||||
font-weight: bold;
|
||||
background-color: #333131;
|
||||
}
|
||||
|
||||
.night-mode .table-danger,
|
||||
.night-mode .table-danger > td,
|
||||
.night-mode .table-danger > th {
|
||||
background-color: #471116;
|
||||
}
|
||||
|
||||
.night-mode .table-warning,
|
||||
.night-mode .table-warning > td,
|
||||
.night-mode .table-warning > th {
|
||||
background-color: #473604;
|
||||
}
|
||||
|
||||
.night-mode .bg-warning {
|
||||
background-color: #473604!important;
|
||||
}
|
||||
|
||||
.night-mode .bg-info {
|
||||
background-color: #07373f!important;
|
||||
}
|
||||
|
||||
.night-mode .bg-danger {
|
||||
background-color: #471116!important;
|
||||
}
|
||||
|
||||
.night-mode .form-control:focus {
|
||||
color: #495057;
|
||||
background-color: #333131;
|
||||
border-color: #80bdff;
|
||||
}
|
||||
|
||||
.night-mode .dropdown-item:focus,
|
||||
.night-mode .dropdown-item:hover {
|
||||
color: #16181b;
|
||||
background-color: #333131;
|
||||
}
|
||||
|
||||
.night-mode .dropdown-item {
|
||||
color: #7c7b6f;
|
||||
background-color: #333131;
|
||||
}
|
||||
|
||||
.night-mode .list-group-item {
|
||||
background-color: #333131;
|
||||
}
|
||||
|
||||
.night-mode .modal-content {
|
||||
background-color: #1a1919;
|
||||
border: 1px solid rgba(186, 189, 189, 0.66);
|
||||
}
|
||||
|
||||
.night-mode .modal-footer {
|
||||
border-top: 1px solid #6f7173;
|
||||
}
|
||||
|
||||
.night-mode .container-fluid {
|
||||
background-color: #333131;
|
||||
}
|
||||
|
||||
.night-mode a.discrete-link:hover {
|
||||
color: #16354f !important;
|
||||
text-decoration: none !important;
|
||||
background-color: #333131;
|
||||
}
|
||||
|
||||
.night-mode a.discrete-link:focus {
|
||||
color: #3a0b0f !important;
|
||||
background-color: #333131;
|
||||
}
|
||||
|
||||
.night-mode .card {
|
||||
border: 2px solid;
|
||||
border-color: #383838;
|
||||
background-color: #333131;
|
||||
}
|
||||
|
||||
.night-mode .card-header {
|
||||
background-color: #333131;
|
||||
}
|
||||
|
||||
.night-mode #mainNav {
|
||||
background-color: #333131 !important;
|
||||
border-bottom: 2px solid !important;
|
||||
border-color: #383838 !important;
|
||||
}
|
||||
|
||||
.night-mode .navbar-sidenav,
|
||||
.night-mode .sidenav-second-level {
|
||||
background-color: #333131 !important;
|
||||
border-right: 2px solid !important;
|
||||
border-color: #383838 !important;
|
||||
}
|
||||
|
||||
.night-mode .navbar-nav .dropdown-menu {
|
||||
background-color: #333131 !important;
|
||||
}
|
||||
|
||||
.night-mode .navbar-nav .dropdown-divider {
|
||||
border-color: #383838 !important;
|
||||
background-color: #333131;
|
||||
}
|
||||
|
||||
.night-mode .sidenav-toggler {
|
||||
background-color: #383838 !important;
|
||||
border-right: 2px solid !important;
|
||||
border-color: #383838 !important;
|
||||
}
|
||||
|
||||
.night-mode .navbar-sidenav > li:hover,
|
||||
.night-mode .sidenav-second-level > li:hover,
|
||||
.night-mode .navbar-nav .dropdown-item:hover {
|
||||
box-shadow: inset 5px 0 0 #112a3f !important;
|
||||
background-color: #383838 !important;
|
||||
}
|
||||
|
||||
.night-mode .navbar-sidenav > li > a:focus,
|
||||
.night-mode .sidenav-second-level > li > a:focus,
|
||||
.night-mode .navbar-nav .dropdown-item:focus {
|
||||
box-shadow: inset 5px 0 0 #350a0f !important;
|
||||
background-color: #383838 !important;
|
||||
}
|
||||
|
||||
.night-mode .active-page {
|
||||
box-shadow: inset 5px 0 0 #350a0f !important;
|
||||
background-color: #383838 !important;
|
||||
}
|
||||
|
||||
.night-mode .toast-success {
|
||||
background-color: #092810;
|
||||
}
|
||||
|
||||
.night-mode .toast-error {
|
||||
background-color: #471015;
|
||||
}
|
||||
|
||||
.night-mode .typeahead .active {
|
||||
background-color: #333131;
|
||||
}
|
||||
20
public/js/grocy_nightmode.js
Normal file
20
public/js/grocy_nightmode.js
Normal file
@@ -0,0 +1,20 @@
|
||||
$("#night-mode-enabled").on("change", function()
|
||||
{
|
||||
var value = $(this).is(":checked");
|
||||
window.localStorage.setItem("night_mode", value);
|
||||
|
||||
if (value)
|
||||
{
|
||||
$("body").addClass("night-mode");
|
||||
}
|
||||
else
|
||||
{
|
||||
$("body").removeClass("night-mode");
|
||||
}
|
||||
});
|
||||
|
||||
if (window.localStorage.getItem("night_mode") === "true")
|
||||
{
|
||||
$("body").addClass("night-mode");
|
||||
$("#night-mode-enabled").prop("checked", true);
|
||||
}
|
||||
@@ -26,6 +26,7 @@
|
||||
<link href="{{ $U('/node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css?v=', true) }}{{ $version }}" rel="stylesheet">
|
||||
<link href="{{ $U('/components_unmanaged/noto-sans-v6-latin/noto-sans-v6-latin.css?v=', true) }}{{ $version }}" rel="stylesheet">
|
||||
<link href="{{ $U('/css/grocy.css?v=', true) }}{{ $version }}" rel="stylesheet">
|
||||
<link href="{{ $U('/css/grocy_night_mode.css?v=', true) }}{{ $version }}" rel="stylesheet">
|
||||
@stack('pageStyles')
|
||||
|
||||
@if(file_exists(GROCY_DATAPATH . '/custom_css.html'))
|
||||
@@ -190,6 +191,15 @@
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item logout-button discrete-link" href="{{ $U('/logout') }}"><i class="fas fa-sign-out-alt"></i> {{ $L('Logout') }}</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<div class="dropdown-item">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="night-mode-enabled">
|
||||
<label class="form-check-label" for="night-mode-enabled">
|
||||
{{ $L('Enable night mode') }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item logout-button discrete-link" href="{{ $U('/user/' . GROCY_USER_ID . '?changepw=true') }}"><i class="fas fa-key"></i> {{ $L('Change password') }}</a>
|
||||
</div>
|
||||
</li>
|
||||
@@ -270,6 +280,7 @@
|
||||
<script src="{{ $U('/js/extensions.js?v=', true) }}{{ $version }}"></script>
|
||||
<script src="{{ $U('/js/grocy.js?v=', true) }}{{ $version }}"></script>
|
||||
<script src="{{ $U('/js/grocy_dbchangedhandling.js?v=', true) }}{{ $version }}"></script>
|
||||
<script src="{{ $U('/js/grocy_nightmode.js?v=', true) }}{{ $version }}"></script>
|
||||
@stack('pageScripts')
|
||||
@stack('componentScripts')
|
||||
<script src="{{ $U('/viewjs', true) }}/@yield('viewJsName').js?v={{ $version }}"></script>
|
||||
|
||||
Reference in New Issue
Block a user