mirror of
https://github.com/apankrat/nullboard.git
synced 2025-08-07 13:46:43 +02:00
create board theme switcher
toggles between light and dark mode
This commit is contained in:
@@ -160,7 +160,7 @@ body.crowded .board {
|
|||||||
right: 0;
|
right: 0;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
padding: 5px 6px 7px 30px;
|
padding: 5px 6px 7px 30px;
|
||||||
background: linear-gradient(to right, #EAEDF000, #EAEDF0 10px);
|
background: #eaedf0;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
@@ -195,7 +195,7 @@ body.crowded .board {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.board>.head {
|
.board>.head {
|
||||||
background: #EAEDF0;
|
background: #eaedf0;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
margin: 0 0 10px;
|
margin: 0 0 10px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
@@ -230,7 +230,7 @@ body.crowded .board {
|
|||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
margin: 0 5px 10px;
|
margin: 0 5px 10px;
|
||||||
background: linear-gradient(#EAEDF0 30px, #DDE1E5 90px);
|
background: #eaedf0;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -1640,7 +1640,48 @@
|
|||||||
|
|
||||||
//Toggle board theme
|
//Toggle board theme
|
||||||
$('.theme-swap').click(function() {
|
$('.theme-swap').click(function() {
|
||||||
|
var $body = $('body');
|
||||||
|
var $head = $('.head');
|
||||||
|
var $config = $('.config');
|
||||||
|
var $config_items = $('.config a');
|
||||||
|
var $list = $('.list');
|
||||||
|
var $menu = $('.menu');
|
||||||
|
var $menu_items = $('.menu a');
|
||||||
|
var $note = $('.note');
|
||||||
|
var $note_raw = $('.note.raw');
|
||||||
|
var $textarea = $('textarea');
|
||||||
|
var $input = $('input');
|
||||||
|
var $teaser = $('.teaser');
|
||||||
|
|
||||||
|
if ($body.css('background-color') === 'rgb(248, 249, 251)') {
|
||||||
|
$body.css({'background-color': '#252525', 'color': '#ddd'});
|
||||||
|
$head.css('background-color', '#454545');
|
||||||
|
$config.css('background-color', '#454545');
|
||||||
|
$list.css('background-color', '#454545');
|
||||||
|
$menu.css('background-color', '#454545');
|
||||||
|
$note.css({'background-color': '#656565', 'box-shadow': '0 1px 2px #656565, 0 0 1px #959595'});
|
||||||
|
$note_raw.css({'background-color': '#454545', 'box-shadow': '0 1px 2px #454545, 0 0 1px #656565'});
|
||||||
|
$textarea.css('background-color', '#959595');
|
||||||
|
$input.css('background-color', '#959595');
|
||||||
|
$teaser.css('color', '#ddd');
|
||||||
|
$menu_items.css('color', '#ddd');
|
||||||
|
$config_items.css('color', '#ddd');
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
$body.css({'background-color': '#f8f9fb', 'color': '#000'});
|
||||||
|
$head.css('background-color', '#eaedf0');
|
||||||
|
$config.css('background-color', '#f8f9fb');
|
||||||
|
$list.css('background-color', '#eaedf0');
|
||||||
|
$menu.css('background-color', '#eaedf0');
|
||||||
|
$note.css({'background-color': '#fff', 'box-shadow': '0 1px 2px #bbb, 0 0 1px #ddd'});
|
||||||
|
$note_raw.css({'background-color': '#eaedf0', 'box-shadow': '0 1px 2px #bbb, 0 0 1px #ddd'});
|
||||||
|
$textarea.css('background-color', '#fff');
|
||||||
|
$input.css('background-color', '#fff');
|
||||||
|
$teaser.css('color', '#000');
|
||||||
|
$menu_items.css('color', '#000');
|
||||||
|
$config_items.css('color', '#000');
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
//
|
//
|
||||||
|
Reference in New Issue
Block a user