From 7ca9c8ff259b22aae24b2914b6a682b8212c4f4b Mon Sep 17 00:00:00 2001 From: Guy Sandler Date: Sat, 15 Aug 2026 18:26:22 -0700 Subject: [PATCH] improved no dark mode compatibility --- _locales/en/messages.json | 2 +- css/content.css | 4 ++ html/popup.html | 3 +- js/content.js | 99 +++++++++++++++++++++++++-------------- 4 files changed, 71 insertions(+), 37 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 6e74676..89955a2 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -261,6 +261,6 @@ "message": "Center Cards" }, "hide_new_canvas": { - "message": "Hide New Canvas" + "message": "Hide New Dashboard" } } \ No newline at end of file diff --git a/css/content.css b/css/content.css index 82db7e2..60e35a6 100644 --- a/css/content.css +++ b/css/content.css @@ -63,6 +63,10 @@ opacity: .95; } .canvasrefined-custom-btn {background: #f5f5f5; border: 1px solid #c7cdd1; border-radius:6px; padding: 2px 8px;} +/* Better sidebar buttons sit on the --bcsidebar surface and use --bcsidebar-text + for labels/icons, so drop the light button chrome and use a subtle hover tint. */ +.better-sidebar-btn {background: transparent !important; border-color: transparent !important;} +.better-sidebar-btn:hover {background: color-mix(in srgb, var(--bcsidebar-text) 14%, transparent) !important;} .canvasrefined-viewmore-btn {display: block;margin:0 auto;margin-top: 8px;} .canvasrefined-course-percent, .canvasrefined-course-credit {border: 1px solid #ccc; color: var(--ic-brand-font-color-dark)} diff --git a/html/popup.html b/html/popup.html index 7eefdf9..9883a90 100644 --- a/html/popup.html +++ b/html/popup.html @@ -351,7 +351,7 @@
-
Hide New Canvas + Hide New Dashboard
@@ -1084,7 +1084,6 @@
-

5.11.2

diff --git a/js/content.js b/js/content.js index a6554e3..a94cc76 100644 --- a/js/content.js +++ b/js/content.js @@ -2497,7 +2497,7 @@ async function setupBetterSidebar(mode = getSidebarLayoutMode()) { } let sidebarList = makeElement("div", sidebarParent, { id: "better-sidebar-container", - style: `display:flex;flex-direction:column;width:50px;justify-content:center;align-items:center;box-sizing:border-box;position:relative;background-color:var(--bcbackground-0);height:100vh;position:sticky;top:0;left:0;` + style: `display:flex;flex-direction:column;width:50px;justify-content:center;align-items:center;box-sizing:border-box;position:relative;background-color:var(--bcsidebar);height:100vh;position:sticky;top:0;left:0;` }, true); let sidebarContent = makeElement("div", sidebarList, { style: "display:flex;flex-direction:column;gap:20px;width:100%;flex:1;justify-content:flex-start;align-items:center;margin:40px;" @@ -2512,7 +2512,7 @@ async function setupBetterSidebar(mode = getSidebarLayoutMode()) { - + ` @@ -2538,7 +2538,7 @@ async function setupBetterSidebar(mode = getSidebarLayoutMode()) { } function createSidebarButton(text, url, parent, icon) { let button = makeElement("a", parent, { - style: "width:40%;height:var(--bc-sidebar-btn-height,30px);cursor:pointer;text-align:center;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:var(--bc-sidebar-btn-gap,8px);color:var(--bctext-0) !important;font-weight:bold;position:relative;", + style: "width:40%;height:var(--bc-sidebar-btn-height,30px);cursor:pointer;text-align:center;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:var(--bc-sidebar-btn-gap,8px);color:var(--bcsidebar-text) !important;font-weight:bold;position:relative;", className: "canvasrefined-custom-btn better-sidebar-btn", href: url, }); @@ -2566,13 +2566,13 @@ function addSidebarButtonBadge(button, count) { function populateSidebarFromNav(sidebarContent) { const excludeIds = ["global_nav_help_link", "global_nav_history_link"]; const customIcons = { - "global_nav_profile_link": ``, - "global_nav_dashboard_link": ``, - "global_nav_conversations_link": ``, - "global_nav_calendar_link": ``, - "global_nav_courses_link": ``, - "global_nav_groups_link": ``, - "globalNavExternalTool-69": ``, + "global_nav_profile_link": ``, + "global_nav_dashboard_link": ``, + "global_nav_conversations_link": ``, + "global_nav_calendar_link": ``, + "global_nav_courses_link": ``, + "global_nav_groups_link": ``, + "globalNavExternalTool-69": ``, }; const navMenu = document.getElementById("menu"); @@ -2614,25 +2614,25 @@ function populateSidebarFromNav(sidebarContent) { // Check if svg already has a style attribute if (icon.includes('style="')) { // Append to existing style - icon = icon.replace(/style="([^"]*)"/, `style="$1 width:20px;height:20px;flex-shrink:0;fill:white;stroke:white;"`); + icon = icon.replace(/style="([^"]*)"/, `style="$1 width:20px;height:20px;flex-shrink:0;fill:var(--bcsidebar-text);stroke:var(--bcsidebar-text);"`); } else { // Add new style attribute - icon = icon.replace(" { - css += " --bc" + key + ": " + options.dark_preset[key] + ";\n"; - }); - } - css += "}\n\n"; - css += DARKMODE_CSS; - css += options.device_dark === true ? "\n}" : ""; - return css; + // Always-on light-mode defaults so var(--bc*) resolves in light mode too. + let css = ":root{\n"; + Object.keys(BC_LIGHT_DEFAULTS).forEach((key) => { + css += " --bc" + key + ": " + BC_LIGHT_DEFAULTS[key] + ";\n"; + }); + css += "}\n\n"; + + const darkOn = options.dark_mode === true || options.device_dark === true; + if (!darkOn) return css; + + let darkBlock = ":root{\n"; + if (options.dark_preset) { + Object.keys(options.dark_preset).forEach((key) => { + darkBlock += " --bc" + key + ": " + options.dark_preset[key] + ";\n"; + }); + } + darkBlock += "}\n\n"; + darkBlock += DARKMODE_CSS; + + if (options.device_dark === true) { + css += "@media (prefers-color-scheme: dark) {\n" + darkBlock + "\n}"; + } else { + css += darkBlock; + } + return css; } let darkStyleInserted = false; function toggleDarkMode() { const css = generateDarkModeCSS(); - if ((options.dark_mode === true || options.device_dark === true) && !darkStyleInserted) { + const darkOn = options.dark_mode === true || options.device_dark === true; + if (!darkStyleInserted) { let style = document.createElement('style'); style.textContent = css; document.documentElement.append(style); style.id = 'darkcss'; - style.className = "canvasrefined-darkmode-enabled"; + style.className = darkOn ? "canvasrefined-darkmode-enabled" : ""; darkStyleInserted = true; - } else if (darkStyleInserted) { + } else { let style = document.querySelector("#darkcss"); - style.textContent = options.dark_mode === true || options.device_dark ? css : ""; - style.className = options.dark_mode === true || options.device_dark ? "canvasrefined-darkmode-enabled" : ""; + style.textContent = css; + style.className = darkOn ? "canvasrefined-darkmode-enabled" : ""; } runiframeChecker(); }