frodovdr/hyperion.ng
1
0
Fork 0
mirror of https://github.com/hyperion-project/hyperion.ng.git synced 2023-10-10 13:36:59 +02:00
Code Issues Releases Wiki Activity

Introduce Dark Mode (#752)

Browse Source 
* Introduce Dark Mode

* Auto Detect Dark Mode from OS

Some OS (iOS or Mac OS e.g.) can give the browser an information if system wide dark mode is set or not. If the OS shares this information, webui is set automatically to the mode. Manual overwrite is still possible by pressing button on the webui. This is valid as long the session in the client is open.

* Burger Button Dark Mode

Dark Mode for Burger Button (Mobile View)
This commit is contained in:
b1rdhous3 2020-04-05 20:08:56 +02:00 committed by GitHub
parent 5d1063e935
commit 52e7f04e46
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 300 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

244
assets/webconfig/css/darkMode.css Normal file
View File

@ -0,0 +1,244 @@
/*General Elements*/
body {
background-color: #080808;
color: #D3D3D3;
}
#page-wrapper {
background-color:#080808;
}
.navbar-default {
background-color:#080808;
}
.panel-body {
background-color: #121212;
}
hr {
border-top: 1px solid #D3D3D3;
}
a {
color: #005d5c;
}
a:hover {
color: #018786;
}
a:focus {
color: #018786;
}
a:active {
color: #018786
}
p {
color: #D3D3D3;
}
h4 {
color: #D3D3D3;
}
/*Buttons*/
.btn-primary {
background-color: #005d5c;
border-color: #D3D3D3;
}
.btn-primary:hover{
background-color: #018786;
border-color: #D3D3D3;
}
.btn-primary:focus{
background-color: #018786;
border-color: #D3D3D3;
}
.btn-primary[disabled]:hover {
background-color: #018786;
border-color: #D3D3D3;
}
.btn-warning {
background-color: #ec971f;
border-color: #D3D3D3;
}
.btn-warning:hover {
background-color: #f0ad4e;
border-color: #D3D3D3;
}
.btn-warning:focus {
background-color: #f0ad4e;
border-color: #D3D3D3;
}
.btn-danger {
background-color: #ca2f4bd4;
border-color: #D3D3D3;
}
.btn-danger:hover {
background-color: #cf6679;
border-color: #D3D3D3;
}
.btn-danger:focus {
background-color: #cf6679;
border-color: #D3D3D3;
}
/*Tables*/
tr:hover td {
background-color: #018786;
}
/*Navigation Sidebar*/
.sidebar ul li {
background-color: #080808;
}
.sidebar ul li a.active{
background-color: #121212;
}
.sidebar ul li a:hover{
background-color: #121212;
}
.sidebar ul li a:focus{
background-color: #121212;
}
/*Navigation Topbar*/
.navbar-top-links li a:hover {
background-color: #121212;
}
.navbar-top-links li a:focus {
background-color: #121212;
}
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
background-color: #121212;
}
.dropdown-menu {
background-color: #080808;
border-color: #D3D3D3;
}
.dropdown-menu>li>a {
color: #018786;
}
/*Panels*/
.panel-default {
background-color:#121212 !important;
border-color:#D3D3D3 !important;
}
.panel-primary {
background-color:#121212 !important;
border-color:#D3D3D3 !important;
}
.panel-primary>.panel-heading {
background-color:#121212 !important;
border-color:#D3D3D3 !important;
}
.panel-primary>.panel-heading+.panel-collapse>.panel-body {
border-top-color: #D3D3D3;
}
.panel-default>.panel-heading{
background-color:#121212 !important;
border-color:#D3D3D3 !important;
color: #D3D3D3;
}
.panel-footer {
background-color:#121212 !important;
}
/*JSON Editor Inputs*/
[id^=editor_container] .well {
background-color: #121212 !important;
}
.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group>.btn, .input-group-btn:last-child>.dropdown-toggle, .input-group-btn:first-child>.btn:not(:first-child), .input-group-btn:first-child>.btn-group:not(:first-child)>.btn {
border-color: #D3D3D3;
}
.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child>.btn-group:not(:last-child)>.btn {
border-color: #D3D3D3;
}
.introd h4 {
border-left: 5px solid #03dac6;
}
.bs-callout-primary h4 {
color: #03dac6;
}
.bs-callout-primary {
border-left-color: #03dac6;
}
/* Tabs Buttons */
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
color: #D3D3D3;
background-color: #018786;
}
.nav-tabs>li>a, .nav-tabs>li>a:hover, .nav-tabs>li>a:focus {
color: #D3D3D3;
background-color: #005d5c;
}
/*Modals*/
.modal-content {
background-color: #121212;
}
button.close {
color: #D3D3D3;
}
button.close:hover {
color: #ffffff;
}
/*Bootstrap Notify*/
[data-notify="container"] {
background-color: #121212;
}
.support-container:hover .fa {
background-color: #005d5c;
}
.navbar-top-links .dropdown-menu li a:hover{
background-color: #121212;
color: #03dac6;
}
/*Burger Button*/
.navbar-default .navbar-toggle {
border-color: #005d5c;
background-color: #080808;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
border-color: #005d5c;
background-color: #080808;
}

3
assets/webconfig/css/hyperion.css
View File

@ -49,6 +49,9 @@ body{
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.closed {
background-color: #d0d0d0;
}
.navbar-toggle.closed .top-bar {
transform: rotate(0);
}

7
assets/webconfig/index.html
View File

@ -88,7 +88,7 @@
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle closed" aria-controls="navbar" style="background-color:#d0d0d0;">
<button type="button" class="navbar-toggle closed" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
@ -109,6 +109,11 @@
<i id="btn_streamer_icon" class="fa fa-video-camera fa-fw"></i>
</a>
</li>
<li class="dropdown" id="btn_darkmode">
<a>
<i id="btn_darkmode_icon" class="fa fa-moon-o"></i>
</a>
</li>
<!-- instance switcher -->
<li class="dropdown" id="btn_hypinstanceswitch" style="display:none">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">

34
assets/webconfig/js/content_index.js
View File

@ -2,6 +2,24 @@ var instNameInit = false
$(document).ready(function () {
var darkModeOverwrite = getStorage("darkModeOverwrite", true);
if(darkModeOverwrite == "false" || darkModeOverwrite == null)
{
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
handleDarkMode();
}
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
setStorage("darkMode", "off", false);
}
}
if(getStorage("darkMode", false) == "on")
{
handleDarkMode();
}
loadContentTo("#container_connection_lost", "connection_lost");
loadContentTo("#container_restart", "restart");
initWebSocket();
@ -274,3 +292,19 @@ $(function () {
$(document.body).on('hide.bs.modal,hidden.bs.modal', function () {
$('body').css('padding-right', '0');
});
//Dark Mode
$("#btn_darkmode").off().on("click",function(e){
if(getStorage("darkMode", false) != "on")
{
handleDarkMode();
setStorage("darkModeOverwrite", true, true);
}
else {
setStorage("darkMode", "off", false);
setStorage("darkModeOverwrite", true, true);
location.reload();
}
});

2
assets/webconfig/js/content_logging.js
View File

@ -154,7 +154,7 @@ $(document).ready(function() {
messages = (event.response.result.messages);
if(messages.length != 0 && !createdCont)
{
$('#log_content').html('<pre><div id="logmessages" style="overflow:scroll;max-height:400px"></div></pre><button class="btn btn-success" id="btn_autoscroll"><i class="fa fa-long-arrow-down fa-fw"></i>'+$.i18n('conf_logging_btn_autoscroll')+'</button>');
$('#log_content').html('<pre><div id="logmessages" style="overflow:scroll;max-height:400px"></div></pre><button class="btn btn-primary" id="btn_autoscroll"><i class="fa fa-long-arrow-down fa-fw"></i>'+$.i18n('conf_logging_btn_autoscroll')+'</button>');
createdCont = true;
$('#btn_autoscroll').off().on('click',function() {

12
assets/webconfig/js/ui_utils.js
View File

@ -940,3 +940,15 @@ function getReleases(callback)
});
}
function handleDarkMode()
{
$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: "../css/darkMode.css"
}).appendTo("head");
setStorage("darkMode", "on", false);
$('#btn_darkmode_icon').removeClass('fa fa-moon-o');
$('#btn_darkmode_icon').addClass('fa fa-sun-o');
}