Skip to content

Commit 52e7f04

Browse files
janpfischerjanpfischer
authored
Introduce Dark Mode (#752)
* 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)
1 parent 5d1063e commit 52e7f04

File tree

6 files changed

+300
-2
lines changed

6 files changed

+300
-2
lines changed

‎assets/webconfig/css/darkMode.css‎

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
/*General Elements*/
2+
body {
3+
background-color: #080808;
4+
color: #D3D3D3;
5+
}
6+
7+
#page-wrapper {
8+
background-color:#080808;
9+
}
10+
11+
.navbar-default {
12+
background-color:#080808;
13+
}
14+
15+
.panel-body {
16+
background-color: #121212;
17+
}
18+
19+
hr {
20+
border-top: 1px solid #D3D3D3;
21+
}
22+
23+
a {
24+
color: #005d5c;
25+
}
26+
27+
a:hover {
28+
color: #018786;
29+
}
30+
31+
a:focus {
32+
color: #018786;
33+
}
34+
35+
a:active {
36+
color: #018786
37+
}
38+
39+
p {
40+
color: #D3D3D3;
41+
}
42+
43+
h4 {
44+
color: #D3D3D3;
45+
}
46+
47+
/*Buttons*/
48+
.btn-primary {
49+
background-color: #005d5c;
50+
border-color: #D3D3D3;
51+
}
52+
53+
.btn-primary:hover{
54+
background-color: #018786;
55+
border-color: #D3D3D3;
56+
}
57+
58+
.btn-primary:focus{
59+
background-color: #018786;
60+
border-color: #D3D3D3;
61+
}
62+
63+
.btn-primary[disabled]:hover {
64+
background-color: #018786;
65+
border-color: #D3D3D3;
66+
}
67+
68+
.btn-warning {
69+
background-color: #ec971f;
70+
border-color: #D3D3D3;
71+
}
72+
73+
.btn-warning:hover {
74+
background-color: #f0ad4e;
75+
border-color: #D3D3D3;
76+
}
77+
78+
.btn-warning:focus {
79+
background-color: #f0ad4e;
80+
border-color: #D3D3D3;
81+
}
82+
83+
.btn-danger {
84+
background-color: #ca2f4bd4;
85+
border-color: #D3D3D3;
86+
}
87+
88+
.btn-danger:hover {
89+
background-color: #cf6679;
90+
border-color: #D3D3D3;
91+
}
92+
93+
.btn-danger:focus {
94+
background-color: #cf6679;
95+
border-color: #D3D3D3;
96+
}
97+
98+
/*Tables*/
99+
tr:hover td {
100+
background-color: #018786;
101+
}
102+
103+
/*Navigation Sidebar*/
104+
.sidebar ul li {
105+
background-color: #080808;
106+
}
107+
108+
.sidebar ul li a.active{
109+
background-color: #121212;
110+
}
111+
112+
.sidebar ul li a:hover{
113+
background-color: #121212;
114+
}
115+
116+
.sidebar ul li a:focus{
117+
background-color: #121212;
118+
}
119+
120+
/*Navigation Topbar*/
121+
.navbar-top-links li a:hover {
122+
background-color: #121212;
123+
}
124+
125+
.navbar-top-links li a:focus {
126+
background-color: #121212;
127+
}
128+
129+
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
130+
background-color: #121212;
131+
}
132+
133+
.dropdown-menu {
134+
background-color: #080808;
135+
border-color: #D3D3D3;
136+
}
137+
138+
.dropdown-menu>li>a {
139+
color: #018786;
140+
}
141+
142+
/*Panels*/
143+
.panel-default {
144+
background-color:#121212 !important;
145+
border-color:#D3D3D3 !important;
146+
}
147+
148+
.panel-primary {
149+
background-color:#121212 !important;
150+
border-color:#D3D3D3 !important;
151+
}
152+
153+
.panel-primary>.panel-heading {
154+
background-color:#121212 !important;
155+
border-color:#D3D3D3 !important;
156+
}
157+
158+
.panel-primary>.panel-heading+.panel-collapse>.panel-body {
159+
border-top-color: #D3D3D3;
160+
}
161+
162+
.panel-default>.panel-heading{
163+
background-color:#121212 !important;
164+
border-color:#D3D3D3 !important;
165+
color: #D3D3D3;
166+
}
167+
168+
.panel-footer {
169+
background-color:#121212 !important;
170+
}
171+
172+
/*JSON Editor Inputs*/
173+
[id^=editor_container] .well {
174+
background-color: #121212 !important;
175+
}
176+
177+
.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 {
178+
border-color: #D3D3D3;
179+
}
180+
181+
.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 {
182+
border-color: #D3D3D3;
183+
}
184+
185+
.introd h4 {
186+
border-left: 5px solid #03dac6;
187+
}
188+
189+
.bs-callout-primary h4 {
190+
color: #03dac6;
191+
}
192+
193+
.bs-callout-primary {
194+
border-left-color: #03dac6;
195+
}
196+
197+
/* Tabs Buttons */
198+
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
199+
color: #D3D3D3;
200+
background-color: #018786;
201+
}
202+
203+
.nav-tabs>li>a, .nav-tabs>li>a:hover, .nav-tabs>li>a:focus {
204+
color: #D3D3D3;
205+
background-color: #005d5c;
206+
}
207+
208+
/*Modals*/
209+
.modal-content {
210+
background-color: #121212;
211+
}
212+
213+
button.close {
214+
color: #D3D3D3;
215+
}
216+
217+
button.close:hover {
218+
color: #ffffff;
219+
}
220+
221+
/*Bootstrap Notify*/
222+
[data-notify="container"] {
223+
background-color: #121212;
224+
}
225+
226+
.support-container:hover .fa {
227+
background-color: #005d5c;
228+
}
229+
230+
.navbar-top-links .dropdown-menu li a:hover{
231+
background-color: #121212;
232+
color: #03dac6;
233+
}
234+
235+
/*Burger Button*/
236+
.navbar-default .navbar-toggle {
237+
border-color: #005d5c;
238+
background-color: #080808;
239+
}
240+
241+
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
242+
border-color: #005d5c;
243+
background-color: #080808;
244+
}

‎assets/webconfig/css/hyperion.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@ body{
4949
transform: rotate(-45deg);
5050
transform-origin: 10% 90%;
5151
}
52+
.navbar-toggle.closed {
53+
background-color: #d0d0d0;
54+
}
5255
.navbar-toggle.closed .top-bar {
5356
transform: rotate(0);
5457
}

‎assets/webconfig/index.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ <h3>Hyperion Web Configuration requires Javascript. Please enable Javascript in
8888
<!-- Navigation -->
8989
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
9090
<div class="navbar-header">
91-
<button type="button" class="navbar-toggle closed" aria-controls="navbar" style="background-color:#d0d0d0;">
91+
<button type="button" class="navbar-toggle closed" aria-controls="navbar">
9292
<span class="sr-only">Toggle navigation</span>
9393
<span class="icon-bar top-bar"></span>
9494
<span class="icon-bar middle-bar"></span>
@@ -109,6 +109,11 @@ <h3>Hyperion Web Configuration requires Javascript. Please enable Javascript in
109109
<i id="btn_streamer_icon" class="fa fa-video-camera fa-fw"></i>
110110
</a>
111111
</li>
112+
<li class="dropdown" id="btn_darkmode">
113+
<a>
114+
<i id="btn_darkmode_icon" class="fa fa-moon-o"></i>
115+
</a>
116+
</li>
112117
<!-- instance switcher -->
113118
<li class="dropdown" id="btn_hypinstanceswitch" style="display:none">
114119
<a class="dropdown-toggle" data-toggle="dropdown" href="#">

‎assets/webconfig/js/content_index.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,24 @@ var instNameInit = false
22

33
$(document).ready(function () {
44

5+
var darkModeOverwrite = getStorage("darkModeOverwrite", true);
6+
7+
if(darkModeOverwrite == "false" || darkModeOverwrite == null)
8+
{
9+
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
10+
handleDarkMode();
11+
}
12+
13+
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
14+
setStorage("darkMode", "off", false);
15+
}
16+
}
17+
18+
if(getStorage("darkMode", false) == "on")
19+
{
20+
handleDarkMode();
21+
}
22+
523
loadContentTo("#container_connection_lost", "connection_lost");
624
loadContentTo("#container_restart", "restart");
725
initWebSocket();
@@ -274,3 +292,19 @@ $(function () {
274292
$(document.body).on('hide.bs.modal,hidden.bs.modal', function () {
275293
$('body').css('padding-right', '0');
276294
});
295+
296+
//Dark Mode
297+
$("#btn_darkmode").off().on("click",function(e){
298+
299+
if(getStorage("darkMode", false) != "on")
300+
{
301+
handleDarkMode();
302+
setStorage("darkModeOverwrite", true, true);
303+
}
304+
else {
305+
setStorage("darkMode", "off", false);
306+
setStorage("darkModeOverwrite", true, true);
307+
location.reload();
308+
}
309+
310+
});

‎assets/webconfig/js/content_logging.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ $(document).ready(function() {
154154
messages = (event.response.result.messages);
155155
if(messages.length != 0 && !createdCont)
156156
{
157-
$('#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>');
157+
$('#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>');
158158
createdCont = true;
159159

160160
$('#btn_autoscroll').off().on('click',function() {

‎assets/webconfig/js/ui_utils.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -940,3 +940,15 @@ function getReleases(callback)
940940
});
941941
}
942942

943+
function handleDarkMode()
944+
{
945+
$("<link/>", {
946+
rel: "stylesheet",
947+
type: "text/css",
948+
href: "../css/darkMode.css"
949+
}).appendTo("head");
950+
951+
setStorage("darkMode", "on", false);
952+
$('#btn_darkmode_icon').removeClass('fa fa-moon-o');
953+
$('#btn_darkmode_icon').addClass('fa fa-sun-o');
954+
}

0 commit comments

Comments
 (0)