Skip to content

Conversation

@n3ps
Copy link
Contributor

@n3ps n3ps commented Dec 16, 2025

Description

Simplify handling of dark/light theme background using the light-dark function

Also fixes #38827 where the document needs to match the main container background

Open in GitHub Codespaces

Changelog

CHANGELOG entry: null

Related issues

Fixes: #38827

Manual testing steps

  1. Go to this page...

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Simplifies global dark/light theming by using CSS light-dark and consolidating document/background color handling in ui/css/base-styles.scss.

  • Global CSS/Theming (ui/css/base-styles.scss):
    • Use color-scheme: dark light and light-dark(...) in :root to set default text and background colors.
    • Replace complex prefers-color-scheme and non-data-theme conditionals with a single html[data-theme] rule for theme overrides.
    • Remove background styling coupling from #app-content so the document and main container backgrounds align.
    • Keep base element resets; no structural layout changes beyond background/color handling.

Written by Cursor Bugbot for commit de2fc83. This will update automatically on new commits. Configure here.

@n3ps n3ps requested a review from a team as a code owner December 16, 2025 19:39
@github-actions
Copy link
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@metamaskbot
Copy link
Collaborator

metamaskbot commented Dec 16, 2025

✨ Files requiring CODEOWNER review ✨

👨‍🔧 @MetaMask/core-extension-ux (1 files, +7 -27)
  • 📁 ui/
    • 📁 css/
      • 📄 base-styles.scss +7 -27

}
}
html[data-theme] {
background-color: var(--color-background-default);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Matches main container

@n3ps n3ps enabled auto-merge December 16, 2025 19:54
@metamaskbot
Copy link
Collaborator

Builds ready [d4c9476]
UI Startup Metrics (1259 ± 92 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup1259104414979213071418
load105185712708610991190
domContentLoaded104485412658610941184
domInteractive251585172377
firstPaint56883127441910611158
backgroundConnect21119226612217239
firstReactRender1492941524
getState34176393853
initialActions103112
loadScripts840662105285892981
setupStore1252541321
numNetworkReqs171178161168
BrowserifyPower User HomeuiStartup18111466237816118972120
load1086908162112411711279
domContentLoaded1075899160912411611272
domInteractive31181142226102
firstPaint579106162542810441257
backgroundConnect24720068277238477
firstReactRender15113441624
getState19114531032204267
initialActions104112
loadScripts85869313641209411055
setupStore18762101744
numNetworkReqs66491331864118
WebpackStandard HomeuiStartup77864697473831939
load62256577757649757
domContentLoaded61756177257639749
domInteractive241693172176
firstPaint24178754172221649
backgroundConnect3551323653114
firstReactRender14104041520
getState3115145213760
initialActions101011
loadScripts61455976255637740
setupStore1164671229
numNetworkReqs171175161167
WebpackPower User HomeuiStartup1237937172518113251614
load7185901015100806902
domContentLoaded712584100899799895
domInteractive3116175262699
firstPaint328891016246588870
backgroundConnect62665913735516
firstReactRender15122011618
getState179139706106167189
initialActions102011
loadScripts709581100698794893
setupStore1594281337
numNetworkReqs65521452061125
FirefoxBrowserifyStandard HomeuiStartup13411073172815414151623
load1074921139610211211297
domContentLoaded1073921139610311211297
domInteractive73313004887174
firstPaint------
backgroundConnect50212024347169
firstReactRender12102531220
getState1163661026
initialActions103012
loadScripts104490312908710971195
setupStore145113161048
numNetworkReqs19986181472
BrowserifyPower User HomeuiStartup26211457428560830333341
load1769968273756522522514
domContentLoaded1769968273756522522513
domInteractive9432115313481284
firstPaint------
backgroundConnect46317128546210981185
firstReactRender19115752127
getState132621026131128214
initialActions3153637
loadScripts1394930255845615742333
setupStore436106811245168
numNetworkReqs71531382189111
WebpackStandard HomeuiStartup16351350310426317172001
load13681157267222814021667
domContentLoaded13681157267222814021667
domInteractive81291693599136
firstPaint------
backgroundConnect63203564872153
firstReactRender15112731623
getState147151191326
initialActions103122
loadScripts13341134264622013681618
setupStore155101151451
numNetworkReqs19980191476
WebpackPower User HomeuiStartup27491637373057731953573
load19881105290455825022753
domContentLoaded19881105290455825022752
domInteractive852899211573290
firstPaint------
backgroundConnect3082512553623421159
firstReactRender2212149182230
getState1156527236122191
initialActions207124
loadScripts17441089272548222632504
setupStore8741188242411065
numNetworkReqs70471262282115
📊 Page Load Benchmark Results

Current Commit: d4c9476 | Date: 12/16/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.03s (±40ms) 🟡 | historical mean value: 1.04s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 720ms (±36ms) 🟢 | historical mean value: 721ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 77ms (±12ms) 🟢 | historical mean value: 77ms ⬇️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.03s 40ms 1.01s 1.33s 1.06s 1.33s
domContentLoaded 720ms 36ms 698ms 992ms 743ms 992ms
firstPaint 77ms 12ms 64ms 188ms 84ms 188ms
firstContentfulPaint 77ms 12ms 64ms 188ms 84ms 188ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 313 Bytes (0.01%)
  • ui: -1.02 KiB (-0.01%)
  • common: 2.42 KiB (0.03%)

@n3ps n3ps disabled auto-merge December 17, 2025 01:31
@metamaskbot
Copy link
Collaborator

Builds ready [0fffcae]
UI Startup Metrics (1243 ± 105 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup1243999150110513161404
load105184912459611231209
domContentLoaded104684512379611151199
domInteractive2515104202184
firstPaint149621075113180293
backgroundConnect21119226211215237
firstReactRender1492741523
getState362085124161
initialActions107112
loadScripts841642103995906990
setupStore1172731319
numNetworkReqs181183181167
BrowserifyPower User HomeuiStartup17911428257919519092158
load1036850148412211091271
domContentLoaded1024843147812210921265
domInteractive3017145232892
firstPaint203691175152216305
backgroundConnect25118761496238540
firstReactRender15113441622
getState19213369457207240
initialActions104112
loadScripts81966012491188851067
setupStore17660111741
numNetworkReqs66531341863116
WebpackStandard HomeuiStartup789653101574829952
load63757283065651788
domContentLoaded63356982465647782
domInteractive261597192286
firstPaint1086034557132222
backgroundConnect3451293251110
firstReactRender1492731621
getState3316172194160
initialActions103111
loadScripts62956681863645778
setupStore1255071325
numNetworkReqs171078171168
WebpackPower User HomeuiStartup1249964171219213091684
load71258897894744904
domContentLoaded70558197493734898
domInteractive31171242525102
firstPaint1276537561160237
backgroundConnect82764215769586
firstReactRender16133321718
getState16410371557165182
initialActions102011
loadScripts70257896692731889
setupStore15104481436
numNetworkReqs65511251762115
FirefoxBrowserifyStandard HomeuiStartup13651063211919614701768
load1089911182014011731301
domContentLoaded1088910182014011721300
domInteractive65312274093146
firstPaint------
backgroundConnect54171904165160
firstReactRender13104041321
getState136229231124
initialActions102012
loadScripts1055896179413011221232
setupStore205438491083
numNetworkReqs20988201478
BrowserifyPower User HomeuiStartup26011493357652329783264
load1711988259554922082487
domContentLoaded1710988259454922082486
domInteractive81323917287264
firstPaint------
backgroundConnect3832212124194871133
firstReactRender211281102229
getState1146321733125199
initialActions3029427
loadScripts1400973239745019482276
setupStore395100510527161
numNetworkReqs71541352284116
WebpackStandard HomeuiStartup15681314230818916751897
load13081096165511713571533
domContentLoaded13081096165511713561533
domInteractive842819542121140
firstPaint------
backgroundConnect62172444670156
firstReactRender16117181824
getState197238321576
initialActions103122
loadScripts12691081160110413271453
setupStore2152323612107
numNetworkReqs20988201379
WebpackPower User HomeuiStartup27711826399557532233602
load20141115320955225032719
domContentLoaded20131108320955225022719
domInteractive77304198771338
firstPaint------
backgroundConnect4082513074344971225
firstReactRender2314152172341
getState1227243557124241
initialActions3131427
loadScripts16761092304345721192448
setupStore775107519858196
numNetworkReqs71451312392118
📊 Page Load Benchmark Results

Current Commit: 0fffcae | Date: 12/17/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.04s (±76ms) 🟡 | historical mean value: 1.04s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 727ms (±101ms) 🟢 | historical mean value: 722ms ⬆️ (historical data)
  • firstContentfulPaint-> current mean value: 84ms (±84ms) 🟢 | historical mean value: 77ms ⬆️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.04s 76ms 1.01s 1.75s 1.06s 1.75s
domContentLoaded 727ms 101ms 696ms 1.71s 746ms 1.71s
firstPaint 84ms 84ms 64ms 920ms 88ms 920ms
firstContentfulPaint 84ms 84ms 64ms 920ms 88ms 920ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 781 Bytes (0.01%)
  • ui: -1.02 KiB (-0.01%)
  • common: 2.5 KiB (0.03%)

@n3ps n3ps added this pull request to the merge queue Dec 17, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Dec 17, 2025
@n3ps n3ps added this pull request to the merge queue Dec 17, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Dec 17, 2025
@n3ps n3ps enabled auto-merge December 17, 2025 15:33
@metamaskbot
Copy link
Collaborator

Builds ready [1b1ef1c]
UI Startup Metrics (1271 ± 107 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup12711028154410713541448
load1059863134010211171243
domContentLoaded1054855133410111121239
domInteractive2615119202176
firstPaint159631137152189303
backgroundConnect21419532818216247
firstReactRender1499891421
getState371697134365
initialActions103112
loadScripts84665011281039081025
setupStore1272941320
numNetworkReqs171175161163
BrowserifyPower User HomeuiStartup18091475218315418932109
load1075889134211011371303
domContentLoaded1065885133310911291297
domInteractive3017114222797
firstPaint1576847285217317
backgroundConnect26120357188253516
firstReactRender15103631518
getState19314231534214251
initialActions102112
loadScripts84567911271069041076
setupStore1766391638
numNetworkReqs66551321565113
WebpackStandard HomeuiStartup76761498683828910
load60954482863632740
domContentLoaded60353982362627735
domInteractive241488181977
firstPaint1185576483156208
backgroundConnect3151243655114
firstReactRender1593351629
getState291392153955
initialActions108111
loadScripts60053781561625728
setupStore1142951223
numNetworkReqs181176181173
WebpackPower User HomeuiStartup1282972223122713541753
load7376001103108837930
domContentLoaded7315931099107829917
domInteractive33181553027123
firstPaint1236838963147270
backgroundConnect71668214451522
firstReactRender16132721623
getState16713868854167190
initialActions102011
loadScripts7275911090106827914
setupStore14104071336
numNetworkReqs66541491964121
FirefoxBrowserifyStandard HomeuiStartup13921102279423714551875
load1105937215316711621313
domContentLoaded1104937215316711621312
domInteractive65312284186151
firstPaint------
backgroundConnect48191853755134
firstReactRender1392631318
getState157130211234
initialActions102122
loadScripts1078922205115611331263
setupStore164192231542
numNetworkReqs19980191472
BrowserifyPower User HomeuiStartup25781520343153829753283
load1715976268453522082535
domContentLoaded1715976268453422082534
domInteractive883298011585298
firstPaint------
backgroundConnect3381912263893991168
firstReactRender19122842125
getState1136046146125163
initialActions3135537
loadScripts1447958250144019892225
setupStore365111511233106
numNetworkReqs71501382189111
WebpackStandard HomeuiStartup16211322231122017752027
load13451131172714114231660
domContentLoaded13441130172714114231654
domInteractive75292303695131
firstPaint------
backgroundConnect60172114173154
firstReactRender15112531621
getState156143171440
initialActions103123
loadScripts13081116163512513731567
setupStore2341923814119
numNetworkReqs20988211380
WebpackPower User HomeuiStartup27161658371155131403580
load20301158283850424412644
domContentLoaded20301158283850424412644
domInteractive762989010474257
firstPaint------
backgroundConnect3222212093363521105
firstReactRender2112145162229
getState1166534949135207
initialActions208227
loadScripts17931143265645221892495
setupStore2842004137154
numNetworkReqs68461242282117
📊 Page Load Benchmark Results

Current Commit: 1b1ef1c | Date: 12/17/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.05s (±38ms) 🟡 | historical mean value: 1.03s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 729ms (±36ms) 🟢 | historical mean value: 718ms ⬆️ (historical data)
  • firstContentfulPaint-> current mean value: 78ms (±13ms) 🟢 | historical mean value: 78ms ⬆️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.05s 38ms 1.02s 1.33s 1.06s 1.33s
domContentLoaded 729ms 36ms 704ms 992ms 748ms 992ms
firstPaint 78ms 13ms 64ms 196ms 84ms 196ms
firstContentfulPaint 78ms 13ms 64ms 196ms 84ms 196ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 58 Bytes (0%)
  • ui: 0 Bytes (0%)
  • common: 20 Bytes (0%)

@metamaskbot
Copy link
Collaborator

Builds ready [de2fc83]
UI Startup Metrics (1247 ± 103 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup12471014160310313201394
load105586413469511201177
domContentLoaded104985413439411121165
domInteractive251498182278
firstPaint158631192156186314
backgroundConnect21219625310216232
firstReactRender1382431418
getState35176993961
initialActions102111
loadScripts843652111595913961
setupStore1152131216
numNetworkReqs181179171170
BrowserifyPower User HomeuiStartup17851434310219818702038
load1078892134110211611247
domContentLoaded1068885133510111521240
domInteractive3018101202893
firstPaint187711274156224344
backgroundConnect25820062493248576
firstReactRender14112521519
getState19214932232211245
initialActions103112
loadScripts84869010791009321027
setupStore1574071535
numNetworkReqs6453127156299
WebpackStandard HomeuiStartup781634119186829962
load63356392671651789
domContentLoaded62855891570647783
domInteractive2515118212191
firstPaint1005834348122186
backgroundConnect315125294790
firstReactRender15103341524
getState291474113748
initialActions103111
loadScripts62555690669645774
setupStore1154151322
numNetworkReqs181184181170
WebpackPower User HomeuiStartup1175923213817612421492
load68156591287706871
domContentLoaded67456190586697861
domInteractive2815109212492
firstPaint1325932463171263
backgroundConnect5574247780260
firstReactRender15122821619
getState16414221115171196
initialActions102011
loadScripts67155889885694859
setupStore1493981335
numNetworkReqs65511382162127
FirefoxBrowserifyStandard HomeuiStartup13351084175613514011592
load107791413298311291265
domContentLoaded107791413298311281265
domInteractive75352193691139
firstPaint------
backgroundConnect50201673561140
firstReactRender1292431217
getState126130151021
initialActions105122
loadScripts104689912507010841180
setupStore136184191136
numNetworkReqs19981191476
BrowserifyPower User HomeuiStartup26401521392461131503410
load1762980307959723222632
domContentLoaded1761980307959723222632
domInteractive1023396512593339
firstPaint------
backgroundConnect3362212153764721144
firstReactRender20125862227
getState162601110200137943
initialActions218237
loadScripts1513965289250020532373
setupStore3652514840165
numNetworkReqs71511412564135
WebpackStandard HomeuiStartup16121320204617517271945
load13351147183712914061557
domContentLoaded13341143183712914061557
domInteractive822923342110148
firstPaint------
backgroundConnect60182414764154
firstReactRender16115861625
getState2272523615115
initialActions103122
loadScripts12981114181811913771498
setupStore2152233216118
numNetworkReqs19983191576
WebpackPower User HomeuiStartup28261704421358432323629
load20991194285253725442803
domContentLoaded20991194284653625442803
domInteractive90304889194371
firstPaint------
backgroundConnect3252312633723731170
firstReactRender22147572429
getState1187722335133209
initialActions218124
loadScripts18501173280848022942616
setupStore34510991112674
numNetworkReqs71501412577127
📊 Page Load Benchmark Results

Current Commit: de2fc83 | Date: 12/17/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.04s (±62ms) 🟡 | historical mean value: 1.03s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 728ms (±59ms) 🟢 | historical mean value: 719ms ⬆️ (historical data)
  • firstContentfulPaint-> current mean value: 76ms (±13ms) 🟢 | historical mean value: 77ms ⬇️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.04s 62ms 1.01s 1.32s 1.25s 1.32s
domContentLoaded 728ms 59ms 697ms 1.00s 919ms 1.00s
firstPaint 76ms 13ms 56ms 188ms 84ms 188ms
firstContentfulPaint 76ms 13ms 56ms 188ms 84ms 188ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 58 Bytes (0%)
  • ui: 0 Bytes (0%)
  • common: 20 Bytes (0%)

@n3ps n3ps added this pull request to the merge queue Dec 17, 2025
Merged via the queue into main with commit 37125e2 Dec 17, 2025
333 of 335 checks passed
@n3ps n3ps deleted the n3ps/background branch December 17, 2025 17:48
@github-actions github-actions bot locked and limited conversation to collaborators Dec 17, 2025
@metamaskbot metamaskbot added the release-13.14.0 Issue or pull request that will be included in release 13.14.0 label Dec 17, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

quality-sprint-dec-2025 release-13.14.0 Issue or pull request that will be included in release 13.14.0 size-S team-core-extension-ux Core Extension UX team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Scrolling up on dark mode shows white background

5 participants