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 a66d66f

Browse files
committed
fix company tags and video/code containers not updating theme until page refresh
1 parent 9b4aa7d commit a66d66f

File tree

2 files changed

+135
-23
lines changed

2 files changed

+135
-23
lines changed

‎src/content-script/update-description-tab.ts‎

Lines changed: 69 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,7 @@ function loadCompanyTags(problemTitle: string, companyTagContainer: HTMLElement)
195195
const topCompanies = problem.companies.slice(0, 5);
196196
topCompanies.forEach((company: { name: string; }) => {
197197
const button = document.createElement('button');
198+
button.classList.add('company-tag');
198199
button.onclick = () => {
199200
chrome.runtime.sendMessage({
200201
action: 'openCompanyPage',
@@ -214,18 +215,7 @@ function loadCompanyTags(problemTitle: string, companyTagContainer: HTMLElement)
214215

215216
chrome.storage.local.get(['isDarkTheme'], (result) => {
216217
const isDark = result.isDarkTheme;
217-
button.style.backgroundColor = isDark ? '#373737' : '#f3f4f5';
218-
button.style.color = isDark ? '#fff' : '#1a1a1a';
219-
button.style.border = `1px solid ${isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`;
220-
221-
button.addEventListener('mouseenter', () => {
222-
button.style.backgroundColor = isDark ? '#424242' : '#e6e6e6';
223-
button.style.borderColor = isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
224-
});
225-
button.addEventListener('mouseleave', () => {
226-
button.style.backgroundColor = isDark ? '#373737' : '#f3f4f5';
227-
button.style.borderColor = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
228-
});
218+
updateCompanyTagStyle(button, isDark);
229219
});
230220

231221
const icon = document.createElement('img');
@@ -244,6 +234,69 @@ function loadCompanyTags(problemTitle: string, companyTagContainer: HTMLElement)
244234
return companyTagContainer;
245235
}
246236

237+
function updateCompanyTagStyle(button: HTMLElement, isDark: boolean) {
238+
button.style.backgroundColor = isDark ? '#373737' : '#f3f4f5';
239+
button.style.color = isDark ? '#fff' : '#1a1a1a';
240+
button.style.border = `1px solid ${isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`;
241+
242+
// Remove existing listeners
243+
const oldMouseEnter = button.onmouseenter;
244+
const oldMouseLeave = button.onmouseleave;
245+
if (oldMouseEnter) button.removeEventListener('mouseenter', oldMouseEnter);
246+
if (oldMouseLeave) button.removeEventListener('mouseleave', oldMouseLeave);
247+
248+
// Add new theme-aware listeners
249+
button.addEventListener('mouseenter', () => {
250+
button.style.backgroundColor = isDark ? '#424242' : '#e6e6e6';
251+
button.style.borderColor = isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
252+
});
253+
button.addEventListener('mouseleave', () => {
254+
button.style.backgroundColor = isDark ? '#373737' : '#f3f4f5';
255+
button.style.borderColor = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
256+
});
257+
}
258+
259+
function updateThemeForCompanyTags(isDark: boolean) {
260+
const companyTags = document.querySelectorAll('.company-tag');
261+
companyTags.forEach((tag) => {
262+
if (tag instanceof HTMLElement) {
263+
updateCompanyTagStyle(tag, isDark);
264+
}
265+
});
266+
}
267+
268+
function setupDescriptionThemeListener() {
269+
// Listen for LeetCode's theme changes
270+
const observer = new MutationObserver((mutations) => {
271+
mutations.forEach((mutation) => {
272+
if (mutation.target instanceof HTMLElement && mutation.target.tagName === 'BODY') {
273+
chrome.storage.local.get(['themeMode'], (result) => {
274+
// Only sync theme if in auto mode
275+
if (result.themeMode === 'auto') {
276+
const isDark = document.body.classList.contains('dark');
277+
// Update our extension's theme setting
278+
chrome.storage.local.set({ isDarkTheme: isDark });
279+
updateThemeForCompanyTags(isDark);
280+
}
281+
});
282+
}
283+
});
284+
});
285+
286+
// Start observing the body element for class changes
287+
observer.observe(document.body, {
288+
attributes: true,
289+
attributeFilter: ['class']
290+
});
291+
292+
// Also listen for our extension's theme changes
293+
chrome.storage.onChanged.addListener((changes) => {
294+
if (changes.isDarkTheme) {
295+
updateThemeForCompanyTags(changes.isDarkTheme.newValue);
296+
}
297+
});
298+
}
299+
247300
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
248301
if (request.action === 'updateDescription') {
249302
// Detect theme on first load of a problem page
@@ -252,6 +305,9 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
252305
showCompanyTags(request.title.split('-')[0].trim());
253306
showDifficulty();
254307
showRating(request.title.split('-')[0].trim());
308+
309+
// Add theme change listener after creating company tags
310+
setupDescriptionThemeListener();
255311
} else if (request.action === 'getTheme') {
256312
// Return the current LeetCode theme
257313
const htmlElement = document.documentElement;
@@ -262,3 +318,4 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
262318
// Return true to indicate we will send a response asynchronously (needed for sendResponse)
263319
return true;
264320
});
321+

‎src/content-script/update-solutions-tab.ts‎

Lines changed: 66 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -448,20 +448,75 @@ function updateThemeForElement(element: HTMLElement, isDark: boolean) {
448448
}
449449

450450
function setupThemeChangeListener() {
451+
// Listen for our extension's theme changes
451452
chrome.storage.onChanged.addListener((changes) => {
452453
if (changes.isDarkTheme) {
453454
const isDark = changes.isDarkTheme.newValue;
454-
const elements = [
455-
'.code-container',
456-
'.video-container',
457-
'.language-buttons-container'
458-
].map(selector => document.querySelector(selector) as HTMLElement);
459-
460-
elements.forEach(element => {
461-
if (element) {
462-
updateThemeForElement(element, isDark);
463-
}
464-
});
455+
updateAllElements(isDark);
456+
}
457+
});
458+
459+
// Listen for LeetCode's theme changes
460+
const observer = new MutationObserver((mutations) => {
461+
mutations.forEach((mutation) => {
462+
if (mutation.target instanceof HTMLElement && mutation.target.tagName === 'BODY') {
463+
chrome.storage.local.get(['themeMode'], (result) => {
464+
// Only sync theme if in auto mode
465+
if (result.themeMode === 'auto') {
466+
const isDark = document.body.classList.contains('dark');
467+
// Update our extension's theme setting
468+
chrome.storage.local.set({ isDarkTheme: isDark });
469+
updateAllElements(isDark);
470+
}
471+
});
472+
}
473+
});
474+
});
475+
476+
// Start observing the body element for class changes
477+
observer.observe(document.body, {
478+
attributes: true,
479+
attributeFilter: ['class']
480+
});
481+
}
482+
483+
function updateAllElements(isDark: boolean) {
484+
const elements = [
485+
'.code-container',
486+
'.video-container',
487+
'.language-buttons-container',
488+
'.nav-container'
489+
].map(selector => document.querySelector(selector) as HTMLElement);
490+
491+
elements.forEach(element => {
492+
if (element) {
493+
if (element.classList.contains('nav-container')) {
494+
// Update nav container buttons
495+
const buttons = element.querySelectorAll('button');
496+
buttons.forEach(button => {
497+
button.style.backgroundColor = isDark ? '#373737' : '#f3f4f5';
498+
button.style.color = isDark ? '#fff' : '#1a1a1a';
499+
button.style.border = `1px solid ${isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`;
500+
501+
// Remove existing listeners
502+
const oldMouseEnter = button.onmouseenter;
503+
const oldMouseLeave = button.onmouseleave;
504+
if (oldMouseEnter) button.removeEventListener('mouseenter', oldMouseEnter);
505+
if (oldMouseLeave) button.removeEventListener('mouseleave', oldMouseLeave);
506+
507+
// Add new theme-aware listeners
508+
button.addEventListener('mouseenter', () => {
509+
button.style.backgroundColor = isDark ? '#424242' : '#e6e6e6';
510+
button.style.borderColor = isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
511+
});
512+
button.addEventListener('mouseleave', () => {
513+
button.style.backgroundColor = isDark ? '#373737' : '#f3f4f5';
514+
button.style.borderColor = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
515+
});
516+
});
517+
} else {
518+
updateThemeForElement(element, isDark);
519+
}
465520
}
466521
});
467522
}

0 commit comments

Comments
(0)

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