ad3laid3/sanctum
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions

Update themes.js

Browse source 
Signed-off-by: AvaLilac <amyshimplays@gmail.com>
This commit is contained in:
AvaLilac 2026-03-18 12:00:22 -04:00 • committed by GitHub
parent b2afc5d363
commit 45b96855eb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 14 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

161
src/themes.js
View file

@ -18,65 +18,45 @@ function parseMeta(css){
} }
function applyThemes(){ function applyThemes(){
document.querySelectorAll(".avia-theme-style").forEach(e=>e.remove()); document.querySelectorAll(".avia-theme-style").forEach(e=>e.remove());
const themes = getThemes(); const themes = getThemes();
themes.forEach(theme=>{ themes.forEach(theme=>{
if(!theme.enabled) return; if(!theme.enabled) return;
const style=document.createElement("style"); const style=document.createElement("style");
style.className="avia-theme-style"; style.className="avia-theme-style";
style.textContent=theme.css; style.textContent=theme.css;
document.head.appendChild(style); document.head.appendChild(style);
}); });
} }
function makeDraggable(panel, handle){ function makeDraggable(panel, handle){
let dragging=false,offsetX,offsetY; let dragging=false,offsetX,offsetY;
handle.addEventListener("mousedown",e=>{ handle.addEventListener("mousedown",e=>{
dragging=true; dragging=true;
offsetX=e.clientX-panel.offsetLeft; offsetX=e.clientX-panel.offsetLeft;
offsetY=e.clientY-panel.offsetTop; offsetY=e.clientY-panel.offsetTop;
document.body.style.userSelect="none"; document.body.style.userSelect="none";
}); });
document.addEventListener("mouseup",()=>{dragging=false;document.body.style.userSelect="";});
document.addEventListener("mouseup",()=>{
dragging=false;
document.body.style.userSelect="";
});
document.addEventListener("mousemove",e=>{ document.addEventListener("mousemove",e=>{
if(!dragging) return; if(!dragging) return;
panel.style.left=(e.clientX-offsetX)+"px"; panel.style.left=(e.clientX-offsetX)+"px";
panel.style.top=(e.clientY-offsetY)+"px"; panel.style.top=(e.clientY-offsetY)+"px";
panel.style.right="auto"; panel.style.right="auto";
panel.style.bottom="auto"; panel.style.bottom="auto";
}); });
} }
function openThemeEditor(theme){ function openThemeEditor(theme){
editingTheme = theme; editingTheme = theme;
let panel = document.getElementById('avia-theme-editor'); let panel = document.getElementById('avia-theme-editor');
if(panel){ if(panel){
panel.style.display="flex"; panel.style.display="flex";
panel.querySelector("textarea").value = theme.css; panel.querySelector("textarea").value = theme.css;
return; return;
} }
panel=document.createElement("div"); panel=document.createElement("div");
panel.id="avia-theme-editor"; panel.id="avia-theme-editor";
Object.assign(panel.style,{ Object.assign(panel.style,{
position:"fixed", position:"fixed",
bottom:"24px", bottom:"24px",
@ -93,10 +73,8 @@ function openThemeEditor(theme){
overflow:"hidden", overflow:"hidden",
border:"1px solid rgba(255,255,255,0.08)" border:"1px solid rgba(255,255,255,0.08)"
}); });
const header=document.createElement("div"); const header=document.createElement("div");
header.textContent="Theme Editor"; header.textContent="Theme Editor";
Object.assign(header.style,{ Object.assign(header.style,{
padding:"14px 16px", padding:"14px 16px",
fontWeight:"600", fontWeight:"600",
@ -105,23 +83,12 @@ function openThemeEditor(theme){
borderBottom:"1px solid rgba(255,255,255,0.08)", borderBottom:"1px solid rgba(255,255,255,0.08)",
cursor:"move" cursor:"move"
}); });
makeDraggable(panel,header); makeDraggable(panel,header);
const close=document.createElement("div"); const close=document.createElement("div");
close.textContent="✕"; close.textContent="✕";
Object.assign(close.style,{position:"absolute",right:"16px",top:"12px",cursor:"pointer"});
Object.assign(close.style,{
position:"absolute",
right:"16px",
top:"12px",
cursor:"pointer"
});
close.onclick=()=>panel.style.display="none"; close.onclick=()=>panel.style.display="none";
const textarea=document.createElement("textarea"); const textarea=document.createElement("textarea");
Object.assign(textarea.style,{ Object.assign(textarea.style,{
flex:"1", flex:"1",
border:"none", border:"none",
@ -133,46 +100,30 @@ function openThemeEditor(theme){
fontFamily:"monospace", fontFamily:"monospace",
fontSize:"13px" fontSize:"13px"
}); });
textarea.value=theme.css; textarea.value=theme.css;
textarea.addEventListener("input",()=>{ textarea.addEventListener("input",()=>{
const themes=getThemes(); const themes=getThemes();
const t=themes.find(x=>x.id===editingTheme.id); const t=themes.find(x=>x.id===editingTheme.id);
if(!t) return; if(!t) return;
t.css=textarea.value; t.css=textarea.value;
setThemes(themes); setThemes(themes);
applyThemes(); applyThemes();
if(window.__avia_refresh_themes_panel){window.__avia_refresh_themes_panel();}
if(window.__avia_refresh_themes_panel){
window.__avia_refresh_themes_panel();
}
}); });
panel.appendChild(header); panel.appendChild(header);
panel.appendChild(close); panel.appendChild(close);
panel.appendChild(textarea); panel.appendChild(textarea);
document.body.appendChild(panel); document.body.appendChild(panel);
} }
function toggleThemesPanel(){ function toggleThemesPanel(){
let panel=document.getElementById("avia-themes-panel"); let panel=document.getElementById("avia-themes-panel");
if(panel){ if(panel){
panel.style.display = panel.style.display==="none"?"flex":"none"; panel.style.display = panel.style.display==="none"?"flex":"none";
return; return;
} }
panel=document.createElement("div"); panel=document.createElement("div");
panel.id="avia-themes-panel"; panel.id="avia-themes-panel";
Object.assign(panel.style,{ Object.assign(panel.style,{
position:"fixed", position:"fixed",
bottom:"40px", bottom:"40px",
@ -189,10 +140,8 @@ function toggleThemesPanel(){
overflow:"hidden", overflow:"hidden",
border:"1px solid rgba(255,255,255,0.08)" border:"1px solid rgba(255,255,255,0.08)"
}); });
const header=document.createElement("div"); const header=document.createElement("div");
header.textContent="Themes"; header.textContent="Themes";
Object.assign(header.style,{ Object.assign(header.style,{
padding:"14px 16px", padding:"14px 16px",
fontWeight:"600", fontWeight:"600",
@ -201,24 +150,13 @@ function toggleThemesPanel(){
borderBottom:"1px solid rgba(255,255,255,0.08)", borderBottom:"1px solid rgba(255,255,255,0.08)",
cursor:"move" cursor:"move"
}); });
makeDraggable(panel,header); makeDraggable(panel,header);
const close=document.createElement("div"); const close=document.createElement("div");
close.textContent="✕"; close.textContent="✕";
Object.assign(close.style,{position:"absolute",right:"16px",top:"12px",cursor:"pointer"});
Object.assign(close.style,{
position:"absolute",
right:"16px",
top:"12px",
cursor:"pointer"
});
close.onclick=()=>panel.style.display="none"; close.onclick=()=>panel.style.display="none";
const importBtn=document.createElement("button"); const importBtn=document.createElement("button");
importBtn.textContent="Import Theme"; importBtn.textContent="Import Theme";
Object.assign(importBtn.style,{ Object.assign(importBtn.style,{
margin:"10px", margin:"10px",
padding:"10px", padding:"10px",
@ -230,17 +168,9 @@ function toggleThemesPanel(){
cursor:"pointer", cursor:"pointer",
transition:"all .15s ease" transition:"all .15s ease"
}); });
importBtn.onmouseenter=()=>{importBtn.style.background="rgba(255,255,255,0.12)";};
importBtn.onmouseenter=()=>{ importBtn.onmouseleave=()=>{importBtn.style.background="rgba(255,255,255,0.06)";};
importBtn.style.background="rgba(255,255,255,0.12)";
};
importBtn.onmouseleave=()=>{
importBtn.style.background="rgba(255,255,255,0.06)";
};
const list=document.createElement("div"); const list=document.createElement("div");
Object.assign(list.style,{ Object.assign(list.style,{
flex:"1", flex:"1",
overflowY:"auto", overflowY:"auto",
@ -249,26 +179,17 @@ function toggleThemesPanel(){
flexDirection:"column", flexDirection:"column",
gap:"8px" gap:"8px"
}); });
panel.appendChild(header); panel.appendChild(header);
panel.appendChild(close); panel.appendChild(close);
panel.appendChild(importBtn); panel.appendChild(importBtn);
panel.appendChild(list); panel.appendChild(list);
document.body.appendChild(panel); document.body.appendChild(panel);
function render(){ function render(){
list.innerHTML=""; list.innerHTML="";
const themes=getThemes(); const themes=getThemes();
themes.forEach(theme=>{ themes.forEach(theme=>{
const meta=parseMeta(theme.css); const meta=parseMeta(theme.css);
const card=document.createElement("div"); const card=document.createElement("div");
Object.assign(card.style,{ Object.assign(card.style,{
padding:"10px", padding:"10px",
borderRadius:"10px", borderRadius:"10px",
@ -277,124 +198,68 @@ function toggleThemesPanel(){
justifyContent:"space-between", justifyContent:"space-between",
alignItems:"center" alignItems:"center"
}); });
const info=document.createElement("div"); const info=document.createElement("div");
info.innerHTML=` info.innerHTML=`<div style="font-weight:600">${meta.name}</div><div style="font-size:11px;opacity:.7">${meta.author} • v${meta.version}</div><div style="font-size:11px;opacity:.6">${meta.description}</div>`;
<div style="font-weight:600">${meta.name}</div>
<div style="font-size:11px;opacity:.7">${meta.author} • v${meta.version}</div>
<div style="font-size:11px;opacity:.6">${meta.description}</div>
`;
const controls=document.createElement("div"); const controls=document.createElement("div");
const toggle=document.createElement("button"); const toggle=document.createElement("button");
toggle.textContent=theme.enabled?"Disable":"Enable"; toggle.textContent=theme.enabled?"Disable":"Enable";
toggle.onclick=()=>{ toggle.onclick=()=>{
theme.enabled=!theme.enabled; theme.enabled=!theme.enabled;
setThemes(themes); setThemes(themes);
applyThemes(); applyThemes();
render(); render();
}; };
const edit=document.createElement("button"); const edit=document.createElement("button");
edit.textContent="Edit"; edit.textContent="Edit";
edit.onclick=()=>openThemeEditor(theme); edit.onclick=()=>openThemeEditor(theme);
const del=document.createElement("button"); const del=document.createElement("button");
del.textContent="Delete"; del.textContent="Delete";
del.onclick=()=>{ del.onclick=()=>{
const updated=themes.filter(t=>t.id!==theme.id); const updated=themes.filter(t=>t.id!==theme.id);
setThemes(updated); setThemes(updated);
applyThemes(); applyThemes();
render(); render();
}; };
[toggle,edit,del].forEach(b=>{Object.assign(b.style,{marginLeft:"6px",padding:"4px 8px",borderRadius:"6px",border:"none",cursor:"pointer"});controls.appendChild(b);});
[toggle,edit,del].forEach(b=>{
Object.assign(b.style,{
marginLeft:"6px",
padding:"4px 8px",
borderRadius:"6px",
border:"none",
cursor:"pointer"
});
controls.appendChild(b);
});
card.appendChild(info); card.appendChild(info);
card.appendChild(controls); card.appendChild(controls);
list.appendChild(card); list.appendChild(card);
}); });
} }
window.__avia_refresh_themes_panel = render; window.__avia_refresh_themes_panel = render;
importBtn.onclick=()=>{ importBtn.onclick=()=>{
const input=document.createElement("input"); const input=document.createElement("input");
input.type="file"; input.type="file";
input.accept=".css,.txt"; input.accept=".css,.txt";
input.onchange=async()=>{ input.onchange=async()=>{
const file=input.files[0]; const file=input.files[0];
if(!file) return; if(!file) return;
const css=await file.text(); const css=await file.text();
const themes=getThemes(); const themes=getThemes();
themes.push({id:crypto.randomUUID(),css,enabled:true});
themes.push({
id:crypto.randomUUID(),
css,
enabled:true
});
setThemes(themes); setThemes(themes);
applyThemes(); applyThemes();
render(); render();
}; };
input.click(); input.click();
}; };
render(); render();
} }
function injectButton(){ function injectButton(){
if(document.getElementById("avia-themes-btn")) return; if(document.getElementById("avia-themes-btn")) return;
const appearanceBtn=[...document.querySelectorAll("a")].find(a=>a.textContent.trim()==="Appearance");
const appearanceBtn=[...document.querySelectorAll("a")]
.find(a=>a.textContent.trim()==="Appearance");
const quickCSS=document.getElementById("stoat-fake-quickcss"); const quickCSS=document.getElementById("stoat-fake-quickcss");
if(!appearanceBtn || !quickCSS) return; if(!appearanceBtn || !quickCSS) return;
const clone=appearanceBtn.cloneNode(true); const clone=appearanceBtn.cloneNode(true);
clone.id="avia-themes-btn"; clone.id="avia-themes-btn";
const text=[...clone.querySelectorAll("div")].find(d=>d.children.length===0);
const text=[...clone.querySelectorAll("div")]
.find(d=>d.children.length===0);
if(text) text.textContent="(Avia) Themes"; if(text) text.textContent="(Avia) Themes";
clone.onclick=toggleThemesPanel; clone.onclick=toggleThemesPanel;
quickCSS.parentElement.insertBefore(clone, quickCSS.nextSibling);
quickCSS.parentElement.insertBefore(clone,quickCSS.nextSibling);
} }
new MutationObserver(injectButton) new MutationObserver(injectButton).observe(document.body,{childList:true,subtree:true});
.observe(document.body,{childList:true,subtree:true});
injectButton(); injectButton();
applyThemes(); applyThemes();