Skip to content

Commit fe61fff

Browse files
committed
Fix hardcoded hover backgrounds for dark mode
Replace #f6f8fa with color-mix(in srgb, CanvasText 8%, Canvas) on the toggle button and TOC link hover/active states so they adapt to the OS color scheme instead of flashing a light patch in dark mode. https://claude.ai/code/session_0127se6jmh8sVbsNrECDifnP
1 parent 922c8f9 commit fe61fff

1 file changed

Lines changed: 2 additions & 2 deletions

File tree

htmlpreview.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,13 +112,13 @@
112112
'body.toc-open #toc-wrapper{width:260px;max-height:100vh;overflow-y:auto;border-right:1px solid #d0d7de;background:Canvas}' +
113113
'body.toc-open #toc-header{padding:16px;border-bottom:1px solid #d0d7de}' +
114114
'#toc-toggle{background:Canvas;border:1px solid #d0d7de;border-radius:6px;padding:5px 9px;cursor:pointer;font-size:15px;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.1);flex-shrink:0}' +
115-
'#toc-toggle:hover{background:#f6f8fa}' +
115+
'#toc-toggle:hover{background:color-mix(in srgb,CanvasText 8%,Canvas)}' +
116116
'#toc-label{display:none;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#57606a;font-weight:600}' +
117117
'body.toc-open #toc-label{display:block}' +
118118
'#toc-nav{display:none;padding:12px 16px;font-size:13px}' +
119119
'body.toc-open #toc-nav{display:block}' +
120120
'#toc-nav .toc-link{color:#57606a;text-decoration:none;display:block;padding:2px 4px;border-radius:4px}' +
121-
'#toc-nav .toc-link:hover,#toc-nav .is-active-link{color:#0969da;background:#f6f8fa}' +
121+
'#toc-nav .toc-link:hover,#toc-nav .is-active-link{color:#0969da;background:color-mix(in srgb,CanvasText 8%,Canvas)}' +
122122
'#toc-nav .is-active-link{font-weight:600}' +
123123
'.toc-list{list-style:none;padding-left:12px;margin:4px 0}' +
124124
'#main{flex:1;min-width:0;padding:48px 64px 80px}' +

0 commit comments

Comments
 (0)