Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-26 21:04:25 +04:00
Code Issues Projects Releases Wiki Activity

dark mode improvements

Browse Source
This commit is contained in:
codecalm
2020-02-03 23:33:25 +01:00
parent d560945dff
commit b0f182f0fe
12 changed files with 50 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_includes/layout/customize.html
+79
View File
@@ -0,0 +1,79 @@
<div class="row row-cards">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="btn-list">
<a href="#" class="btn btn-secondary" data-theme-toggle="primary-vertical">Toggle sidebar</a>
<a href="#" class="btn btn-secondary" data-theme-toggle="primary-vertical-narrow">Sidebar narrow</a>
<a href="#" class="btn btn-secondary" data-theme-toggle="primary-right">Sidebar left/right</a>
<a href="#" class="btn btn-secondary" data-theme-toggle="primary-color">Sidebar color</a>
<a href="#" class="btn btn-secondary" data-theme-toggle="secondary-color">Secondary color</a>
<a href="#" class="btn btn-secondary" data-theme-toggle="secondary-visible">Toggle secondary</a>
<a href="#" class="btn btn-secondary" data-theme-toggle="dark-mode">Dark mode</a>
</div>
</div>
</div>
</div>
</div>
{% capture_global scripts %}
<script>
(function () {
var navbarPrimary = document.getElementById('navbar-primary'),
navbarSecondary = document.getElementById('navbar-secondary');
var events = {
'primary-vertical': function () {
navbarPrimary.classList.toggle('navbar-vertical');
},
'primary-right': function () {
navbarPrimary.classList.toggle('navbar-right');
},
'primary-vertical-narrow': function () {
navbarPrimary.classList.toggle('navbar-vertical-narrow');
},
'dark-mode': function () {
document.body.classList.toggle('theme-dark');
},
'primary-color': function () {
var classList = navbarPrimary.classList;
if (classList.contains('navbar-light')) {
classList.add('navbar-dark');
classList.remove('navbar-light');
} else {
classList.add('navbar-light');
classList.remove('navbar-dark');
}
},
'secondary-color': function () {
var classList = navbarSecondary.classList;
if (classList.contains('navbar-light')) {
classList.add('navbar-dark');
classList.remove('navbar-light');
} else {
classList.add('navbar-light');
classList.remove('navbar-dark');
}
},
'secondary-visible': function () {
navbarSecondary.classList.toggle('d-none');
},
};
for (var name in events) {
var event = events[name];
(function(event){
document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
event.call();
e.preventDefault();
return false;
});
})(event);
}
})();
</script>
{% endcapture_global %}