aljaz/pear-docs
1
0
Fork 0
mirror of https://github.com/aljazceru/pear-docs.git synced 2025-12-17 14:34:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

light mode complete

Browse Source
This commit is contained in:
dmc
2024-01-09 20:26:27 +01:00
parent 7b9d96b21b
commit fb669bc31e
2 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
lib/docs-viewer.js
View File

@@ -11,16 +11,17 @@
customElements.define('docs-viewer', class extends HTMLElement {
constructor () {
super()
const lightMode = document.documentElement.classList.contains('light')
this.template = document.createElement('template')
this.template.innerHTML = `
<div>
<style>
ul { list-style-type: none; }
ul li::before { content: '❥ '; margin-right: 0.5em; }
a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none }
a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none; }
#panel.light a, #panel.light a:visited, #panel.light a:active { color: #7c9735; font-weight: bold; }
h1 { padding: .5rem; border-right: 1px solid #B0D944; border-bottom: 1px solid #B0D944; display: inline-block; padding-right: 0.75em; padding-left: 0.5em; }
code { background: #333; color: #eee; padding: .25rem; }
code { background: #333; color: #efeaea; padding: .25rem; }
pre > code { display: block; line-height: 1.025rem; padding-left: 1em; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
h1 { font-size: 1.6rem; }
@@ -34,7 +35,7 @@ customElements.define('docs-viewer', class extends HTMLElement {
img { display: block; max-width: 63em; margin: 0 auto; margin-block-start: 1.625rem; margin-block-end: 1.625rem; box-shadow: rgb(123 115 168 / 15%) 0px 13px 24px 0px; }
</style>
<header></header>
<div id="panel"><slot></slot></div>
<div id="panel" class="${lightMode ? 'light' : ''}"><slot></slot></div>
</div>
`
this.root = this.attachShadow({ mode: 'open' })
@@ -46,6 +47,12 @@ customElements.define('docs-viewer', class extends HTMLElement {
this.page = 'readme.md'
const observer = new MutationObserver(() => {
if (document.documentElement.classList.contains('light')) this.panel.classList.add('light')
else this.panel.classList.remove('light')
})
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
this.panel.addEventListener('click', (evt) => {
if (evt.target?.tagName !== 'A') return
const href = evt.target.href