Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b0aa327

Browse files
authored
Merge pull request #65 from zubyj/update-popup-ui
Update popup UI
2 parents 1055126 + 6e1f650 commit b0aa327

File tree

13 files changed

+874
-550
lines changed

13 files changed

+874
-550
lines changed

‎manifest.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,9 @@
4141
"resources": [
4242
"src/assets/images/copy-icon.png",
4343
"src/assets/images/check-icon.png",
44-
"src/assets/images/languages/*"
44+
"src/assets/images/languages/*",
45+
"src/popup/theme-handler.js",
46+
"src/popup/transition-handler.js"
4547
],
4648
"matches": [
4749
"<all_urls>"

‎src/content-script/themeDetector.js

Lines changed: 96 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,132 @@
22
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
33
if (request.action === 'detectTheme') {
44
const theme = detectPageTheme();
5+
console.log(`Detecting theme: ${theme}`);
6+
sendResponse({ theme });
7+
}
8+
if (request.action === 'getTheme') {
9+
const theme = detectPageTheme();
10+
console.log(`Getting theme: ${theme}`);
511
sendResponse({ theme });
612
}
713
return true; // Keep the message channel open for asynchronous response
814
});
915

1016
// Function to detect the theme of the current LeetCode page
1117
function detectPageTheme() {
12-
// Method 1: Check HTML tag class for 'dark' or 'light'
18+
console.log('Starting theme detection on leetcode page...');
19+
20+
// Force a quick check to see if this is a LeetCode page
21+
const url = window.location.href;
22+
const isLeetCodePage = url.includes('leetcode.com');
23+
console.log('Is LeetCode page:', isLeetCodePage, url);
24+
25+
// Method 1: Check for LeetCode's light theme indicator (most reliable)
26+
// In light mode LeetCode specifically has a white background for these elements
27+
const mainContent = document.querySelector('.content__1YWu') ||
28+
document.querySelector('.problem-description') ||
29+
document.querySelector('.content-wrapper');
30+
31+
if (mainContent) {
32+
const bgColor = window.getComputedStyle(mainContent).backgroundColor;
33+
console.log('Main content background color:', bgColor);
34+
35+
// LeetCode light mode has white or very light background
36+
if (bgColor.includes('255, 255, 255') || bgColor.includes('rgb(255, 255, 255)')) {
37+
console.log('Theme detected from content: LIGHT (white background)');
38+
return 'light';
39+
}
40+
}
41+
42+
// Method 2: Check for LeetCode-specific selectors
43+
const darkModeSwitcher = document.querySelector('[data-cy="navbar-dark-mode-switcher"]');
44+
if (darkModeSwitcher) {
45+
// If the dark mode switcher has a sun icon, it means we're in light mode
46+
const sunIcon = darkModeSwitcher.querySelector('svg[data-icon="sun"]');
47+
if (sunIcon) {
48+
console.log('Theme detected from dark mode switcher: LIGHT (sun icon visible)');
49+
return 'light';
50+
}
51+
// If the dark mode switcher has a moon icon, it means we're in dark mode
52+
const moonIcon = darkModeSwitcher.querySelector('svg[data-icon="moon"]');
53+
if (moonIcon) {
54+
console.log('Theme detected from dark mode switcher: dark (moon icon visible)');
55+
return 'dark';
56+
}
57+
}
58+
59+
// Method 3: Check HTML tag class for 'dark' or 'light'
1360
const htmlElement = document.documentElement;
1461
if (htmlElement.classList.contains('dark')) {
62+
console.log('Theme detected from HTML class: dark');
1563
return 'dark';
1664
} else if (htmlElement.classList.contains('light')) {
65+
console.log('Theme detected from HTML class: LIGHT');
1766
return 'light';
1867
}
1968

20-
// Method 2: Check data-theme attribute
69+
// Method 4: Check data-theme attribute
2170
const dataTheme = htmlElement.getAttribute('data-theme');
2271
if (dataTheme === 'dark') {
72+
console.log('Theme detected from data-theme: dark');
2373
return 'dark';
2474
} else if (dataTheme === 'light') {
75+
console.log('Theme detected from data-theme: LIGHT');
2576
return 'light';
2677
}
2778

28-
// Method 3: Check background color to determine if dark or light
79+
// Method 5: Check header/navbar background color (very reliable for LeetCode)
80+
const header = document.querySelector('header') || document.querySelector('nav');
81+
if (header) {
82+
const headerBgColor = window.getComputedStyle(header).backgroundColor;
83+
console.log('Header background color:', headerBgColor);
84+
85+
// LeetCode light mode header is usually white or very light
86+
if (headerBgColor.includes('255, 255, 255') ||
87+
headerBgColor.includes('rgb(255, 255, 255)') ||
88+
!isColorDark(headerBgColor)) {
89+
console.log('Theme detected from header: LIGHT');
90+
return 'light';
91+
} else {
92+
console.log('Theme detected from header: dark');
93+
return 'dark';
94+
}
95+
}
96+
97+
// Method 6: Check the code editor background (LeetCode specific)
98+
const codeEditor = document.querySelector('.monaco-editor');
99+
if (codeEditor) {
100+
const editorBgColor = window.getComputedStyle(codeEditor).backgroundColor;
101+
console.log('Code editor background color:', editorBgColor);
102+
if (isColorDark(editorBgColor)) {
103+
console.log('Theme detected from code editor: dark');
104+
return 'dark';
105+
} else {
106+
console.log('Theme detected from code editor: LIGHT');
107+
return 'light';
108+
}
109+
}
110+
111+
// Method 7: Check background color to determine if dark or light
29112
const backgroundColor = window.getComputedStyle(document.body).backgroundColor;
113+
console.log('Body background color:', backgroundColor);
30114
if (isColorDark(backgroundColor)) {
115+
console.log('Theme detected from body bg: dark');
31116
return 'dark';
117+
} else {
118+
console.log('Theme detected from body bg: LIGHT');
119+
return 'light';
32120
}
33-
34-
// Default to dark if we can't determine
35-
return 'dark';
36121
}
37122

38123
// Helper function to determine if a color is dark based on luminance
39124
function isColorDark(color) {
40125
// Extract RGB values
41126
const rgb = color.match(/\d+/g);
42-
if (!rgb || rgb.length < 3) return true; // Default to dark if can't extract
127+
if (!rgb || rgb.length < 3) {
128+
console.log('Could not extract RGB values from color:', color);
129+
return true; // Default to dark if can't extract
130+
}
43131

44132
// Calculate relative luminance
45133
const r = parseInt(rgb[0]) / 255;
@@ -48,6 +136,7 @@ function isColorDark(color) {
48136

49137
// Weighted luminance formula (human eye is more sensitive to green)
50138
const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
139+
console.log(`Color luminance: ${luminance} (< 0.5 is dark)`);
51140

52141
// Return true for dark colors (lower luminance)
53142
return luminance < 0.5;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /