Leetcode-Customizer/content.js at main · AniketR10/Leetcode-Customizer · 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

function safeHead() {
  return document.head || document.getElementsByTagName('head')[0] || document.documentElement;
}

function applyFontsFromStorage() {
  chrome.storage.sync.get(['uiFont','codeFont', 'uiSize', 'codeSize', 'editorThemeColors'], (data) => {
    const head = safeHead();

    const {uiFont, codeFont, editorThemeColors} = data;

    const uSize = data.uiSize || 14;
    const cSize = data.codeSize || 14;

    const prev = document.getElementById('lc-font-changer-style');
    if (prev) prev.remove();

    if (!uiFont && !codeFont && !data.uiSize && !data.codeSize && !editorThemeColors) return;


    [uiFont, codeFont]
      .filter(fn => fn && fn.trim())
      .forEach(fn => {
        const key = fn.replace(/\s+/g, '+');

        if (!document.querySelector(`link[data-font="${key}"]`)) {
          const link = document.createElement('link');
          link.rel = 'stylesheet';
          link.href = `https://fonts.googleapis.com/css2?family=${key}&display=swap`;
          link.setAttribute('data-font', key);
          head.appendChild(link);
        }
      });

    let cssRules = `
      /* UI font & size */
      body { font-size: ${uSize}px !important; }
      * { font-family: "${uiFont || 'Inter'}", sans-serif !important; }

      /* Code font & Size */
      .monaco-editor *, .cm-editor *, code, pre {
        font-family: "${codeFont || 'JetBrains Mono'}", monospace !important;
        font-size: ${cSize}px !important;
      }

      /* Preserve icons */
      [class*="icon"], .codicon, [class^="icon-"], .anticon {
        font-family: inherit !important;
      }
    `;

    if(editorThemeColors){
     const { bg, text, selection, useSmartFilter } = editorThemeColors;
      const safeText = text || '#eff1f6';
      const safeSel = selection || '#264f78';

      // if bg is light, we invert the code colors to make them dark/readable
      const syntaxFilter = useSmartFilter
        ? 'invert(1) hue-rotate(180deg) brightness(0.75) contrast(1.2)'
        : 'none';
      cssRules += `
        /* Backgrounds */
        .monaco-editor,
        .monaco-editor .monaco-editor-background,
        .monaco-editor .margin,
        .monaco-editor .inputarea {
          background-color: ${bg} !important;
        }

        /* 2. Text Transparency */
        .monaco-editor .view-lines,
        .monaco-editor .view-overlays {
          background-color: transparent !important;
        }


        .monaco-editor,
        .monaco-editor .mtk1 {
          color: ${safeText} !important;
        }


        .monaco-editor .view-lines span[class*="mtk"]:not(.mtk1) {
          filter: ${syntaxFilter} !important;
        }


        .monaco-editor .current-line {
          background-color: ${safeSel} !important;
          border: none !important;
        }
        .monaco-editor .margin-view-overlays .line-numbers {
           color: ${safeText} !important;
           opacity: 0.5;
        }
      `;
    }
    const style = document.createElement('style');
    style.id = 'lc-font-changer-style';
    style.textContent = cssRules;
    head.appendChild(style);
  });
}


applyFontsFromStorage();

chrome.storage.onChanged.addListener((changes, area) => {
  if (area === 'sync' && (changes.uiFont || changes.codeFont || changes.uiSize || changes.codeSize || changes.editorThemeColors)) {
    applyFontsFromStorage();
  }
});