Skip to content

Add Theme Toggle #290

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add Theme Toggle #290

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
768d6f7
add pug editor config
jktravis Jan 11, 2025
24f70b6
add theme toggle
jktravis Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .editorconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,7 @@ indent_style = space
[*.js]
indent_size = 2
indent_style = space

[*.pug]
indent_size =
indent_style = space
2 changes: 2 additions & 0 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<title>Ramda Documentation</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<script type="text/javascript" src="/js/javascript.js"></script>
<script type="text/javascript" src="/js/theme.js"></script>
</head>
<body>
<input type="checkbox" id="open-nav">
Expand All @@ -24,6 +25,7 @@
<li><a href="/repl?v=0.30.1">Try Ramda</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" class="theme-toggle" id="theme-toggle"></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>
Expand Down
2 changes: 2 additions & 0 deletions docs/index.html.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<title>Ramda Documentation</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<script type="text/javascript" src="/js/javascript.js"></script>
<script type="text/javascript" src="/js/theme.js"></script>
</head>
<body>
<input type="checkbox" id="open-nav">
Expand All @@ -24,6 +25,7 @@
<li><a href="/repl?v={{version}}">Try Ramda</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" class="theme-toggle" id="theme-toggle"></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>
Expand Down
12 changes: 6 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!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>
<!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>
<p>A practical functional library for JavaScript programmers.</p>
<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>
<a href="https://www.npmjs.org/package/ramda"><img src="https://badge.fury.io/js/ramda.svg" alt="npm module"></a>
Expand Down Expand Up @@ -160,10 +160,10 @@ <h2 id="acknowledgements">Acknowledgements</h2>
Ramda logo artwork &copy; 2014 J. C. Phillipps. Licensed Creative Commons
<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">CC BY-NC-SA 3.0</a>.</p>
</article></main><script>window.gitter = {
chat: {
options: {
room: 'ramda/ramda'
}
}
chat: {
options: {
room: 'ramda/ramda'
}
}
}
</script><script async defer src="https://sidecar.gitter.im/dist/sidecar.v1.js"></script></body></html>
7 changes: 4 additions & 3 deletions index.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
extends layout.pug

block scripts
script(src="/js/javascript.js")
script(src="/js/javascript.js")
script(src="/js/theme.js")

block main
main.container
article!= readme
main.container
article!= readme
2 changes: 1 addition & 1 deletion js/javascript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ let mk_option = (selected) => (opt) => {

let mk_select = (opts, selected) => {
return `
<select onchange="handle_version_change(event, '${opts[0]}')" style="color:black">
<select onchange="handle_version_change(event, '${opts[0]}')">
${opts.map(mk_option(selected)).join("")}
</select>
`;
Expand Down
45 changes: 45 additions & 0 deletions js/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
const defaultTheme = 'light'

const body = document.querySelector("body");

function detect_theme() {
if (
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches
) {
return "dark";
} else if (window.matchMedia) {
return "light";
}
return defaultTheme;
}

function apply_theme() {
const theme = get_saved_theme()
document.body.classList.remove('light', 'dark')

document.body.classList.add(theme);
}

function save_theme(e) {
e.preventDefault();
const isDark = document.body.classList.contains('dark');
const theme = isDark ? 'light' : 'dark'
localStorage.setItem('theme', theme);
apply_theme()
}

function get_saved_theme() {
const theme = localStorage.getItem('theme')

return theme ? theme : detect_theme()
}

function init_theme() {
apply_theme()

const link = document.querySelector('#theme-toggle');
link.addEventListener('click', save_theme)
}

document.addEventListener('DOMContentLoaded', init_theme);
103 changes: 52 additions & 51 deletions layout.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,67 @@
doctype html
html(class=html_class)
- base_url = version == cur_version ? "/" : "/" + version + "/"
- base_url = version == cur_version ? "/" : "/" + version + "/"

head
meta(charset="UTF-8")
meta(
content="width=device-width, initial-scale=1"
name="viewport"
)
head
meta(charset="UTF-8")
meta(
content="width=device-width, initial-scale=1"
name="viewport"
)

title Ramda Documentation
title Ramda Documentation

link(
href=page == "repl" ? "/style.css" : "style.css"
rel="stylesheet"
type="text/css"
)
link(
href=page == "repl" ? "/style.css" : "style.css"
rel="stylesheet"
type="text/css"
)

block styles
block styles

block scripts
block scripts

body
input#open-nav(type="checkbox")
header.navbar.navbar-fixed-top.navbar-inverse.container-fluid
.container-fluid
.navbar-header
label.open-nav(for="open-nav")
span.navbar-brand
strong Ramda
span.version(data-version=`${version}`)
body(class="light")
input#open-nav(type="checkbox")
header.navbar.navbar-fixed-top.navbar-inverse.container-fluid
.container-fluid
.navbar-header
label.open-nav(for="open-nav")
span.navbar-brand
strong Ramda
span.version(data-version=`${version}`)

ul.nav.navbar-nav.navbar-left
- active = ('home' == page) ? 'active' : ''
- href = base_url
li(class=active): a.home-link(href=href) Home
ul.nav.navbar-nav.navbar-left
- active = ('home' == page) ? 'active' : ''
- href = base_url
li(class=active): a.home-link(href=href) Home

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

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

ul.nav.navbar-nav.navbar-right
li: a(href="https://github.com/ramda/ramda") GitHub
li: a(href="https://gitter.im/ramda/ramda") Discuss
ul.nav.navbar-nav.navbar-right
li: a(href="#" class="theme-toggle" id="theme-toggle" title="Theme")
li: a(href="https://github.com/ramda/ramda") GitHub
li: a(href="https://gitter.im/ramda/ramda") Discuss

block main
block main

script.
window.gitter = {
chat: {
options: {
room: 'ramda/ramda'
}
}
}
script.
window.gitter = {
chat: {
options: {
room: 'ramda/ramda'
}
}
}

script(
async
defer
src="https://sidecar.gitter.im/dist/sidecar.v1.js"
)
script(
async
defer
src="https://sidecar.gitter.im/dist/sidecar.v1.js"
)
24 changes: 3 additions & 21 deletions less/card.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
border: 1px solid #fff;
box-shadow: 0 0 0 1px #ccc;
padding: @padding;
background: #fff;
//background: #fff;
border-radius: @radius;

pre {
Expand Down Expand Up @@ -64,14 +64,6 @@

.details {
margin-top: @padding-base-vertical;

@media (prefers-color-scheme: dark) {
background-color: @dark-bg-100;

.list-group-item {
background-color: transparent;
}
}
}

.type {
Expand All @@ -82,15 +74,5 @@
color: @deprecated-color;
}

@media (prefers-color-scheme: dark) {
color: white;
background-color: @dark-bg-100;
border-color: @dark-bg-200;
box-shadow: 0 0 0 1px @dark-bg-200;

:not(pre) > code {
color: white;
background: @dark-bg-200;
}
}
}
background-color: --var(--background-color);
}
10 changes: 1 addition & 9 deletions less/custom.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
/*
Custimizations on top of base style.css
Customizations on top of base style.css
*/

:root {
color-scheme: light dark;
}


/* Fixes long function names
in sidebar which cause the category label
to overflow the enclosing <li>
Expand All @@ -24,7 +19,4 @@
/* reset <pre> formatting for .symbol class */
.card .symbol {
margin: 0;
color: #333333;
background: white;
}

Loading