NTP: Use design system colors #2095
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
noisysocks
requested review from
a team,
mgurgel and
shakyShane
as code owners
Contributor
Temporary Branch UpdateThe temporary branch has been updated with the latest changes. Below are the details:
Please use the above install command to update to the latest version. |
Contributor
[Beta] Generated file diffTime updated: Wed, 10 Dec 2025 00:43:54 GMT Apple
File has changed Integration
File has changed Windows
File has changed |
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
|
Cursor Agent can help with this pull request. Just |
✅ Deploy Preview for content-scope-scripts ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
noisysocks
force-pushed
the
randerson/new-tab-theme-styling
branch
from
3a1f53d to
57dccf3
Compare
8 tasks
Contributor
Author
|
Let’s merge #2096 first so that can be more confident about the changes to the default theme. edit: did this locally, all good. |
shakyShane
approved these changes
Dec 10, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Asana Task/Github Issue: https://app.asana.com/1/137249556945/project/1209121419454298/task/1210127348056256
Description
Based on #2085.
Swaps out the
--ntptheme variables for their equivalent--dstheme variables (made available in #2085). This means that all components that are correctly using CSS variables for their colours will be coloured according to the theme variant sent by the browser.Notes:
Some components use hardcoded colours. I considered auditing these but it’s a large task with a high chance of me making a mistake. I think a better approach is updating the
--ntptheme variables and then fixing individual components that appear off during testing. Majority of the hardcoded colours are transparent whites and blacks which will work just fine in different theme variants.I’m not feature flagging this change which means if C-S-S is updated then production users will get the updated palette for the
defaulttheme variant . Flagging is difficult and the differences are minor (e.g. different text / border opacities) so I think this is the right tradeoff. Non-default theme variants won’t be released to production users, these are feature flagged via thethemeVariantsetting.Testing Steps
Test a few different UI configurations:
Plus whatever else you can think of.
Test different
themeVariantparams:default,coolGray,slateBlue,green,violet,rose,orange,desert.Test light and dark mode (set
&theme=dark).Test that default variant (
default) looks similar to how it did before.Checklist
Please tick all that apply:
Note
Replaces
--ntpcolors with--dsdesign system tokens across new tab and special pages, updates theme-variant mappings and defaults, and aligns tests and deps with the new palette.--ntp*variables to--ds-color-theme-*across NTP components and special pages (e.g.,Activity*.module.css,App.module.css,ShowHide.module.css,NextSteps.module.css,Protections.module.css,Omnibar/*.module.css,SuggestionsList.module.css,TabSwitcher.module.css,PrivacyStats*.module.css,UpdateNotification.module.css,FreemiumPIRBanner.module.css,RemoteMessagingFramework.module.css).special-pages/pages/new-tab/app/styles/ntp-theme.cssto define--dstoken mappings for light/dark and alldata-theme-variantvalues; set surface/canvas, control, accent, text/icon, shadow, and focus-ring variables.errorpage/index.css,history-theme.css, and special errorvariables.cssto--ds-color-theme-*.--ntp-surface-background-colorbased on--dstokens.--dstokens; adjust hover/active fills to new control tokens.customizerData()inComponents.jsxfor examples/demo data.--dspalette (e.g., default dark#1c1c1c, variant canvas colors).@duckduckgo/design-tokenstov0.2.0inpackage-lock.jsonandspecial-pages/package.json.Written by Cursor Bugbot for commit b98d206. This will update automatically on new commits. Configure here.