Skip to content

Commit 7509d0b

Browse files
libhidelibhide
committed
Add dark mode. This fixes #2
Add dark mode style and functionality Update demo to work with dark mode
1 parent 780ee00 commit 7509d0b

13 files changed

Lines changed: 278 additions & 30 deletions

‎demo/css/simplebox.css‎

Lines changed: 23 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/css/style.css‎

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@ body {
22
font-size: 1.125em;
33
line-height: 1.6;
44
font-family: Avenir, sans-serif;
5+
font-weight: 400;
6+
transition: background-color 300ms ease-in-out;
7+
}
8+
9+
.invert {
10+
color: #fff;
11+
background-color: #000;
12+
border-color: white;
13+
font-weight: 300;
514
}
615

716
img {
@@ -14,14 +23,23 @@ a {
1423
text-decoration: none;
1524
color: black;
1625
border-bottom: 1px solid rgba(0, 0, 0, 0);
17-
transition: border-color 200ms ease-in;
26+
transition: all 200ms ease-in;
1827
padding-bottom: -2px;
1928
}
2029

2130
a:hover {
2231
border-color: rgba(0, 0, 0, 0.6);
2332
}
2433

34+
.link--invert {
35+
color: white;
36+
border-bottom: 1px solid rgba(255, 255, 255, 0);
37+
}
38+
39+
.link--invert:hover {
40+
border-color: rgba(255, 255, 255, 0.6);
41+
}
42+
2543
.container {
2644
max-width: 660px;
2745
margin: 0 auto;
@@ -41,6 +59,11 @@ a:hover {
4159
border-bottom: 4px solid black;
4260
}
4361

62+
.title--invert {
63+
border-color: white;
64+
transition: border-color 300ms ease-in-out;
65+
}
66+
4467
.subtitle {
4568
font-weight: 400;
4669
text-transform: uppercase;
@@ -68,13 +91,22 @@ a:hover {
6891
width: 25px;
6992
}
7093

94+
.switch {
95+
position: absolute;
96+
left: 0;
97+
bottom: 0;
98+
margin: 0 0 20px 20px;
99+
font-size: 0.8em;
100+
}
101+
71102
/* Media Queries */
72103
@media (max-width: 660px) {
73104
.credits {
74105
position: static;
75106
text-align: center;
76107
margin: 140px 0 0 0;
77108
}
109+
.switch {
110+
display: none;
111+
}
78112
}
79-
80-

‎demo/css/switch.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/*
2+
Credits: Malik Dellidj
3+
http://codepen.io/kowlor/pen/ByavWB
4+
*/
5+
6+
input.sw {
7+
opacity: 0;
8+
position: absolute;
9+
left: -9999px;
10+
}
11+
12+
input.sw + label {
13+
-webkit-user-select: none;
14+
-moz-user-select: none;
15+
-ms-user-select: none;
16+
user-select: none;
17+
transition: .2s ease;
18+
display: inline-block;
19+
height: 30px;
20+
width: 51px;
21+
position: relative;
22+
box-shadow: inset 0 0 0px 2px #e4e4e4;
23+
border-radius: 60px;
24+
}
25+
26+
input.sw + label:before {
27+
content: "";
28+
position: absolute;
29+
display: block;
30+
height: 30px;
31+
width: 30px;
32+
top: 0;
33+
left: 0;
34+
border-radius: 15px;
35+
background: rgba(76, 217, 100, 0);
36+
transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
37+
}
38+
39+
input.sw + label:after {
40+
content: "";
41+
position: absolute;
42+
display: block;
43+
height: 28px;
44+
width: 28px;
45+
top: 50%;
46+
margin-top: -14px;
47+
left: 1px;
48+
border-radius: 60px;
49+
background: #000;
50+
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 0px 0 rgba(255, 255, 255, 0.04), 0 4px 9px rgba(255, 255, 255, 0.13), 0 3px 3px rgba(255, 255, 255, 0.05);
51+
transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
52+
}
53+
54+
input.sw:checked + label:after {
55+
background: #fff;
56+
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 4px 0px 0 rgba(0, 0, 0, 0.07), 0 4px 9px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.08);
57+
}
58+
59+
input.sw + label span {
60+
white-space: nowrap;
61+
height: 30px;
62+
line-height: 30px;
63+
margin-left: 45px;
64+
padding-left: 16px;
65+
}
66+
67+
input.sw:checked + label:before {
68+
width: 51px;
69+
background: #fff;
70+
transition: width 0.2s cubic-bezier(0, 0, 0, 0.1) !important;
71+
}
72+
73+
input.sw:checked + label:after {
74+
left: 22px;
75+
}
76+
77+
input.sw:checked + label {
78+
box-shadow: inset 0 0 0px 25px #e4e4e4;
79+
transition: box-shadow 2.5s cubic-bezier(0, 1.2, 0.94, 0.95);
80+
}

‎demo/img/click-me_invert.jpg‎

58.7 KB
Loading

‎demo/index.html‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,25 @@
55
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
66
<link rel="stylesheet" type="text/css" href="css/simplebox.css">
77
<link rel="stylesheet" type="text/css" href="css/style.css">
8+
<link rel="stylesheet" type="text/css" href="css/switch.css">
89
<meta name="viewport" content="width=device-width, initial-scale=1.0">
910
</head>
1011
<body>
1112

1213
<div class="container">
1314
<h1 class="title">simplebox.js Demo</h1>
15+
1416
<p class="center-reset">This is a quick little demo showcasing simplebox.js and how it works. This lightbox plugin is intended to be a quick, responsive, efficient. One key goal while creating this plugin was to not have an effect on load times for a website using the plugin. The lack of options/settings in the plugin is a feature and not a demerit.</p>
1517
<h3 class="subtitle center-reset">Give it a go</h3>
1618
<img class="slb" src="img/click-me.jpg">
1719
<p class="center-reset">Isn't that super neat? So, what are you waiting for? Head onto the <strong>/dist</strong> folder and begin using the plugin!</p>
1820

21+
<!-- Theme Toggle -->
22+
<div class="switch">
23+
<input type="checkbox" name="toggle" class="sw" id="toggle">
24+
<label for="toggle"><span id="switch-label">switch to dark mode</span></label>
25+
</div>
26+
1927
<p class="credits">
2028
Made with <img class="heart" src="img/heart.svg"> by <a target="_blank" href="http://ratiksharma.com">Ratik Sharma</a></p>
2129
</p>
@@ -26,9 +34,17 @@ <h3 class="subtitle center-reset">Give it a go</h3>
2634
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
2735
<script type="text/javascript" src="js/simplebox.js"></script>
2836
<script type="text/javascript">
37+
// Plugin call
2938
$('.slb').simplebox({
30-
fadeSpeed: 350
39+
fadeSpeed: 350,
40+
// UNCOMMENT THIS FOR DARK MODE
41+
// darkMode: true
3142
});
3243
</script>
44+
<script type="text/javascript" src="js/demo.js"></script>
3345
</body>
34-
</html>
46+
</html>
47+
48+
49+
50+

‎demo/js/demo.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
var $switch = $('.sw');
2+
var $switchLabel = $('#switch-label');
3+
4+
function isSwitchChecked() {
5+
return $switch.is(':checked');
6+
}
7+
8+
function toggleSwitchText() {
9+
if (isSwitchChecked()) {
10+
$switchLabel.text('switch to light mode');
11+
setTimeout(function() {
12+
alert('Please uncomment the darkMode option within index.html and refresh this page to active dark mode.');
13+
}, 500);
14+
} else {
15+
$switchLabel.text('switch to dark mode');
16+
setTimeout(function() {
17+
alert('Please comment out the darkMode option within index.html and refresh this page to active light mode.');
18+
}, 500);
19+
}
20+
}
21+
22+
$switch.change(function() {
23+
// Change the theme
24+
$('body').toggleClass('invert');
25+
$('.title').toggleClass('title--invert');
26+
$('.credits a').toggleClass('link--invert');
27+
toggleSwitchText();
28+
});

‎demo/js/simplebox.js‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
(function ($) {
44
$.fn.simplebox = function(options) {
55
var settings = $.extend({
6-
fadeSpeed: 400
6+
fadeSpeed: 400,
7+
darkMode: false
78
}, options);
89

910
// Helper Variables
@@ -14,10 +15,21 @@
1415
var fadeSpeed = settings.fadeSpeed;
1516
var lbIsOpen = false;
1617

18+
// Modifying theme based on preference
19+
if (settings.darkMode) {
20+
$overlay.css('background-color', 'black');
21+
$cross.addClass('cross--dark');
22+
$('.slb').addClass('slb--invert');
23+
$image.addClass('slb--invert');
24+
} else {
25+
$overlay.css('background-color', 'white');
26+
$cross.addClass('cross--light');
27+
}
28+
1729
// Function for hiding the overlay.
1830
var hideOverlay = function() {
1931
$overlay.fadeOut(fadeSpeed);
20-
$image.removeClass('slb-opened');
32+
$image.removeClass('slb--opened');
2133
lbIsOpen = false;
2234
$body.css("overflow", "auto");
2335
};
@@ -50,7 +62,7 @@
5062
$image.addClass('pop-in');
5163
$image.removeClass('pop-out');
5264
$image.addClass('center');
53-
$image.addClass('slb-opened');
65+
$image.addClass('slb--opened');
5466

5567
$overlay.css('pointer-events', 'initial');
5668

‎dist/css/simplebox.css‎

Lines changed: 23 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)