Skip to content

Commit 4f288bf

Browse files
jktravisjktravis
committed
add theme toggle
1 parent 768d6f7 commit 4f288bf

9 files changed

+137
-92
lines changed

‎docs/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
<li><a href="/repl?v=0.30.1">Try Ramda</a></li>
2525
</ul>
2626
<ul class="nav navbar-nav navbar-right">
27+
<li><a href="#" id="theme-toggle"><span class="glyphicon glyphicon-adjust"></span></a></li>
2728
<li><a href="https://github.com/ramda/ramda">GitHub</a></li>
2829
<li><a href="https://gitter.im/ramda/ramda">Discuss</a></li>
2930
</ul>

‎docs/index.html.handlebars

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
<li><a href="/repl?v={{version}}">Try Ramda</a></li>
2525
</ul>
2626
<ul class="nav navbar-nav navbar-right">
27+
<li><a href="#" id="theme-toggle"><span class="glyphicon glyphicon-adjust"></span></a></li>
2728
<li><a href="https://github.com/ramda/ramda">GitHub</a></li>
2829
<li><a href="https://gitter.im/ramda/ramda">Discuss</a></li>
2930
</ul>

‎index.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html><html class="home-page"><head><meta charset="UTF-8"><meta content="width=device-width, initial-scale=1" name="viewport"><title>Ramda Documentation</title><link href="style.css" rel="stylesheet" type="text/css"><script src="/js/javascript.js"></script></head><body><input id="open-nav" type="checkbox"><header class="navbar navbar-fixed-top navbar-inverse container-fluid"><div class="container-fluid"><div class="navbar-header"><label class="open-nav" for="open-nav"></label><span class="navbar-brand"><strong>Ramda</strong><span class="version" data-version="0.30.1"></span></span></div><ul class="nav navbar-nav navbar-left"><li class="active"><a class="home-link" href="/">Home</a></li><li><a class="docs-link" href="/docs">Documentation</a></li><li><a class="repl-link" href="/repl/?v=0.30.1">Try Ramda</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="https://github.com/ramda/ramda">GitHub</a></li><li><a href="https://gitter.im/ramda/ramda">Discuss</a></li></ul></div></header><main class="container"><article><h1 id="ramda">Ramda</h1>
1+
<!DOCTYPE html><html class="home-page"><head><meta charset="UTF-8"><meta content="width=device-width, initial-scale=1" name="viewport"><title>Ramda Documentation</title><link href="style.css" rel="stylesheet" type="text/css"><script src="/js/javascript.js"></script></head><body class="light"><input id="open-nav" type="checkbox"><header class="navbar navbar-fixed-top navbar-inverse container-fluid"><div class="container-fluid"><div class="navbar-header"><label class="open-nav" for="open-nav"></label><span class="navbar-brand"><strong>Ramda</strong><span class="version" data-version="0.30.1"></span></span></div><ul class="nav navbar-nav navbar-left"><li class="active"><a class="home-link" href="/">Home</a></li><li><a class="docs-link" href="/docs">Documentation</a></li><li><a class="repl-link" href="/repl/?v=0.30.1">Try Ramda</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#" id="theme-toggle" title="Theme"><span class="glyphicon glyphicon-adjust"></span></a></li><li><a href="https://github.com/ramda/ramda">GitHub</a></li><li><a href="https://gitter.im/ramda/ramda">Discuss</a></li></ul></div></header><main class="container"><article><h1 id="ramda">Ramda</h1>
22
<p>A practical functional library for JavaScript programmers.</p>
33
<p><a href="https://github.com/ramda/ramda/actions?query=workflow%3ABuild"><img src="https://github.com/ramda/ramda/workflows/Build/badge.svg" alt="Build Status"></a>
44
<a href="https://www.npmjs.org/package/ramda"><img src="https://badge.fury.io/js/ramda.svg" alt="npm module"></a>
@@ -160,10 +160,10 @@ <h2 id="acknowledgements">Acknowledgements</h2>
160160
Ramda logo artwork &copy; 2014 J. C. Phillipps. Licensed Creative Commons
161161
<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">CC BY-NC-SA 3.0</a>.</p>
162162
</article></main><script>window.gitter = {
163-
chat: {
164-
options: {
165-
room: 'ramda/ramda'
166-
}
167-
}
163+
chat: {
164+
options: {
165+
room: 'ramda/ramda'
166+
}
167+
}
168168
}
169169
</script><script async defer src="https://sidecar.gitter.im/dist/sidecar.v1.js"></script></body></html>

‎js/javascript.js

+24-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ let mk_option = (selected) => (opt) => {
3636

3737
let mk_select = (opts, selected) => {
3838
return `
39-
<select onchange="handle_version_change(event, '${opts[0]}')" style="color:black">
39+
<select onchange="handle_version_change(event, '${opts[0]}')">
4040
${opts.map(mk_option(selected)).join("")}
4141
</select>
4242
`;
@@ -86,7 +86,30 @@ let init = async () => {
8686
if (version_container_el == null) return;
8787
version_container_el.innerHTML = mk_select(versions, active_version);
8888
init_repl_nav_links(versions, active_version);
89+
90+
apply_theme()
91+
save_theme()
8992
};
9093

94+
function apply_theme() {
95+
const theme = localStorage.getItem('theme') || 'light'
96+
document.body.classList.remove('light', 'dark')
97+
98+
document.body.classList.add(theme);
99+
}
100+
101+
function save_theme() {
102+
const link = document.querySelector('#theme-toggle');
103+
104+
link.addEventListener('click', (e) => {
105+
e.preventDefault();
106+
const isDark = document.body.classList.contains('dark');
107+
const theme = isDark ? 'light' : 'dark'
108+
localStorage.setItem('theme', theme);
109+
apply_theme()
110+
})
111+
}
112+
113+
91114
document.addEventListener('DOMContentLoaded', init);
92115

‎layout.pug

+54-51
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,69 @@
11
doctype html
22
html(class=html_class)
3-
- base_url = version == cur_version ? "/" : "/" + version + "/"
3+
- base_url = version == cur_version ? "/" : "/" + version + "/"
44

5-
head
6-
meta(charset="UTF-8")
7-
meta(
8-
content="width=device-width, initial-scale=1"
9-
name="viewport"
10-
)
5+
head
6+
meta(charset="UTF-8")
7+
meta(
8+
content="width=device-width, initial-scale=1"
9+
name="viewport"
10+
)
1111

12-
title Ramda Documentation
12+
title Ramda Documentation
1313

14-
link(
15-
href=page == "repl" ? "/style.css" : "style.css"
16-
rel="stylesheet"
17-
type="text/css"
18-
)
14+
link(
15+
href=page == "repl" ? "/style.css" : "style.css"
16+
rel="stylesheet"
17+
type="text/css"
18+
)
1919

20-
block styles
20+
block styles
2121

22-
block scripts
22+
block scripts
2323

24-
body
25-
input#open-nav(type="checkbox")
26-
header.navbar.navbar-fixed-top.navbar-inverse.container-fluid
27-
.container-fluid
28-
.navbar-header
29-
label.open-nav(for="open-nav")
30-
span.navbar-brand
31-
strong Ramda
32-
span.version(data-version=`${version}`)
24+
body(class="light")
25+
input#open-nav(type="checkbox")
26+
header.navbar.navbar-fixed-top.navbar-inverse.container-fluid
27+
.container-fluid
28+
.navbar-header
29+
label.open-nav(for="open-nav")
30+
span.navbar-brand
31+
strong Ramda
32+
span.version(data-version=`${version}`)
3333

34-
ul.nav.navbar-nav.navbar-left
35-
- active = ('home' == page) ? 'active' : ''
36-
- href = base_url
37-
li(class=active): a.home-link(href=href) Home
34+
ul.nav.navbar-nav.navbar-left
35+
- active = ('home' == page) ? 'active' : ''
36+
- href = base_url
37+
li(class=active): a.home-link(href=href) Home
3838

39-
- active = ('docs' == page) ? 'active' : ''
40-
- href = base_url + "docs"
41-
li(class=active): a.docs-link(href=href) Documentation
39+
- active = ('docs' == page) ? 'active' : ''
40+
- href = base_url + "docs"
41+
li(class=active): a.docs-link(href=href) Documentation
4242

43-
- active = ('repl' == page) ? 'active' : ''
44-
- href = "/repl/?v=" + version
45-
li(class=active): a.repl-link(href=href) Try Ramda
43+
- active = ('repl' == page) ? 'active' : ''
44+
- href = "/repl/?v=" + version
45+
li(class=active): a.repl-link(href=href) Try Ramda
4646

47-
ul.nav.navbar-nav.navbar-right
48-
li: a(href="https://github.com/ramda/ramda") GitHub
49-
li: a(href="https://gitter.im/ramda/ramda") Discuss
47+
ul.nav.navbar-nav.navbar-right
48+
li: a(href="#" id="theme-toggle" title="Theme")
49+
span(class="glyphicon glyphicon-adjust")
5050

51-
block main
51+
li: a(href="https://github.com/ramda/ramda") GitHub
52+
li: a(href="https://gitter.im/ramda/ramda") Discuss
5253

53-
script.
54-
window.gitter = {
55-
chat: {
56-
options: {
57-
room: 'ramda/ramda'
58-
}
59-
}
60-
}
54+
block main
6155

62-
script(
63-
async
64-
defer
65-
src="https://sidecar.gitter.im/dist/sidecar.v1.js"
66-
)
56+
script.
57+
window.gitter = {
58+
chat: {
59+
options: {
60+
room: 'ramda/ramda'
61+
}
62+
}
63+
}
64+
65+
script(
66+
async
67+
defer
68+
src="https://sidecar.gitter.im/dist/sidecar.v1.js"
69+
)

‎less/card.less

+15-10
Original file line numberDiff line numberDiff line change
@@ -64,14 +64,6 @@
6464

6565
.details {
6666
margin-top: @padding-base-vertical;
67-
68-
@media (prefers-color-scheme: dark) {
69-
background-color: @dark-bg-100;
70-
71-
.list-group-item {
72-
background-color: transparent;
73-
}
74-
}
7567
}
7668

7769
.type {
@@ -81,8 +73,10 @@
8173
.deprecated {
8274
color: @deprecated-color;
8375
}
76+
}
8477

85-
@media (prefers-color-scheme: dark) {
78+
body.dark {
79+
.card {
8680
color: white;
8781
background-color: @dark-bg-100;
8882
border-color: @dark-bg-200;
@@ -93,4 +87,15 @@
9387
background: @dark-bg-200;
9488
}
9589
}
96-
}
90+
.details {
91+
@media (prefers-color-scheme: dark) {
92+
background-color: @dark-bg-100;
93+
94+
.list-group-item {
95+
background-color: transparent;
96+
}
97+
}
98+
}
99+
100+
101+
}

‎less/layout.less

+22-18
Original file line numberDiff line numberDiff line change
@@ -50,18 +50,19 @@ html.home-page {
5050
// margin-top: 0;
5151
padding-top: @navbar-height;
5252

53-
@media (prefers-color-scheme: dark) {
54-
background-color: @dark-bg-100;
55-
}
5653
}
5754

5855
main {
5956
background: #fff;
6057
border: 1px solid white;
6158
box-shadow: 0 0 0 1px #ccc;
6259
border-radius: @border-radius-base;
60+
}
6361

64-
@media (prefers-color-scheme: dark) {
62+
body.dark {
63+
background-color: @dark-bg-100;
64+
65+
main {
6566
color: white;
6667
background-color: @dark-bg-100;
6768
border-color: @dark-bg-200;
@@ -73,6 +74,7 @@ html.home-page {
7374
}
7475
}
7576
}
77+
7678
}
7779

7880
/**
@@ -86,7 +88,7 @@ html.docs-page {
8688
header .navbar-left {
8789
transform: translateX(-@sidebar-width);
8890
}
89-
91+
9092
header .navbar-left,
9193
aside, main {
9294
transition: transform 100ms ease-in;
@@ -100,26 +102,28 @@ html.docs-page {
100102
width: @sidebar-width;
101103
transform: translateX(-@sidebar-width);
102104

103-
@media (prefers-color-scheme: dark) {
104-
color: white;
105-
background-color: @dark-bg-100;
106-
}
107105
}
108106

109107
main {
110108
.main-content();
111109
min-width: 320px;
112110
}
113-
111+
114112
body {
115113
background: #eee;
116114
overflow-x: hidden; /* 1 */
115+
}
117116

118-
@media (prefers-color-scheme: dark) {
117+
body.dark {
118+
background-color: @dark-bg-100;
119+
120+
aside {
121+
color: white;
119122
background-color: @dark-bg-100;
120123
}
121124
}
122125

126+
123127
#open-nav:checked ~ header .navbar-left,
124128
#open-nav:checked ~ aside {
125129
transform: translateX(0);
@@ -139,12 +143,12 @@ html.docs-page {
139143
position: fixed;
140144
transform: translateX(0);
141145
}
142-
146+
143147
header .navbar-left,
144148
#open-nav:checked ~ header .navbar-left {
145149
transform: translateX(0);
146150
}
147-
151+
148152
main,
149153
#open-nav:checked ~ main {
150154
transform: translateX(0);
@@ -160,23 +164,23 @@ html.docs-page {
160164
aside {
161165
display: none;
162166
}
163-
167+
164168
a[title="View source on GitHub"] {
165169
display: none;
166170
}
167-
171+
168172
.try-repl {
169173
display: none;
170174
}
171-
175+
172176
h2 {
173177
font-size: 20px;
174178
}
175-
179+
176180
.params a {
177181
display: none;
178182
}
179-
183+
180184
.card div code {
181185
padding: 0;
182186
}

‎less/sidebar.less

+13-5
Original file line numberDiff line numberDiff line change
@@ -40,16 +40,24 @@
4040

4141
&:hover {
4242
background: #e4e4e4;
43-
44-
@media (prefers-color-scheme: dark) {
45-
background-color: @dark-bg-200;
46-
}
4743
}
4844
}
4945

50-
@media (prefers-color-scheme: dark) {
46+
}
47+
}
48+
49+
body.dark {
50+
.sidebar {
51+
.toc {
5152
background-color: @dark-bg-100;
5253
border-top-color: @dark-bg-200;
54+
55+
a {
56+
&:hover {
57+
background-color: @dark-bg-200;
58+
}
59+
}
5360
}
61+
5462
}
5563
}

‎style.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)