Skip to content

Commit 24f70b6

Browse files
jktravisjktravis
committed
add theme toggle
1 parent 768d6f7 commit 24f70b6

14 files changed

+254
-136
lines changed

‎docs/index.html

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<title>Ramda Documentation</title>
77
<link rel="stylesheet" type="text/css" href="../style.css">
88
<script type="text/javascript" src="/js/javascript.js"></script>
9+
<script type="text/javascript" src="/js/theme.js"></script>
910
</head>
1011
<body>
1112
<input type="checkbox" id="open-nav">
@@ -24,6 +25,7 @@
2425
<li><a href="/repl?v=0.30.1">Try Ramda</a></li>
2526
</ul>
2627
<ul class="nav navbar-nav navbar-right">
28+
<li><a href="#" class="theme-toggle" id="theme-toggle"></a></li>
2729
<li><a href="https://github.com/ramda/ramda">GitHub</a></li>
2830
<li><a href="https://gitter.im/ramda/ramda">Discuss</a></li>
2931
</ul>

‎docs/index.html.handlebars

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<title>Ramda Documentation</title>
77
<link rel="stylesheet" type="text/css" href="../style.css">
88
<script type="text/javascript" src="/js/javascript.js"></script>
9+
<script type="text/javascript" src="/js/theme.js"></script>
910
</head>
1011
<body>
1112
<input type="checkbox" id="open-nav">
@@ -24,6 +25,7 @@
2425
<li><a href="/repl?v={{version}}">Try Ramda</a></li>
2526
</ul>
2627
<ul class="nav navbar-nav navbar-right">
28+
<li><a href="#" class="theme-toggle" id="theme-toggle"></a></li>
2729
<li><a href="https://github.com/ramda/ramda">GitHub</a></li>
2830
<li><a href="https://gitter.im/ramda/ramda">Discuss</a></li>
2931
</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><script src="/js/theme.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 class="theme-toggle" href="#" id="theme-toggle" title="Theme"></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>

‎index.pug

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
extends layout.pug
22

33
block scripts
4-
script(src="/js/javascript.js")
4+
script(src="/js/javascript.js")
5+
script(src="/js/theme.js")
56

67
block main
7-
main.container
8-
article!= readme
8+
main.container
9+
article!= readme

‎js/javascript.js

+1-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
`;

‎js/theme.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const defaultTheme = 'light'
2+
3+
const body = document.querySelector("body");
4+
5+
function detect_theme() {
6+
if (
7+
window.matchMedia &&
8+
window.matchMedia("(prefers-color-scheme: dark)").matches
9+
) {
10+
return "dark";
11+
} else if (window.matchMedia) {
12+
return "light";
13+
}
14+
return defaultTheme;
15+
}
16+
17+
function apply_theme() {
18+
const theme = get_saved_theme()
19+
document.body.classList.remove('light', 'dark')
20+
21+
document.body.classList.add(theme);
22+
}
23+
24+
function save_theme(e) {
25+
e.preventDefault();
26+
const isDark = document.body.classList.contains('dark');
27+
const theme = isDark ? 'light' : 'dark'
28+
localStorage.setItem('theme', theme);
29+
apply_theme()
30+
}
31+
32+
function get_saved_theme() {
33+
const theme = localStorage.getItem('theme')
34+
35+
return theme ? theme : detect_theme()
36+
}
37+
38+
function init_theme() {
39+
apply_theme()
40+
41+
const link = document.querySelector('#theme-toggle');
42+
link.addEventListener('click', save_theme)
43+
}
44+
45+
document.addEventListener('DOMContentLoaded', init_theme);

‎layout.pug

+52-51
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,67 @@
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="#" class="theme-toggle" id="theme-toggle" title="Theme")
49+
li: a(href="https://github.com/ramda/ramda") GitHub
50+
li: a(href="https://gitter.im/ramda/ramda") Discuss
5051

51-
block main
52+
block main
5253

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

62-
script(
63-
async
64-
defer
65-
src="https://sidecar.gitter.im/dist/sidecar.v1.js"
66-
)
63+
script(
64+
async
65+
defer
66+
src="https://sidecar.gitter.im/dist/sidecar.v1.js"
67+
)

‎less/card.less

+3-21
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
border: 1px solid #fff;
99
box-shadow: 0 0 0 1px #ccc;
1010
padding: @padding;
11-
background: #fff;
11+
//background: #fff;
1212
border-radius: @radius;
1313

1414
pre {
@@ -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 {
@@ -82,15 +74,5 @@
8274
color: @deprecated-color;
8375
}
8476

85-
@media (prefers-color-scheme: dark) {
86-
color: white;
87-
background-color: @dark-bg-100;
88-
border-color: @dark-bg-200;
89-
box-shadow: 0 0 0 1px @dark-bg-200;
90-
91-
:not(pre) > code {
92-
color: white;
93-
background: @dark-bg-200;
94-
}
95-
}
96-
}
77+
background-color: --var(--background-color);
78+
}

‎less/custom.less

+1-9
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
/*
2-
Custimizations on top of base style.css
2+
Customizations on top of base style.css
33
*/
44

5-
:root {
6-
color-scheme: light dark;
7-
}
8-
9-
105
/* Fixes long function names
116
in sidebar which cause the category label
127
to overflow the enclosing <li>
@@ -24,7 +19,4 @@
2419
/* reset <pre> formatting for .symbol class */
2520
.card .symbol {
2621
margin: 0;
27-
color: #333333;
28-
background: white;
2922
}
30-

0 commit comments

Comments
 (0)