Skip to content

Commit f41adb9

Browse files
tymzdtymzd
committed
feat: dynamically style blog code blocks based on light/dark theme
1 parent ceec641 commit f41adb9

2 files changed

Lines changed: 165 additions & 3 deletions

File tree

‎gcp/website/blog/hugo.toml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@ baseURL = 'http://osv.dev/blog/'
22
languageCode = 'en-us'
33
title = 'OSV Blog'
44
[markup]
5-
[markup.highlight]
6-
style = 'native'
7-
tabWidth = 2
5+
[markup.highlight]
6+
noClasses = false
7+
tabWidth = 2

‎gcp/website/frontend3/src/styles.scss‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2237,3 +2237,165 @@ html[data-theme="light"] .theme-toggle-btn {
22372237
display: flex;
22382238
justify-content: center;
22392239
}
2240+
2241+
/* Syntax Highlighting */
2242+
.chroma {
2243+
padding: 1em;
2244+
margin: 1em 0;
2245+
border-radius: 4px;
2246+
overflow: auto;
2247+
}
2248+
2249+
/* Dark theme (Native) */
2250+
[data-theme="dark"] .chroma {
2251+
color: #d0d0d0;
2252+
background-color: #202020;
2253+
.err { color:#a61717;background-color:#e3d2d2 }
2254+
.lnlinks { outline:none;text-decoration:none;color:inherit }
2255+
.lntd { vertical-align:top;padding:0;margin:0;border:0; }
2256+
.lntable { border-spacing:0;padding:0;margin:0;border:0; }
2257+
.hl { background-color:#363636 }
2258+
.lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868 }
2259+
.ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#686868 }
2260+
.line { display:flex; }
2261+
.k { color:#6ab825;font-weight:bold }
2262+
.kc { color:#6ab825;font-weight:bold }
2263+
.kd { color:#6ab825;font-weight:bold }
2264+
.kn { color:#6ab825;font-weight:bold }
2265+
.kp { color:#6ab825 }
2266+
.kr { color:#6ab825;font-weight:bold }
2267+
.kt { color:#6ab825;font-weight:bold }
2268+
.na { color:#bbb }
2269+
.nc { color:#447fcf;text-decoration:underline }
2270+
.no { color:#40ffff }
2271+
.nd { color:#ffa500 }
2272+
.ne { color:#bbb }
2273+
.nn { color:#447fcf;text-decoration:underline }
2274+
.nt { color:#6ab825;font-weight:bold }
2275+
.nb { color:#24909d }
2276+
.bp { color:#24909d }
2277+
.nv { color:#40ffff }
2278+
.vc { color:#40ffff }
2279+
.vg { color:#40ffff }
2280+
.vi { color:#40ffff }
2281+
.vm { color:#40ffff }
2282+
.nf { color:#447fcf }
2283+
.fm { color:#447fcf }
2284+
.s { color:#ed9d13 }
2285+
.sa { color:#ed9d13 }
2286+
.sb { color:#ed9d13 }
2287+
.sc { color:#ed9d13 }
2288+
.dl { color:#ed9d13 }
2289+
.sd { color:#ed9d13 }
2290+
.s2 { color:#ed9d13 }
2291+
.se { color:#ed9d13 }
2292+
.sh { color:#ed9d13 }
2293+
.si { color:#ed9d13 }
2294+
.sx { color:#ffa500 }
2295+
.sr { color:#ed9d13 }
2296+
.s1 { color:#ed9d13 }
2297+
.ss { color:#ed9d13 }
2298+
.m { color:#3677a9 }
2299+
.mb { color:#3677a9 }
2300+
.mf { color:#3677a9 }
2301+
.mh { color:#3677a9 }
2302+
.mi { color:#3677a9 }
2303+
.il { color:#3677a9 }
2304+
.mo { color:#3677a9 }
2305+
.ow { color:#6ab825;font-weight:bold }
2306+
.c { color:#999;font-style:italic }
2307+
.ch { color:#999;font-style:italic }
2308+
.cm { color:#999;font-style:italic }
2309+
.c1 { color:#999;font-style:italic }
2310+
.cs { color:#e50808;background-color:#520000;font-weight:bold }
2311+
.cp { color:#cd2828;font-weight:bold }
2312+
.cpf { color:#cd2828;font-weight:bold }
2313+
.gd { color:#d22323 }
2314+
.ge { font-style:italic }
2315+
.gr { color:#d22323 }
2316+
.gh { color:#fff;font-weight:bold }
2317+
.gi { color:#589819 }
2318+
.go { color:#ccc }
2319+
.gp { color:#aaa }
2320+
.gs { font-weight:bold }
2321+
.gu { color:#fff;text-decoration:underline }
2322+
.gt { color:#d22323 }
2323+
.gl { text-decoration:underline }
2324+
.w { color:#666 }
2325+
}
2326+
2327+
/* Light theme (GitHub) */
2328+
[data-theme="light"] .chroma {
2329+
background-color: #f7f7f7;
2330+
color: #1f2328;
2331+
.err { color:#f6f8fa;background-color:#82071e }
2332+
.lnlinks { outline:none;text-decoration:none;color:inherit }
2333+
.lntd { vertical-align:top;padding:0;margin:0;border:0; }
2334+
.lntable { border-spacing:0;padding:0;margin:0;border:0; }
2335+
.hl { background-color:#dedede }
2336+
.lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
2337+
.ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
2338+
.line { display:flex; }
2339+
.k { color:#cf222e }
2340+
.kc { color:#cf222e }
2341+
.kd { color:#cf222e }
2342+
.kn { color:#cf222e }
2343+
.kp { color:#cf222e }
2344+
.kr { color:#cf222e }
2345+
.kt { color:#cf222e }
2346+
.na { color:#1f2328 }
2347+
.nc { color:#1f2328 }
2348+
.no { color:#0550ae }
2349+
.nd { color:#0550ae }
2350+
.ni { color:#6639ba }
2351+
.nl { color:#900;font-weight:bold }
2352+
.nn { color:#24292e }
2353+
.nx { color:#1f2328 }
2354+
.nt { color:#0550ae }
2355+
.nb { color:#6639ba }
2356+
.bp { color:#6a737d }
2357+
.nv { color:#953800 }
2358+
.vc { color:#953800 }
2359+
.vg { color:#953800 }
2360+
.vi { color:#953800 }
2361+
.vm { color:#953800 }
2362+
.nf { color:#6639ba }
2363+
.fm { color:#6639ba }
2364+
.s { color:#0a3069 }
2365+
.sa { color:#0a3069 }
2366+
.sb { color:#0a3069 }
2367+
.sc { color:#0a3069 }
2368+
.dl { color:#0a3069 }
2369+
.sd { color:#0a3069 }
2370+
.s2 { color:#0a3069 }
2371+
.se { color:#0a3069 }
2372+
.sh { color:#0a3069 }
2373+
.si { color:#0a3069 }
2374+
.sx { color:#0a3069 }
2375+
.sr { color:#0a3069 }
2376+
.s1 { color:#0a3069 }
2377+
.ss { color:#032f62 }
2378+
.m { color:#0550ae }
2379+
.mb { color:#0550ae }
2380+
.mf { color:#0550ae }
2381+
.mh { color:#0550ae }
2382+
.mi { color:#0550ae }
2383+
.il { color:#0550ae }
2384+
.mo { color:#0550ae }
2385+
.o { color:#0550ae }
2386+
.ow { color:#0550ae }
2387+
.p { color:#1f2328 }
2388+
.c { color:#57606a }
2389+
.ch { color:#57606a }
2390+
.cm { color:#57606a }
2391+
.c1 { color:#57606a }
2392+
.cs { color:#57606a }
2393+
.cp { color:#57606a }
2394+
.cpf { color:#57606a }
2395+
.gd { color:#82071e;background-color:#ffebe9 }
2396+
.ge { color:#1f2328 }
2397+
.gi { color:#116329;background-color:#dafbe1 }
2398+
.go { color:#1f2328 }
2399+
.gl { text-decoration:underline }
2400+
.w { color:#fff }
2401+
}

0 commit comments

Comments
 (0)