Skip to content

Commit aeee51a

Browse files
twilight1794twilight1794
committed
Integración del tema negro Pt. 1
1 parent 54bde8e commit aeee51a

3 files changed

Lines changed: 45 additions & 31 deletions

File tree

‎public/estilos.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -291,6 +291,8 @@ body>footer {
291291
width: 20rem;
292292
height: calc(100% - 1.85rem);
293293
overflow: auto;
294+
background: var(--f-m);
295+
color: var(--c-m);
294296
}
295297
#r-act [role=tabpanel]:not([aria-current=page]) { display: none; }
296298
#btnMenuExplorador span { mask-image: var(--i_expl_d); -webkit-mask-image: var(--i_expl_d); }

‎public/index.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -393,20 +393,20 @@ <h3>$r_cfg_tema</h3>
393393
<legend>$color_temaoscuro</legend>
394394
<p>$color_temaoscuro_d</p>
395395
<dl class="natural form">
396-
<dt><label for="colorOscuroCM">$color_cm</label></dt><dd><input type="color" id="colorOscuroCM" value="#323232" /></dd>
397-
<dt><label for="colorOscuroFM">$color_fm</label></dt><dd><input type="color" id="colorOscuroFM" value="#ffffff" /></dd>
398-
<dt><label for="colorOscuroBM">$color_bm</label></dt><dd><input type="color" id="colorOscuroBM" value="#d3d3d3" /></dd></dt>
399-
<dt><label for="colorOscuroCA">$color_ca</label></dt><dd><input type="color" id="colorOscuroCA" value="#323232" /></dd>
400-
<dt><label for="colorOscuroFA">$color_fa</label></dt><dd><input type="color" id="colorOscuroFA" value="#f5f5f5" /></dd>
401-
<dt><label for="colorOscuroHA">$color_ha</label></dt><dd><input type="color" id="colorOscuroHA" value="#d3d3d3" /></dd>
396+
<dt><label for="colorOscuroCM">$color_cm</label></dt><dd><input type="color" id="colorOscuroCM" value="#ffffff" /></dd>
397+
<dt><label for="colorOscuroFM">$color_fm</label></dt><dd><input type="color" id="colorOscuroFM" value="#000000" /></dd>
398+
<dt><label for="colorOscuroBM">$color_bm</label></dt><dd><input type="color" id="colorOscuroBM" value="#ffffff" /></dd></dt>
399+
<dt><label for="colorOscuroCA">$color_ca</label></dt><dd><input type="color" id="colorOscuroCA" value="#c0c0c0" /></dd>
400+
<dt><label for="colorOscuroFA">$color_fa</label></dt><dd><input type="color" id="colorOscuroFA" value="#2e2e2e" /></dd>
401+
<dt><label for="colorOscuroHA">$color_ha</label></dt><dd><input type="color" id="colorOscuroHA" value="#000000" /></dd>
402402
<dt><label for="colorOscuroCT">$color_ct</label></dt><dd><input type="color" id="colorOscuroCT" value="#f5f5f5" /></dd>
403403
<dt><label for="colorOscuroFT">$color_ft</label></dt><dd><input type="color" id="colorOscuroFT" value="#323232" /></dd>
404-
<dt><label for="colorOscuroActT">$color_actt</label></dt><dd><input type="color" id="colorOscuroActT" value="#808080" /></dd>
405-
<dt><label for="colorOscuroBW">$color_bw</label></dt><dd><input type="color" id="colorOscuroBW" value="#d3d3d3"></dd>
406-
<dt><label for="colorOscuroCBr">$color_cbr</label></dt><dd><input type="color" id="colorOscuroCBr" value="#000000" /></dd>
407-
<dt><label for="colorOscuroCActBr">$color_cactbr</label></dt><dd><input type="color" id="colorOscuroCActBr" value="#000000" /></dd>
408-
<dt><label for="colorOscuroCdBr">$color_cdbr</label></dt><dd><input type="color" id="colorOscuroCdBr" value="#000000" /></dd>
409-
<dt><label for="colorOscuroFBr">$color_fbr</label></dt><dd><input type="color" id="colorOscuroFBr" value="#d3d3d3" /></dd>
404+
<dt><label for="colorOscuroActT">$color_actt</label></dt><dd><input type="color" id="colorOscuroActT" value="#000000" /></dd>
405+
<dt><label for="colorOscuroBW">$color_bw</label></dt><dd><input type="color" id="colorOscuroBW" value="#c0c0c0"></dd>
406+
<dt><label for="colorOscuroCBr">$color_cbr</label></dt><dd><input type="color" id="colorOscuroCBr" value="#c0c0c0" /></dd>
407+
<dt><label for="colorOscuroCActBr">$color_cactbr</label></dt><dd><input type="color" id="colorOscuroCActBr" value="#c0c0c0" /></dd>
408+
<dt><label for="colorOscuroCdBr">$color_cdbr</label></dt><dd><input type="color" id="colorOscuroCdBr" value="#c0c0c0" /></dd>
409+
<dt><label for="colorOscuroFBr">$color_fbr</label></dt><dd><input type="color" id="colorOscuroFBr" value="#c0c0c0" /></dd>
410410
<dt><label for="colorOscuroFActBr">$color_factbr</label></dt><dd><input type="color" id="colorOscuroFActBr" value="#808080" /></dd>
411411
<dt><label for="colorOscuroFdBr">$color_fdbr</label></dt><dd><input type="color" id="colorOscuroFdBr" value="#808080" /></dd>
412412
<dt><label for="colorOscuroCBbh">$color_cbbh</label></dt><dd><input type="color" id="colorOscuroCBbh" value="#808080" /></dd>

‎public/inicial.js‎

Lines changed: 31 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ window.funsConfig = {
2525
document.body.classList.remove("tema-c");
2626
document.body.classList.add("tema-o");
2727
}
28+
confCMI();
2829
},
2930
colorClaroCM: (v) => { document.styleSheets[1].cssRules[1].style.setProperty("--c-c-m", v); },
3031
colorClaroFM: (v) => { document.styleSheets[1].cssRules[1].style.setProperty("--c-f-m", v); },
@@ -444,6 +445,35 @@ function onInputCMI(cm){
444445
}
445446

446447
/* Configuración */
448+
449+
/**
450+
* Crea una instancia de CodeMirror, y la configura
451+
*
452+
*/
453+
function confCMI(){
454+
let w = document.querySelector("#codemirror")
455+
w.textContent = "";
456+
window.cmi = CodeMirror(w, {
457+
lineNumbers: true,
458+
gutters: ["CodeMirror-linenumbers", "breakpoints"],
459+
theme: (window.matchMedia("(prefers-color-scheme: dark)").matches || document.body.classList.contains("tema-o"))?"monokai":null
460+
});
461+
cmi.setSize("100%", "100%");
462+
cmi.on("gutterClick", (cm, n) => {
463+
var info = cm.lineInfo(n);
464+
cm.setGutterMarker(n, "breakpoints", info.gutterMarkers ? null : (() => {
465+
var marker = document.createElement("u");
466+
marker.classList.add("bp");
467+
marker.textContent = "●";
468+
return marker;
469+
})());
470+
});
471+
cmi.on("change", onChangeCMI);
472+
cmi.on("cursorActivity", onInputCMI);
473+
onChangeCMI(cmi);
474+
onInputCMI(cmi);
475+
}
476+
447477
/**
448478
* Establece y aplica un valor en la configuración.
449479
*
@@ -607,26 +637,8 @@ window.addEventListener("DOMContentLoaded", () => {
607637

608638
/* Estado */
609639
document.getElementById("outEstado").textContent = "Listo";
640+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', confCMI );
610641

611-
/* CodeMirror */
612-
window.cmi = CodeMirror(document.querySelector("#codemirror"), {
613-
lineNumbers: true,
614-
gutters: ["CodeMirror-linenumbers", "breakpoints"],
615-
});
616-
cmi.setSize("100%", "100%");
617-
cmi.on("gutterClick", (cm, n) => {
618-
var info = cm.lineInfo(n);
619-
cm.setGutterMarker(n, "breakpoints", info.gutterMarkers ? null : (() => {
620-
var marker = document.createElement("u");
621-
marker.classList.add("bp");
622-
marker.textContent = "●";
623-
return marker;
624-
})());
625-
});
626-
cmi.on("change", onChangeCMI);
627-
cmi.on("cursorActivity", onInputCMI);
628-
onChangeCMI(cmi);
629-
onInputCMI(cmi);
630642
// Al cambiar el contenido del editor al cambiar de archivo, el sistema piensa que se ha editado el archivo. Esta bandera evita ese comportamiento.
631643
window.cambioCMI = false;
632644

0 commit comments

Comments
 (0)