Add dark/light color mode
Committed 1aaef8
--- a/canopy/static/enliven.js
+++ b/canopy/static/enliven.js
// TODO $.load(...)
document.addEventListener('DOMContentLoaded', ev => {
+ let currentColorMode = cookies.get('colormode')
+ if (!currentColorMode) {
+ cookies.set('colormode', 'dark')
+ currentColorMode = 'dark'
+ }
+ document.documentElement.className = currentColorMode
+
microphoneStatus('off')
+ colormode.onmouseup = toggleColorMode
listen.onmouseup = initDictation
join.onmouseup = initChat
document.querySelector('body').style.backgroundImage = 'url(/static/measure.png)'
cookies.set('rhythm', 'on')
}
+ } else if (ev.altKey && ev.key == 'c') { // A-c toggle color mode
+ toggleColorMode()
} else {
switch (ev.key) {
case '?': showGuide(); break // ? show the site guide
document.querySelectorAll('.followlink').forEach(e => e.remove())
}
+const toggleColorMode = () => {
+ mode = 'dark'
+ if (document.documentElement.className == 'dark')
+ mode = 'light'
+ cookies.set('colormode', mode)
+ document.documentElement.className = mode
+}
+
const initDictation = async () => {
microphoneStatus('loading')
const partialContainer = document.querySelector('#search .partial')
color = 'dc322f'
else if (mode == 'active')
color = '268bd2'
- icon = `<path d="M7 7.40991C7 6.08383 7.52677 4.81207 8.46445 3.87439C9.40213 2.93671 10.6739 2.40991 12 2.40991C13.3261 2.40991 14.5978 2.93671 15.5355 3.87439C16.4732 4.81207 17 6.08383 17 7.40991V13.4099C17 14.736 16.4732 16.0079 15.5355 16.9456C14.5978 17.8832 13.3261 18.4099 12 18.4099C10.6739 18.4099 9.40213 17.8832 8.46445 16.9456C7.52677 16.0079 7 14.736 7 13.4099V7.40991Z" stroke="#${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 13.4099C21 15.7969 20.0518 18.0861 18.364 19.7739C16.6761 21.4618 14.3869 22.4099 12 22.4099C9.61305 22.4099 7.32384 21.4618 5.63602 19.7739C3.94819 18.0861 3 15.7969 3 13.4099" stroke="#${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`
+ icon = `<path d="
+ M7 7.40991C7 6.08383 7.52677 4.81207 8.46445 3.87439C9.40213 2.93671
+ 10.6739 2.40991 12 2.40991C13.3261 2.40991 14.5978 2.93671 15.5355
+ 3.87439C16.4732 4.81207 17 6.08383 17 7.40991V13.4099C17 14.736
+ 16.4732 16.0079 15.5355 16.9456C14.5978 17.8832 13.3261 18.4099 12
+ 18.4099C10.6739 18.4099 9.40213 17.8832 8.46445 16.9456C7.52677
+ 16.0079 7 14.736 7 13.4099V7.40991Z"
+ stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="
+ M21 13.4099C21 15.7969 20.0518 18.0861 18.364 19.7739C16.6761 21.4618
+ 14.3869 22.4099 12 22.4099C9.61305 22.4099 7.32384 21.4618 5.63602
+ 19.7739C3.94819 18.0861 3 15.7969 3 13.4099"
+ stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`
} else if (mode == 'off' || mode == 'loading') {
- if (mode == 'off')
- color = '586e75'
- else if (mode == 'loading')
+ if (mode == 'off') {
+ color = '93a1a1'
+ if (cookies.get('colormode') == 'dark')
+ color = '586e75'
+ } else if (mode == 'loading')
color = '6c71c4'
- icon = `<path d="M17.0005 11.24V13C17.0005 14.3261 16.4737 15.5978 15.536 16.5355C14.5983 17.4732 13.3266 18 12.0005 18C11.4846 17.9975 10.972 17.9166 10.4805 17.76" stroke="#${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 16C7.35089 15.1345 7 14.0819 7 13V7C7 5.67392 7.52677 4.40216 8.46445 3.46448C9.40213 2.5268 10.6739 2 12 2C13.3261 2 14.5978 2.5268 15.5355 3.46448C16.4732 4.40216 17 5.67392 17 7" stroke="#${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.21081 18.84C3.81268 17.216 3.04593 15.1429 3.0508 13" stroke="#${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.0007 13C20.9995 14.5822 20.5812 16.1361 19.788 17.5051C18.9948 18.8741 17.8547 20.0098 16.4827 20.7977C15.1107 21.5857 13.5551 21.9979 11.973 21.993C10.3908 21.9882 8.83786 21.5664 7.4707 20.77" stroke="#${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 2L2 22" stroke="#${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`
+ icon = `<path d="
+ M17.0005 11.24V13C17.0005 14.3261 16.4737 15.5978 15.536
+ 16.5355C14.5983 17.4732 13.3266 18 12.0005 18C11.4846 17.9975
+ 10.972 17.9166 10.4805 17.76"
+ stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="
+ M8 16C7.35089 15.1345 7 14.0819 7 13V7C7 5.67392 7.52677 4.40216
+ 8.46445 3.46448C9.40213 2.5268 10.6739 2 12 2C13.3261 2 14.5978
+ 2.5268 15.5355 3.46448C16.4732 4.40216 17 5.67392 17 7"
+ stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M5.21081 18.84C3.81268 17.216 3.04593 15.1429 3.0508 13"
+ stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="
+ M21.0007 13C20.9995 14.5822 20.5812 16.1361 19.788 17.5051C18.9948
+ 18.8741 17.8547 20.0098 16.4827 20.7977C15.1107 21.5857 13.5551
+ 21.9979 11.973 21.993C10.3908 21.9882 8.83786 21.5664 7.4707 20.77"
+ stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+ <path d="M22 2L2 22"
+ stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`
}
listen.innerHTML = icon
+ document.querySelectorAll('#listen path').forEach(el => el.style.stroke = `#${color}`)
}
--- a/canopy/static/screen.css
+++ b/canopy/static/screen.css
line-height: 1.5;
}
-body {
+html.dark {
background-color: #002b36;
color: #839496;
+}
+html.light {
+ background-color: #fdf6e3;
+ color: #657b83;
+}
+html.dark input, html.dark textarea {
+ background-color: #073642;
+ border-color: #073642;
+ color: #93a1a1;
+}
+html.light input, html.light textarea {
+ background-color: #eee8d5;
+ border-color: #eee8d5;
+ color: #586e75;
+}
+html.dark button {
+ background-color: #586e75;
+ color: #002b36;
+}
+html.light button {
+ background-color: #93a1a1;
+ color: #fdf6e3;
+}
+html.dark hr:before {
+ background-color: #002b36;
+ color: #586e75;
+}
+html.light hr:before {
+ background-color: #fdf6e3;
+ color: #93a1a1;
+}
+html.dark #colormode path {
+ fill: #586e75;
+}
+html.light #colormode path {
+ fill: #93a1a1;
+}
+html.dark #listen path {
+ stroke: #586e75;
+}
+html.light #listen path {
+ stroke: #93a1a1;
+}
+html.dark footer svg circle {
+ fill: #002b36;
+}
+html.dark footer svg path {
+ fill: #586e75;
+}
+html.light footer svg circle {
+ fill: #fdf6e3;
+}
+html.light footer svg path {
+ fill: #93a1a1;
+}
+
+body {
display: grid;
grid-column-gap: 1em;
/* grid-template-columns: 5em 40em 13em; */
}
input, textarea {
- background-color: #073642;
- border: .25em solid #073642;
+ border-style: solid;
border-radius: .5em;
- color: #93a1a1;
+ border-width: .25em;
font-family: UbuntuMonoPowerline;
}
input:focus, textarea:focus {
- border-color: #2aa198;
+ border-color: #2aa198 !important;
outline: none;
}
input {
font-size: .7em
}
textarea {
- border: .25em solid #073642;
border-radius: .5em;
padding: .25em;
resize: vertical;
text-align: right;
}
button {
- background-color: #586e75;
border: 0;
border-radius: .25em;
- color: #002b36;
font-family: UbuntuMonoPowerline;
letter-spacing: .05em;
opacity: 80%;
opacity: 100%;
}
button[type=submit] {
- background-color: #859900;
+ background-color: #859900 !important;
}
button.secondarysubmit {
- background-color: #cb4b16;
+ background-color: #cb4b16 !important;
}
+.search svg {
+ height: .9em;
+ position: relative;
+ top: .2em;
+ width: .9em;
+}
form#search {
line-height: 1.15;
}
font-size: .7em;
text-transform: uppercase;
}
-#listen {
- position: relative;
- top: 2px;
-}
summary {
cursor: pointer;
overflow: visible;
}
hr:before {
- background-color: #002b36;
- color: #586e75;
content: "f";
display: block;
font-family: 'fleurondingbats';
--- a/canopy/templates/guide.html
+++ b/canopy/templates/guide.html
<dl>
<dt><kbd>A-.</kbd>
<dd>toggle typographical rhythm indicator
+<dt><kbd>A-c</kbd>
+<dd>toggle dark/light color mode
</dl>
<h3>Room Mode</h3>
--- a/canopy/templates/template.html
+++ b/canopy/templates/template.html
<script src=//cdn.jsdelivr.net/npm/vosk-browser@latest/dist/vosk.js></script>
<script src=//cdn.jsdelivr.net/npm/webtorrent@latest/webtorrent.min.js></script>
<script src=//cdn.jsdelivr.net/npm/drag-drop@latest/dragdrop.min.js></script>
+<script src=//cdn.jsdelivr.net/npm/js-cookie@latest/dist/js.cookie.min.js></script>
<script>
$if "session" in tx.user and tx.user.session.get("uid", None):
$ username = tx.user.session["name"][0]
</small>
</div>
</div>
-<div>
+<div class=search>
<form id=search action=/search>
- <svg id=listen title=dictation width=14px height=14px viewBox="-0.5 0 25 25"
+ <svg id=colormode title="switch dark/light color mode" viewBox="-0.5 0 25 25"
+ fill=none xmlns=http://www.w3.org/2000/svg>
+ <path d="
+ M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2
+ 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z
+ M12,20.5 L12,3.5 C16.6944204,3.5 20.5,7.30557963 20.5,12
+ C20.5,16.6944204 16.6944204,20.5 12,20.5 Z"></path>
+ </svg>
+ <svg id=listen title=dictation viewBox="-0.5 0 25 25"
fill=none xmlns=http://www.w3.org/2000/svg></svg>
<input name=q type=text><br>
<small class=partial></small> <a href=/guide>Guide</a>