traxys/tree-sitter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(playground): add dark theme, align ui more akin to upstream playground

Browse source
This commit is contained in:
Amaan Qureshi 2024-12-25 18:51:18 -05:00
parent 5bd0d11982
commit b70843a033
3 changed files with 317 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/src/7-playground.md
View file

@ -101,6 +101,6 @@ you must use at least one capture, like <code>(node_name) @capture-name</code></
<script src="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.19.0/clusterize.min.js"></script>
<script>
setTimeout(() => {
window.initializePlayground()
window.initializePlayground({local: false})
}, 1)
</script>

27
docs/src/assets/js/playground.js
View file

@ -1,3 +1,23 @@
function initializeLocalTheme() {
const themeToggle = document.getElementById('theme-toggle');
if (!themeToggle) return;
// Load saved theme or use system preference
const savedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const initialTheme = savedTheme || (prefersDark ? 'dark' : 'light');
// Set initial theme
document.documentElement.setAttribute('data-theme', initialTheme);
themeToggle.addEventListener('click', () => {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
});
}
function initializeCustomSelect() {
const button = document.getElementById('language-button');
const select = document.getElementById('language-select');
@ -31,7 +51,11 @@ function initializeCustomSelect() {
});
}
window.initializePlayground = async function initializePlayground() {
window.initializePlayground = async function initializePlayground(opts) {
const { local } = opts;
if (local) {
initializeLocalTheme();
}
initializeCustomSelect();
let tree;
@ -214,7 +238,6 @@ window.initializePlayground = async function initializePlayground() {
}
let displayName;
let displayClass = 'plain';
if (cursor.nodeIsMissing) {
const nodeTypeText = cursor.nodeIsNamed ? cursor.nodeType : `"${cursor.nodeType}"`;
displayName = `MISSING ${nodeTypeText}`;