scroll-to-github-top/theme.js at master · oiahoon/scroll-to-github-top · 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
'use strict';

(function() {
  const defaultSettings = {
    themePreset: 'default'
  };

  let currentThemePreset = defaultSettings.themePreset;

  // 将RGB字符串解析为HSL对象
  // 参数格式：'rgb(r, g, b)' 或 'rgba(r, g, b, a)'
  function rgbToHsl(rgb) {
    const match = rgb.match(/\d+/g);
    if (!match || match.length < 3) return null;

    const r = parseInt(match[0]) / 255;
    const g = parseInt(match[1]) / 255;
    const b = parseInt(match[2]) / 255;

    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    let h, s;
    let l = (max + min) / 2;

    if (max === min) {
      h = s = 0;
    } else {
      const d = max - min;
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
      switch (max) {
        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
        case g: h = (b - r) / d + 2; break;
        case b: h = (r - g) / d + 4; break;
      }
      h /= 6;
    }

    return { h: h * 360, s: s * 100, l: l * 100 };
  }

  // 判断一个颜色字符串是否为透明（rgba(0,0,0,0) 或 transparent）
  function isTransparent(color) {
    if (!color) return true;
    if (color === 'transparent') return true;
    // rgba(0, 0, 0, 0) 形式
    const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
    if (match && match[4] !== undefined && parseFloat(match[4]) === 0) return true;
    return false;
  }

  // 直接检测页面背景色，返回 HSL 亮度值（0-100）
  // 检测优先级（UI_DESIGN_SPEC.md §7.5）：
  //   1. document.body 的 background-color
  //   2. document.documentElement 的 background-color
  //   3. <html> 上的 color-scheme 属性
  //   4. prefers-color-scheme 媒体查询
  //   5. 最终兜底：假设浅色背景（l = 100）
  function getPageBackgroundLightness() {
    // 策略 1：body 背景色
    const bodyBg = window.getComputedStyle(document.body).backgroundColor;
    if (!isTransparent(bodyBg)) {
      const hsl = rgbToHsl(bodyBg);
      if (hsl) return hsl.l;
    }

    // 策略 2：html 元素背景色
    const htmlBg = window.getComputedStyle(document.documentElement).backgroundColor;
    if (!isTransparent(htmlBg)) {
      const hsl = rgbToHsl(htmlBg);
      if (hsl) return hsl.l;
    }

    // 策略 3：<html> 上的 color-scheme 属性
    const colorScheme = document.documentElement.getAttribute('color-scheme') ||
                        document.documentElement.style.colorScheme ||
                        window.getComputedStyle(document.documentElement).colorScheme;
    if (colorScheme) {
      if (colorScheme.includes('dark')) return 10;   // 深色系统 → 低亮度
      if (colorScheme.includes('light')) return 100; // 浅色系统 → 高亮度
    }

    // 策略 4：prefers-color-scheme 媒体查询
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 10; // 深色偏好 → 低亮度
    }

    // 最终兜底：假设浅色背景
    return 100;
  }

  // 根据背景亮度选择主题
  // L > 60：浅色背景页面 → 使用深色浮层（theme-dark）
  // L <= 60：深色/中色背景页面 → 使用浅色浮层（theme-light）
  function selectTheme() {
    const lightness = getPageBackgroundLightness();
    return lightness > 60 ? 'theme-dark' : 'theme-light';
  }

  const toneClassNames = ['theme-dark', 'theme-light', 'theme-blue', 'theme-green', 'theme-purple', 'theme-auto'];
  const presetClassNames = ['theme-preset-default', 'theme-preset-sspai'];
  let themeApplyTimer = null;
  let lastAppliedTheme = null;
  let lastAppliedPreset = null;

  function applyThemeClass(element, theme) {
    if (!element) return;
    element.classList.remove(...toneClassNames, ...presetClassNames);
    element.classList.add(theme);
    element.classList.add(currentThemePreset === 'sspai' ? 'theme-preset-sspai' : 'theme-preset-default');
  }

  // 应用主题到扩展注入的浮层元素
  function applyTheme() {
    const theme = selectTheme();
    if (theme === lastAppliedTheme && currentThemePreset === lastAppliedPreset && document.getElementById('github-toc')) {
      return;
    }
    lastAppliedTheme = theme;
    lastAppliedPreset = currentThemePreset;
    applyThemeClass(document.getElementById('github-toc'), theme);
    applyThemeClass(document.getElementById('github-sst'), theme);
  }

  function scheduleApplyTheme() {
    clearTimeout(themeApplyTimer);
    themeApplyTimer = setTimeout(applyTheme, 120);
  }

  function startThemeObserver() {
    if (!document.body) return;

    // 监听 DOM 变化，在页面内容更新时重新检测主题（如 SPA 路由切换后背景色改变）
    const observer = new MutationObserver((mutations) => {
      const shouldRefreshTheme = mutations.some((mutation) => {
        if (mutation.type === 'attributes') {
          return mutation.target === document.body || mutation.target === document.documentElement;
        }
        return mutation.type === 'childList';
      });

      if (shouldRefreshTheme) {
        scheduleApplyTheme();
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });

    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class', 'style']
    });

    observer.observe(document.body, {
      attributes: true,
      attributeFilter: ['class', 'style']
    });

    // 初始应用主题
    applyTheme();
  }

  function loadSettings() {
    return new Promise((resolve) => {
      if (typeof chrome === 'undefined' || !chrome.storage || !chrome.storage.sync) {
        resolve({ ...defaultSettings });
        return;
      }
      chrome.storage.sync.get(defaultSettings, (items) => {
        resolve(items || { ...defaultSettings });
      });
    });
  }

  function watchSettingsChanges() {
    if (typeof chrome === 'undefined' || !chrome.storage || !chrome.storage.onChanged) {
      return;
    }

    chrome.storage.onChanged.addListener((changes, areaName) => {
      if (areaName !== 'sync' || !changes.themePreset) {
        return;
      }

      currentThemePreset = changes.themePreset.newValue || defaultSettings.themePreset;
      scheduleApplyTheme();
    });
  }

  loadSettings().then((items) => {
    currentThemePreset = items.themePreset || defaultSettings.themePreset;
    watchSettingsChanges();

    if (document.body) {
      startThemeObserver();
    } else {
      document.addEventListener('DOMContentLoaded', startThemeObserver, { once: true });
    }
  });
})();