x-debug-css/x-debug.js at main · kozmozio/x-debug-css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// CSS Sytles
var style = document.createElement('style');
style.innerHTML = `
    .x-debug-css :not(g):not(path)  {
  	color:                 hsla(210, 100%, 100%, 0.9) !important;
  	background:            hsla(210, 100%,  50%, 0.5) !important;
  	outline: solid 0.15rem hsla(210, 100%, 100%, 0.5) !important;
  	box-shadow: none !important;
  	filter:     none !important;

}
.x-debug-css-outlined :not(g):not(path){
    outline: 1px solid red !important;
    box-shadow: none !important;
    filter: none !important;
  }`;

// Add styles to docuöent head
document.head.appendChild(style);

// Key listener
document.onkeydown = function (event) {
  event = event || window.event;
  if (event.code === 'KeyD' && event.shiftKey === true ) {
        document.documentElement.classList.toggle("x-debug-css");
  }else  if (event.code === 'KeyX' && event.shiftKey === true ) {
    document.documentElement.classList.toggle("x-debug-css-outlined");
  }


}