Theme toggle button
This commit is contained in:
parent
13e5e862ce
commit
37b68c41f7
|
@ -130,6 +130,10 @@ html, body {
|
||||||
transition: color 0.5s;
|
transition: color 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.menu-bar .left-buttons {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
.menu-bar .right-buttons {
|
.menu-bar .right-buttons {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
@ -226,6 +230,30 @@ html, body {
|
||||||
.next {
|
.next {
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Theme Popup */
|
||||||
|
.theme-popup {
|
||||||
|
position: fixed;
|
||||||
|
left: -40px;
|
||||||
|
|
||||||
|
border: 1px solid #fafafa;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
font-size: 0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-popup .theme {
|
||||||
|
margin: 0;
|
||||||
|
padding: 2px 10px;
|
||||||
|
line-height: 25px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-popup .theme:hover {
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -37,4 +37,24 @@ $( document ).ready(function() {
|
||||||
window.print();
|
window.print();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Theme button
|
||||||
|
$("#theme-toggle").click(function(){
|
||||||
|
if($('.theme-popup').length) {
|
||||||
|
$('.theme-popup').remove();
|
||||||
|
} else {
|
||||||
|
var popup = $('<div class="theme-popup"></div>')
|
||||||
|
.append($('<div class="theme" id="light">Light (default)<div>'))
|
||||||
|
.append($('<div class="theme" id="dark">Dark</div>'));
|
||||||
|
|
||||||
|
|
||||||
|
$(this).append(popup);
|
||||||
|
|
||||||
|
$('.theme').click(function(){
|
||||||
|
var theme = $(this).attr('id');
|
||||||
|
$('body').removeClass().addClass(theme);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -31,7 +31,8 @@
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<div id="menu-bar" class="menu-bar">
|
<div id="menu-bar" class="menu-bar">
|
||||||
<div class="left-buttons">
|
<div class="left-buttons">
|
||||||
<i id="sidebar-toggle" class="fa fa-bars left"></i>
|
<i id="sidebar-toggle" class="fa fa-bars"></i>
|
||||||
|
<i id="theme-toggle" class="fa fa-paint-brush"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 class="menu-title">{{ title }}</h1>
|
<h1 class="menu-title">{{ title }}</h1>
|
||||||
|
|
Loading…
Reference in New Issue