Skip to content

feat: introduce light mode theme#2159

Open
Nick-1979 wants to merge 47 commits into
mainfrom
lightMode
Open

feat: introduce light mode theme#2159
Nick-1979 wants to merge 47 commits into
mainfrom
lightMode

Conversation

@Nick-1979
Copy link
Copy Markdown
Member

@Nick-1979 Nick-1979 commented May 5, 2026

Screenshot 2026-05-05 at 22 01 14

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 5, 2026

Important

Review skipped

Too many files!

This PR contains 295 files, which is 145 over the limit of 150.

To get a review, narrow the scope:
• coderabbit review --type committed # exclude uncommitted changes
• coderabbit review --dir # limit to a subdirectory
• coderabbit review --base # compare against a closer base

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 99c6fe28-dc37-405c-b98b-e7b93ef7e532

📥 Commits

Reviewing files that changed from the base of the PR and between 09d0a97 and 7577a97.

⛔ Files ignored due to path filters (5)
  • packages/extension-polkagate/src/assets/icons/emptyListLight.svg is excluded by !**/*.svg
  • packages/extension-polkagate/src/assets/img/fullscreenBackgroundLight.svg is excluded by !**/*.svg
  • packages/extension-polkagate/src/assets/img/onboardingBackgroundLight.svg is excluded by !**/*.svg
  • packages/extension-polkagate/src/assets/logos/logoMotionLight.gif is excluded by !**/*.gif
  • packages/extension-polkagate/src/assets/logos/polkagateVectorBlack.svg is excluded by !**/*.svg
📒 Files selected for processing (295)
  • addedForPlus.txt
  • packages/extension-polkagate/src/assets/icons/index.ts
  • packages/extension-polkagate/src/assets/img/index.ts
  • packages/extension-polkagate/src/assets/logos/index.ts
  • packages/extension-polkagate/src/components/AccountVisibilityToggler.tsx
  • packages/extension-polkagate/src/components/ActionButton.tsx
  • packages/extension-polkagate/src/components/ActionCard.tsx
  • packages/extension-polkagate/src/components/Address.tsx
  • packages/extension-polkagate/src/components/Address2.tsx
  • packages/extension-polkagate/src/components/AddressInput.tsx
  • packages/extension-polkagate/src/components/BackWithLabel.tsx
  • packages/extension-polkagate/src/components/ColorContext.ts
  • packages/extension-polkagate/src/components/CryptoFiatBalance.tsx
  • packages/extension-polkagate/src/components/DetailPanel.tsx
  • packages/extension-polkagate/src/components/DisplayBalance.tsx
  • packages/extension-polkagate/src/components/DropContent.tsx
  • packages/extension-polkagate/src/components/DropMenuContent.tsx
  • packages/extension-polkagate/src/components/DropMenuRow.tsx
  • packages/extension-polkagate/src/components/DropSelect.tsx
  • packages/extension-polkagate/src/components/ExtensionPopup.tsx
  • packages/extension-polkagate/src/components/FadeOnScroll.tsx
  • packages/extension-polkagate/src/components/FadeOnScrollHorizontal.tsx
  • packages/extension-polkagate/src/components/FlyingLogo.tsx
  • packages/extension-polkagate/src/components/GlowCheck.tsx
  • packages/extension-polkagate/src/components/GlowCheckbox.tsx
  • packages/extension-polkagate/src/components/GradientButton.tsx
  • packages/extension-polkagate/src/components/GradientSwitch.tsx
  • packages/extension-polkagate/src/components/HasProxyOnHubIndicator.tsx
  • packages/extension-polkagate/src/components/HomeAccountDropDown.tsx
  • packages/extension-polkagate/src/components/Identity.tsx
  • packages/extension-polkagate/src/components/InputFile.tsx
  • packages/extension-polkagate/src/components/MySkeleton.tsx
  • packages/extension-polkagate/src/components/MySnackbar.tsx
  • packages/extension-polkagate/src/components/MySwitch.tsx
  • packages/extension-polkagate/src/components/MyTextField.tsx
  • packages/extension-polkagate/src/components/MyTooltip.tsx
  • packages/extension-polkagate/src/components/PasswordInput.tsx
  • packages/extension-polkagate/src/components/Radio.tsx
  • packages/extension-polkagate/src/components/Recoverability.tsx
  • packages/extension-polkagate/src/components/SVG/CustomCloseSquare.tsx
  • packages/extension-polkagate/src/components/ScrollingTextBox.tsx
  • packages/extension-polkagate/src/components/SearchField.tsx
  • packages/extension-polkagate/src/components/SignUsingProxy.tsx
  • packages/extension-polkagate/src/components/Tooltip.tsx
  • packages/extension-polkagate/src/components/View.tsx
  • packages/extension-polkagate/src/components/chooseTheme.ts
  • packages/extension-polkagate/src/fullscreen/accountDetails/LeftColumn.tsx
  • packages/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks.tsx
  • packages/extension-polkagate/src/fullscreen/accountDetails/rightColumn/ActionButtons.tsx
  • packages/extension-polkagate/src/fullscreen/accountDetails/rightColumn/Receive.tsx
  • packages/extension-polkagate/src/fullscreen/accountDetails/rightColumn/TokenInfo.tsx
  • packages/extension-polkagate/src/fullscreen/accountDetails/rightColumn/TokenSummary.tsx
  • packages/extension-polkagate/src/fullscreen/components/Account.tsx
  • packages/extension-polkagate/src/fullscreen/components/AccountChainSelect.tsx
  • packages/extension-polkagate/src/fullscreen/components/AccountListModal.tsx
  • packages/extension-polkagate/src/fullscreen/components/AccountProfileLabel.tsx
  • packages/extension-polkagate/src/fullscreen/components/AccountRowSimple.tsx
  • packages/extension-polkagate/src/fullscreen/components/ChainListModal.tsx
  • packages/extension-polkagate/src/fullscreen/components/ChainPickerList.tsx
  • packages/extension-polkagate/src/fullscreen/components/DraggableModal.tsx
  • packages/extension-polkagate/src/fullscreen/components/EmptyListBox.tsx
  • packages/extension-polkagate/src/fullscreen/components/layout/CurrencySelection.tsx
  • packages/extension-polkagate/src/fullscreen/components/layout/HideNumbers.tsx
  • packages/extension-polkagate/src/fullscreen/components/layout/InternetConnection.tsx
  • packages/extension-polkagate/src/fullscreen/components/layout/Language.tsx
  • packages/extension-polkagate/src/fullscreen/components/layout/LogoWithText.tsx
  • packages/extension-polkagate/src/fullscreen/components/layout/MainMenuColumn.tsx
  • packages/extension-polkagate/src/fullscreen/components/layout/MenuButton.tsx
  • packages/extension-polkagate/src/fullscreen/components/layout/Notifications.tsx
  • packages/extension-polkagate/src/fullscreen/components/layout/ThemeToggle.tsx
  • packages/extension-polkagate/src/fullscreen/components/layout/index.tsx
  • packages/extension-polkagate/src/fullscreen/haveWallet/CreationButton.tsx
  • packages/extension-polkagate/src/fullscreen/history/HistoryBox.tsx
  • packages/extension-polkagate/src/fullscreen/history/HistoryFilterRow.tsx
  • packages/extension-polkagate/src/fullscreen/history/HistoryIcon.tsx
  • packages/extension-polkagate/src/fullscreen/history/HistoryItem.tsx
  • packages/extension-polkagate/src/fullscreen/history/MyPagination.tsx
  • packages/extension-polkagate/src/fullscreen/history/PaginationRow.tsx
  • packages/extension-polkagate/src/fullscreen/history/StatusDropDown.tsx
  • packages/extension-polkagate/src/fullscreen/history/loading/HistoryRow.tsx
  • packages/extension-polkagate/src/fullscreen/home/AccountDropDown.tsx
  • packages/extension-polkagate/src/fullscreen/home/AccountList.tsx
  • packages/extension-polkagate/src/fullscreen/home/AccountsAdd.tsx
  • packages/extension-polkagate/src/fullscreen/home/DeriveAccount/StepsRow.tsx
  • packages/extension-polkagate/src/fullscreen/home/ExportAllAccounts.tsx
  • packages/extension-polkagate/src/fullscreen/home/HideNumberShapes.tsx
  • packages/extension-polkagate/src/fullscreen/home/ProfileTabsFS.tsx
  • packages/extension-polkagate/src/fullscreen/home/assetBars/AssetsRows.tsx
  • packages/extension-polkagate/src/fullscreen/home/assetBars/PortfolioBar.tsx
  • packages/extension-polkagate/src/fullscreen/home/trendingAssets/Asset.tsx
  • packages/extension-polkagate/src/fullscreen/home/trendingAssets/Move.tsx
  • packages/extension-polkagate/src/fullscreen/home/trendingAssets/index.tsx
  • packages/extension-polkagate/src/fullscreen/home/useProfileInfo.tsx
  • packages/extension-polkagate/src/fullscreen/manageProxies/AddProxy.tsx
  • packages/extension-polkagate/src/fullscreen/manageProxies/Manage.tsx
  • packages/extension-polkagate/src/fullscreen/manageProxies/Review.tsx
  • packages/extension-polkagate/src/fullscreen/manageProxies/TransactionFlow.tsx
  • packages/extension-polkagate/src/fullscreen/manageProxies/components/DisplayValue.tsx
  • packages/extension-polkagate/src/fullscreen/manageProxies/components/LoadingProxies.tsx
  • packages/extension-polkagate/src/fullscreen/manageProxies/components/ProxyAccountInfo.tsx
  • packages/extension-polkagate/src/fullscreen/manageProxies/index.tsx
  • packages/extension-polkagate/src/fullscreen/nft/components/AudioPlayer.tsx
  • packages/extension-polkagate/src/fullscreen/nft/components/NftFilter.tsx
  • packages/extension-polkagate/src/fullscreen/nft/components/NftPopup.tsx
  • packages/extension-polkagate/src/fullscreen/notification/NotificationSettingsFS.tsx
  • packages/extension-polkagate/src/fullscreen/notification/index.tsx
  • packages/extension-polkagate/src/fullscreen/onboarding/OnboardingLayout.tsx
  • packages/extension-polkagate/src/fullscreen/onboarding/TopRightIcons.tsx
  • packages/extension-polkagate/src/fullscreen/sendFund/Step1Sender.tsx
  • packages/extension-polkagate/src/fullscreen/sendFund/Step2Recipient.tsx
  • packages/extension-polkagate/src/fullscreen/sendFund/Step3Amount.tsx
  • packages/extension-polkagate/src/fullscreen/sendFund/Step4Summary.tsx
  • packages/extension-polkagate/src/fullscreen/sendFund/index.tsx
  • packages/extension-polkagate/src/fullscreen/sendFund/partials/CustomizedDropDown.tsx
  • packages/extension-polkagate/src/fullscreen/sendFund/partials/FromToBox.tsx
  • packages/extension-polkagate/src/fullscreen/sendFund/partials/NumberedTitle.tsx
  • packages/extension-polkagate/src/fullscreen/sendFund/partials/OpenerButton.tsx
  • packages/extension-polkagate/src/fullscreen/sendFund/partials/RecipientAddress.tsx
  • packages/extension-polkagate/src/fullscreen/sendFund/partials/SelectToken.tsx
  • packages/extension-polkagate/src/fullscreen/sendFund/partials/SelectYourAccount.tsx
  • packages/extension-polkagate/src/fullscreen/sendFund/partials/SelectYourChain.tsx
  • packages/extension-polkagate/src/fullscreen/sendFund/partials/StepsRow.tsx
  • packages/extension-polkagate/src/fullscreen/settings/AccountSettings.tsx
  • packages/extension-polkagate/src/fullscreen/settings/AddNewNetwork/GetPriceId.tsx
  • packages/extension-polkagate/src/fullscreen/settings/AddNewNetwork/ShowChainInfo.tsx
  • packages/extension-polkagate/src/fullscreen/settings/NetworkSettings.tsx
  • packages/extension-polkagate/src/fullscreen/settings/addressBook/partials/ContactsList.tsx
  • packages/extension-polkagate/src/fullscreen/settings/addressBook/quickAddContact/AddContactPopper.tsx
  • packages/extension-polkagate/src/fullscreen/settings/addressBook/quickAddContact/AddToAddressBook.tsx
  • packages/extension-polkagate/src/fullscreen/settings/importProxied/partials/ProxiedModalContent.tsx
  • packages/extension-polkagate/src/fullscreen/settings/partials/AccountIcon.tsx
  • packages/extension-polkagate/src/fullscreen/settings/partials/Appearance.tsx
  • packages/extension-polkagate/src/fullscreen/settings/partials/DappRequests.tsx
  • packages/extension-polkagate/src/fullscreen/settings/partials/Endpoints.tsx
  • packages/extension-polkagate/src/fullscreen/settings/partials/Language.tsx
  • packages/extension-polkagate/src/fullscreen/settings/partials/Password.tsx
  • packages/extension-polkagate/src/fullscreen/stake/Rewards.tsx
  • packages/extension-polkagate/src/fullscreen/stake/RewardsLoading.tsx
  • packages/extension-polkagate/src/fullscreen/stake/ToBeReleased.tsx
  • packages/extension-polkagate/src/fullscreen/stake/easyStake/InputPage.tsx
  • packages/extension-polkagate/src/fullscreen/stake/easyStake/StakingTypeSelection/LoadingPoolInformation.tsx
  • packages/extension-polkagate/src/fullscreen/stake/easyStake/StakingTypeSelection/SelectedPoolInformation.tsx
  • packages/extension-polkagate/src/fullscreen/stake/easyStake/StakingTypeSelection/SelectedValidatorsInformation.tsx
  • packages/extension-polkagate/src/fullscreen/stake/easyStake/StakingTypeSelection/StakingTypeItem.tsx
  • packages/extension-polkagate/src/fullscreen/stake/easyStake/StakingTypeSelection/index.tsx
  • packages/extension-polkagate/src/fullscreen/stake/easyStake/partials/EasyStakeReviewHeader.tsx
  • packages/extension-polkagate/src/fullscreen/stake/easyStake/partials/PoolItem.tsx
  • packages/extension-polkagate/src/fullscreen/stake/easyStake/partials/ValidatorItem.tsx
  • packages/extension-polkagate/src/fullscreen/stake/new-pool/Info.tsx
  • packages/extension-polkagate/src/fullscreen/stake/new-pool/claimReward/partials/RestakeRewardToggler.tsx
  • packages/extension-polkagate/src/fullscreen/stake/new-pool/claimReward/partials/Review.tsx
  • packages/extension-polkagate/src/fullscreen/stake/new-pool/joinPool/PoolDetail.tsx
  • packages/extension-polkagate/src/fullscreen/stake/new-pool/nominations/Nominations.tsx
  • packages/extension-polkagate/src/fullscreen/stake/new-solo/ValidatorDetails/Nominators.tsx
  • packages/extension-polkagate/src/fullscreen/stake/new-solo/components/RewardConfigureButton.tsx
  • packages/extension-polkagate/src/fullscreen/stake/new-solo/nominations/Nominations.tsx
  • packages/extension-polkagate/src/fullscreen/stake/new-solo/nominations/ValidatorItem.tsx
  • packages/extension-polkagate/src/fullscreen/stake/new-solo/nominations/partials/Curve.tsx
  • packages/extension-polkagate/src/fullscreen/stake/new-solo/nominations/partials/LabelBar.tsx
  • packages/extension-polkagate/src/fullscreen/stake/new-solo/nominations/partials/Line.tsx
  • packages/extension-polkagate/src/fullscreen/stake/new-solo/pendingReward/RewardsTable.tsx
  • packages/extension-polkagate/src/fullscreen/stake/new-solo/pendingReward/index.tsx
  • packages/extension-polkagate/src/fullscreen/stake/partials/InfoBox.tsx
  • packages/extension-polkagate/src/fullscreen/stake/partials/StakingPortfolioAndTiles.tsx
  • packages/extension-polkagate/src/fullscreen/stake/partials/StakingTabs.tsx
  • packages/extension-polkagate/src/fullscreen/stake/partials/ValidatorInformationFS.tsx
  • packages/extension-polkagate/src/fullscreen/stake/stakingPositions/EarningItem.tsx
  • packages/extension-polkagate/src/fullscreen/stake/stakingPositions/PositionItem.tsx
  • packages/extension-polkagate/src/fullscreen/stake/stakingPositions/PositionsToolbar.tsx
  • packages/extension-polkagate/src/hooks/useStakingRewardsChart.ts
  • packages/extension-polkagate/src/partials/Alert.tsx
  • packages/extension-polkagate/src/partials/Confirmation.tsx
  • packages/extension-polkagate/src/partials/ConnectedAccounts.tsx
  • packages/extension-polkagate/src/partials/DappInfo.tsx
  • packages/extension-polkagate/src/partials/FullscreenModeButton.tsx
  • packages/extension-polkagate/src/partials/NothingFound.tsx
  • packages/extension-polkagate/src/partials/RemoveAccount.tsx
  • packages/extension-polkagate/src/partials/Review.tsx
  • packages/extension-polkagate/src/partials/SelectLanguage.tsx
  • packages/extension-polkagate/src/partials/WaitScreen.tsx
  • packages/extension-polkagate/src/partials/WebsitesAccess.tsx
  • packages/extension-polkagate/src/partials/WelcomeHeader.tsx
  • packages/extension-polkagate/src/popup/accountsLists/AccountRowSimple.tsx
  • packages/extension-polkagate/src/popup/accountsLists/BodySection.tsx
  • packages/extension-polkagate/src/popup/accountsLists/ConfirmationOfAction.tsx
  • packages/extension-polkagate/src/popup/accountsLists/EditProfile.tsx
  • packages/extension-polkagate/src/popup/accountsLists/NewProfile.tsx
  • packages/extension-polkagate/src/popup/accountsLists/ProfileAccountSelection.tsx
  • packages/extension-polkagate/src/popup/accountsLists/ProfileActionButton.tsx
  • packages/extension-polkagate/src/popup/accountsLists/ProfilesDropDown.tsx
  • packages/extension-polkagate/src/popup/history/newDesign/HistoryBox.tsx
  • packages/extension-polkagate/src/popup/history/newDesign/HistoryDetail.tsx
  • packages/extension-polkagate/src/popup/history/newDesign/HistoryItem.tsx
  • packages/extension-polkagate/src/popup/history/newDesign/HistoryTabs.tsx
  • packages/extension-polkagate/src/popup/history/partials/FailSuccessIcon.tsx
  • packages/extension-polkagate/src/popup/home/ChangeLog.tsx
  • packages/extension-polkagate/src/popup/home/index.tsx
  • packages/extension-polkagate/src/popup/home/partial/AccountSelection.tsx
  • packages/extension-polkagate/src/popup/home/partial/AssetLoading.tsx
  • packages/extension-polkagate/src/popup/home/partial/AssetTabs.tsx
  • packages/extension-polkagate/src/popup/home/partial/Currency.tsx
  • packages/extension-polkagate/src/popup/home/partial/DailyChange.tsx
  • packages/extension-polkagate/src/popup/home/partial/NFTBox.tsx
  • packages/extension-polkagate/src/popup/home/partial/NFTItem.tsx
  • packages/extension-polkagate/src/popup/home/partial/Portfolio.tsx
  • packages/extension-polkagate/src/popup/home/partial/SelectCurrency.tsx
  • packages/extension-polkagate/src/popup/home/partial/TokensAssetsBox.tsx
  • packages/extension-polkagate/src/popup/import/addWatchOnlyFullScreen/QrScanner.tsx
  • packages/extension-polkagate/src/popup/import/attachQrFullScreen/index.tsx
  • packages/extension-polkagate/src/popup/import/importLedger/generic/ModeSwitch.tsx
  • packages/extension-polkagate/src/popup/import/importLedger/generic/index.tsx
  • packages/extension-polkagate/src/popup/import/importLedger/legacy/index.tsx
  • packages/extension-polkagate/src/popup/import/importLedger/migration/index.tsx
  • packages/extension-polkagate/src/popup/import/importLedger/partials/LedgerOption.tsx
  • packages/extension-polkagate/src/popup/import/importLedger/partials/LedgerOptions.tsx
  • packages/extension-polkagate/src/popup/import/importLedger/partials/ManualLedgerImport.tsx
  • packages/extension-polkagate/src/popup/import/importLedger/partials/Step.tsx
  • packages/extension-polkagate/src/popup/import/importSeedFullScreen/MyPhraseArea.tsx
  • packages/extension-polkagate/src/popup/import/importSeedFullScreen/index.tsx
  • packages/extension-polkagate/src/popup/import/restoreJSONFullScreen/index.tsx
  • packages/extension-polkagate/src/popup/metadata/Request.tsx
  • packages/extension-polkagate/src/popup/newAccount/createAccountFullScreen/ModeSwitch.tsx
  • packages/extension-polkagate/src/popup/newAccount/createAccountFullScreen/components/IllustrateSeed.tsx
  • packages/extension-polkagate/src/popup/nft/About.tsx
  • packages/extension-polkagate/src/popup/nft/Details.tsx
  • packages/extension-polkagate/src/popup/nft/NftTabs.tsx
  • packages/extension-polkagate/src/popup/nft/Traits.tsx
  • packages/extension-polkagate/src/popup/notification/NotificationSettings.tsx
  • packages/extension-polkagate/src/popup/notification/partials/NotificationGroup.tsx
  • packages/extension-polkagate/src/popup/notification/partials/Partial.tsx
  • packages/extension-polkagate/src/popup/passwordManagement/Header.tsx
  • packages/extension-polkagate/src/popup/receive/Receive.tsx
  • packages/extension-polkagate/src/popup/settings/accountSettings/Export.tsx
  • packages/extension-polkagate/src/popup/settings/accountSettings/index.tsx
  • packages/extension-polkagate/src/popup/settings/extensionSettings/EndpointRow.tsx
  • packages/extension-polkagate/src/popup/settings/extensionSettings/Endpoints.tsx
  • packages/extension-polkagate/src/popup/settings/extensionSettings/components/DotIndicator.tsx
  • packages/extension-polkagate/src/popup/settings/extensionSettings/partials/Language.tsx
  • packages/extension-polkagate/src/popup/settings/partials/RateUsButton.tsx
  • packages/extension-polkagate/src/popup/settings/partials/SocialIcon.tsx
  • packages/extension-polkagate/src/popup/settings/partials/WarningBox.tsx
  • packages/extension-polkagate/src/popup/settings/partials/actions/Lock.tsx
  • packages/extension-polkagate/src/popup/settings/partials/actions/Reload.tsx
  • packages/extension-polkagate/src/popup/settings/partials/actions/ThemeChange.tsx
  • packages/extension-polkagate/src/popup/signing/Confirm.tsx
  • packages/extension-polkagate/src/popup/signing/ExtrinsicDetail.tsx
  • packages/extension-polkagate/src/popup/signing/Request/Extrinsic.tsx
  • packages/extension-polkagate/src/popup/signing/Request/Qr.tsx
  • packages/extension-polkagate/src/popup/signing/Request/RawData.tsx
  • packages/extension-polkagate/src/popup/signing/Request/SignWithPassword.tsx
  • packages/extension-polkagate/src/popup/signing/Request/requestContent/TransactionSummary/AdjustStakeAmount.tsx
  • packages/extension-polkagate/src/popup/signing/Request/requestContent/TransactionSummary/ConvictionVotingVote.tsx
  • packages/extension-polkagate/src/popup/signing/Request/requestContent/TransactionSummary/NominationPoolsBondExtra.tsx
  • packages/extension-polkagate/src/popup/signing/Request/requestContent/TransactionSummary/Payee.tsx
  • packages/extension-polkagate/src/popup/signing/Request/requestContent/TransactionSummary/Transfer.tsx
  • packages/extension-polkagate/src/popup/signing/Request/requestContent/TransactionSummary/TransferAll.tsx
  • packages/extension-polkagate/src/popup/signing/Request/requestContent/TransactionSummary/index.tsx
  • packages/extension-polkagate/src/popup/signing/Request/requestContent/index.tsx
  • packages/extension-polkagate/src/popup/signing/index.tsx
  • packages/extension-polkagate/src/popup/signing/ledger/LedgerButtons.tsx
  • packages/extension-polkagate/src/popup/staking/EarningOptions.tsx
  • packages/extension-polkagate/src/popup/staking/Reward.tsx
  • packages/extension-polkagate/src/popup/staking/StakingPositions.tsx
  • packages/extension-polkagate/src/popup/staking/components/CheckBox.tsx
  • packages/extension-polkagate/src/popup/staking/components/Radio.tsx
  • packages/extension-polkagate/src/popup/staking/partial/AccountsTable.tsx
  • packages/extension-polkagate/src/popup/staking/partial/AvailableToStake.tsx
  • packages/extension-polkagate/src/popup/staking/partial/FeeValue.tsx
  • packages/extension-polkagate/src/popup/staking/partial/JoinPoolBackButton.tsx
  • packages/extension-polkagate/src/popup/staking/partial/NominationsBackButton.tsx
  • packages/extension-polkagate/src/popup/staking/partial/NominatorsTable.tsx
  • packages/extension-polkagate/src/popup/staking/partial/PoolDetail.tsx
  • packages/extension-polkagate/src/popup/staking/partial/PoolsTable.tsx
  • packages/extension-polkagate/src/popup/staking/partial/PortfolioActionButton.tsx
  • packages/extension-polkagate/src/popup/staking/partial/SortBy.tsx
  • packages/extension-polkagate/src/popup/staking/partial/StakeAmountInput.tsx
  • packages/extension-polkagate/src/popup/staking/partial/StakingActionButton.tsx
  • packages/extension-polkagate/src/popup/staking/partial/StakingInfoTile.tsx
  • packages/extension-polkagate/src/popup/staking/partial/StakingMenu.tsx
  • packages/extension-polkagate/src/popup/staking/partial/StakingPortfolio.tsx
  • packages/extension-polkagate/src/popup/staking/partial/StakingRewardTile.tsx
  • packages/extension-polkagate/src/popup/staking/partial/ToBeReleased.tsx
  • packages/extension-polkagate/src/popup/staking/partial/TokenStakeStatus.tsx
  • packages/extension-polkagate/src/popup/staking/partial/ValidatorDetail.tsx
  • packages/extension-polkagate/src/popup/staking/pool-new/index.tsx
  • packages/extension-polkagate/src/popup/staking/solo-new/nominations/NominationsSetting.tsx
  • packages/extension-polkagate/src/popup/staking/solo-new/settings/ChooseAccount.tsx
  • packages/extension-polkagate/src/popup/staking/solo-new/settings/index.tsx
  • packages/extension-polkagate/src/popup/staking/stakingInfo/InfoRow.tsx
  • packages/extension-polkagate/src/popup/staking/stakingInfo/Title.tsx
  • packages/extension-polkagate/src/popup/staking/stakingInfo/index.tsx
  • packages/extension-polkagate/src/popup/staking/stakingStyles/DetailGradientBox.tsx
  • packages/extension-polkagate/src/popup/tokens/index.tsx
  • packages/extension-polkagate/src/popup/tokens/partial/ReservedLockedPopup.tsx
  • packages/extension-polkagate/src/popup/tokens/partial/TokenDetailBox.tsx

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch lightMode

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@Nick-1979 Nick-1979 added WIP Work In Progress test on testing phase labels May 5, 2026
@qodo-code-review
Copy link
Copy Markdown

Review Summary by Qodo

Implement comprehensive light mode theme support across extension UI

✨ Enhancement

Grey Divider

Walkthroughs

Description
• Implemented comprehensive light mode theme support across the entire extension UI
• Redesigned light theme palette with new color values for all UI elements, including primary,
  secondary, accent colors, and gradients
• Added dynamic theme selection from localStorage with fallback to system preference detection via
  prefers-color-scheme media query
• Updated 70+ components with conditional light/dark mode styling, including staking, history,
  settings, and account management interfaces
• Enhanced theme-aware color variables for backgrounds, borders, text, icons, and shadows throughout
  the application
• Implemented FadeOnScroll and FadeOnScrollHorizontal components with theme-aware gradient
  support
• Added fullscreen view detection and parameter handling for consistent theme application
• Extended ColorContext with setColorMode function for programmatic theme switching
• Added new light mode assets including emptyListLight icon and polkagateVectorBlack logo
• Updated chart components with lighter color shades for light mode visualization
• Applied theme palette tokens consistently across components for maintainability
Diagram
flowchart LR
  A["Light Theme Palette"] --> B["Theme Selection Logic"]
  B --> C["Dynamic Theme Detection"]
  C --> D["System Preference Fallback"]
  B --> E["localStorage Persistence"]
  A --> F["Component Styling Updates"]
  F --> G["70+ UI Components"]
  G --> H["Staking Components"]
  G --> I["History Components"]
  G --> J["Settings Components"]
  G --> K["Account Components"]
  L["Theme Assets"] --> M["Light Mode Icons"]
  L --> N["Light Mode Logos"]
  M --> G
  N --> G
  O["ColorContext Extension"] --> P["setColorMode Function"]
  P --> B
Loading

Grey Divider

File Changes

1. packages/extension-polkagate/src/hooks/useStakingRewardsChart.ts ✨ Enhancement +11/-8

Light mode color adjustments for staking rewards chart

• Added isLightExtension variable to detect light mode in extension popup view
• Updated chart bar colors to use lighter shades when in light mode
• Modified axis tick colors to adapt to light theme
• Updated dependency array to include isLightExtension in memoized hooks

packages/extension-polkagate/src/hooks/useStakingRewardsChart.ts


2. packages/extension-polkagate/src/themes/light.ts ✨ Enhancement +20/-13

Complete light theme palette redesign and configuration

• Completely redesigned light theme palette with new color values for all UI elements
• Updated primary, secondary, and accent colors to lighter, more vibrant shades
• Added gradient definitions for light mode backgrounds
• Modified text, icon, and label colors for better contrast in light theme

packages/extension-polkagate/src/themes/light.ts


3. packages/extension-polkagate/src/components/chooseTheme.ts ✨ Enhancement +9/-12

Enable dynamic theme selection from storage and system preferences

• Implemented theme selection from localStorage using STORAGE_KEY.THEME
• Added fallback to system preference detection via prefers-color-scheme media query
• Removed hardcoded dark theme default

packages/extension-polkagate/src/components/chooseTheme.ts


View more (165)
4. packages/extension-polkagate/src/util/switchToOrOpenTab.ts ✨ Enhancement +3/-1

Add fullscreen view parameter to tab switching logic

• Added logic to append ?view=fullscreen query parameter to extension base URL
• Ensures fullscreen view is maintained when switching tabs

packages/extension-polkagate/src/util/switchToOrOpenTab.ts


5. packages/extension-polkagate/src/assets/icons/index.ts ✨ Enhancement +1/-0

Export light mode empty list icon

• Exported new emptyListLight icon asset for light mode

packages/extension-polkagate/src/assets/icons/index.ts


6. packages/extension-polkagate/src/components/ColorContext.ts ✨ Enhancement +3/-0

Extend ColorContext with theme mode setter function

• Added setColorMode function to ColorContext interface for programmatic theme switching
• Added PaletteMode type import from Material-UI

packages/extension-polkagate/src/components/ColorContext.ts


7. packages/extension-polkagate/src/assets/logos/index.ts ✨ Enhancement +1/-0

Export black variant of Polkagate vector logo

• Exported new polkagateVectorBlack logo asset for light mode

packages/extension-polkagate/src/assets/logos/index.ts


8. packages/extension-polkagate/src/util/constants.ts ✨ Enhancement +1/-0

Add theme storage key constant

• Added THEME key to STORAGE_KEY object for persisting theme preference

packages/extension-polkagate/src/util/constants.ts


9. packages/extension-polkagate/src/util/getLanguageOptions.ts Formatting +1/-1

Capitalize Spanish language option text

• Capitalized Spanish language option text from español to Español

packages/extension-polkagate/src/util/getLanguageOptions.ts


10. packages/extension/public/fullscreen-shell.js ✨ Enhancement +41/-0

New fullscreen shell detection script

• Created new script to detect fullscreen view based on URL parameters, hash paths, and window
 dimensions
• Adds fullscreen-shell class to document root when fullscreen conditions are met
• Handles Chrome extension popup detection

packages/extension/public/fullscreen-shell.js


11. packages/extension/public/index.html ✨ Enhancement +13/-1

Add fullscreen shell styles and script inclusion

• Added fullscreen-shell CSS class styles for light mode background colors
• Included new fullscreen-shell.js script in HTML head
• Reorganized CSS property order for consistency

packages/extension/public/index.html


12. packages/extension-polkagate/src/popup/staking/partial/PoolDetail.tsx ✨ Enhancement +43/-34

Comprehensive light mode styling for pool detail component

• Added light mode color detection and conditional styling throughout component
• Updated background colors, borders, and text colors for light theme compatibility
• Modified icon colors and component backgrounds to adapt to light/dark modes
• Conditionally rendered gradient overlays only in dark mode

packages/extension-polkagate/src/popup/staking/partial/PoolDetail.tsx


13. packages/extension-polkagate/src/popup/staking/partial/StakingInfoTile.tsx ✨ Enhancement +72/-28

Refactor staking info tile with light mode support

• Removed useIsHovered hook dependency and refactored hover state logic
• Added light mode color detection for popup and fullscreen views
• Updated button styling with conditional colors and borders for light theme
• Modified skeleton and background colors based on theme mode

packages/extension-polkagate/src/popup/staking/partial/StakingInfoTile.tsx


14. packages/extension-polkagate/src/fullscreen/stake/Rewards.tsx ✨ Enhancement +113/-17

Add light mode styling to fullscreen rewards component

• Added theme mode detection throughout component
• Updated chevron and container styling with light mode colors and shadows
• Modified chart and reward item backgrounds with conditional styling
• Added light mode specific borders and box shadows

packages/extension-polkagate/src/fullscreen/stake/Rewards.tsx


15. packages/extension-polkagate/src/popup/staking/partial/ValidatorDetail.tsx ✨ Enhancement +37/-16

Add light mode support to validator detail component

• Added theme mode detection for light/dark styling
• Updated background colors, borders, and icon colors for light theme
• Modified dialog backdrop gradient for light mode
• Conditionally rendered gradient overlays based on theme

packages/extension-polkagate/src/popup/staking/partial/ValidatorDetail.tsx


16. packages/extension-polkagate/src/popup/staking/StakingPortfolio.tsx ✨ Enhancement +0/-0

Implement light mode styling for staking portfolio

• Added light mode detection and conditional styling throughout component
• Updated text colors, backgrounds, and borders for light theme
• Modified skeleton colors and button styling based on theme
• Enhanced GlowBox styling with conditional shadows and borders

packages/extension-polkagate/src/popup/staking/StakingPortfolio.tsx


17. packages/extension-polkagate/src/popup/staking/Reward.tsx ✨ Enhancement +24/-18

Add light mode support to staking reward component

• Added light mode color detection for text and UI elements
• Updated collapse and container styling with light theme colors
• Modified borders and shadows for light mode compatibility
• Updated typography colors based on theme mode

packages/extension-polkagate/src/popup/staking/Reward.tsx


18. packages/extension-polkagate/src/popup/staking/partial/StakingRewardTile.tsx ✨ Enhancement +41/-18

Implement light mode styling for staking reward tile

• Added light mode background gradient for ThunderBackground component
• Updated badge gradient colors for light theme
• Modified container styling with conditional colors and shadows
• Updated icon colors based on theme mode

packages/extension-polkagate/src/popup/staking/partial/StakingRewardTile.tsx


19. packages/extension-polkagate/src/popup/history/newDesign/HistoryDetail.tsx ✨ Enhancement +23/-13

Add light mode support to history detail component

• Added theme mode detection for light/dark styling
• Updated status icon backgrounds and borders for light theme
• Modified panel backgrounds and borders based on theme
• Updated dialog backdrop gradient for light mode

packages/extension-polkagate/src/popup/history/newDesign/HistoryDetail.tsx


20. packages/extension-polkagate/src/fullscreen/stake/new-solo/nominations/ValidatorItem.tsx ✨ Enhancement +46/-20

Implement light mode styling for validator item component

• Added theme mode detection and light mode color variables
• Updated background colors and borders for light theme
• Modified badge styling with conditional colors for active/inactive states
• Updated skeleton and button styling based on theme mode

packages/extension-polkagate/src/fullscreen/stake/new-solo/nominations/ValidatorItem.tsx


21. packages/extension-polkagate/src/partials/Review.tsx ✨ Enhancement +46/-10

Light mode theme support for Review component

• Added useTheme() hook and isDark mode detection throughout multiple components
• Implemented conditional styling for light/dark modes with theme-aware colors and backgrounds
• Updated color values to use theme palette tokens where applicable
• Added box shadows and borders for light mode UI elements

packages/extension-polkagate/src/partials/Review.tsx


22. packages/extension-polkagate/src/components/SignUsingProxy.tsx ✨ Enhancement +81/-6

Light mode styling for proxy selection interface

• Added isDark theme mode detection in multiple components
• Implemented light mode styling with conditional backgrounds, borders, and shadows
• Updated FadeOnScroll component with backgroundColor prop for theme support
• Enhanced visual hierarchy with theme-aware color adjustments

packages/extension-polkagate/src/components/SignUsingProxy.tsx


23. packages/extension-polkagate/src/partials/WebsitesAccess.tsx ✨ Enhancement +17/-13

Light mode support for website access management

• Added useTheme() hook and imported emptyListLight icon asset
• Implemented conditional rendering of empty state images based on theme mode
• Updated text colors to use theme palette tokens for consistency
• Added light mode styling with borders and adjusted color values

packages/extension-polkagate/src/partials/WebsitesAccess.tsx


24. packages/extension-polkagate/src/fullscreen/home/ProfileTabsFS.tsx ✨ Enhancement +32/-11

Light mode styling for profile tabs interface

• Added useTheme() hook and isDark detection for theme-aware styling
• Implemented gradient backgrounds that adapt to light/dark modes
• Created reusable arrowFadeSx style object for arrow fade effects
• Updated icon and text colors to use theme palette tokens

packages/extension-polkagate/src/fullscreen/home/ProfileTabsFS.tsx


25. packages/extension-polkagate/src/fullscreen/sendFund/Step3Amount.tsx ✨ Enhancement +24/-16

Light mode styling for send fund amount input

• Added useTheme() hook and isDark mode detection
• Created amountShortcutButtonStyle memoized object for consistent button styling
• Implemented light mode styling with conditional borders, shadows, and backgrounds
• Updated gradient dividers to adapt to theme mode

packages/extension-polkagate/src/fullscreen/sendFund/Step3Amount.tsx


26. packages/extension-polkagate/src/fullscreen/history/HistoryItem.tsx ✨ Enhancement +25/-11

Light mode support for history item display

• Added isDark theme detection and created theme-aware color variables
• Implemented light mode styling with conditional backgrounds, borders, and shadows
• Updated text and icon colors to use theme palette tokens
• Enhanced visual consistency with theme-aware styling throughout

packages/extension-polkagate/src/fullscreen/history/HistoryItem.tsx


27. packages/extension-polkagate/src/fullscreen/components/AccountListModal.tsx ✨ Enhancement +35/-9

Light mode styling for account selection modal

• Added useTheme() hook and theme-aware styling for modal backgrounds
• Implemented conditional styling for VelvetBox and account list containers
• Updated NothingFound component with light mode animation filter
• Enhanced layout flexibility with conditional height calculations

packages/extension-polkagate/src/fullscreen/components/AccountListModal.tsx


28. packages/extension-polkagate/src/partials/Confirmation.tsx ✨ Enhancement +65/-6

Light mode support for transaction confirmation display

• Added useTheme() hook and isDark detection throughout components
• Implemented light mode styling for cards, backgrounds, and borders
• Updated GlowBox component with noGlowBall prop for light mode
• Enhanced visual hierarchy with theme-aware shadows and colors

packages/extension-polkagate/src/partials/Confirmation.tsx


29. packages/extension-polkagate/src/fullscreen/components/Account.tsx ✨ Enhancement +11/-9

Light mode styling for account display component

• Added useTheme() hook and isDark detection for theme-aware styling
• Updated border colors and shadows to adapt to light/dark modes
• Implemented conditional styling for logo containers and text colors
• Enhanced visual consistency with theme palette tokens

packages/extension-polkagate/src/fullscreen/components/Account.tsx


30. packages/extension-polkagate/src/popup/staking/partial/StakeAmountInput.tsx ✨ Enhancement +33/-21

Light mode styling for stake amount input component

• Added isLight theme mode detection in styled components
• Updated StyledButton and StyledTextField with light mode styling
• Implemented conditional backgrounds, borders, and shadows for light mode
• Enhanced visual hierarchy with theme-aware color adjustments

packages/extension-polkagate/src/popup/staking/partial/StakeAmountInput.tsx


31. packages/extension-polkagate/src/components/DetailPanel.tsx ✨ Enhancement +17/-9

Light mode support for detail panel modal

• Added useTheme() hook and isDark detection for theme-aware styling
• Implemented conditional modal backgrounds and borders based on theme
• Updated gradient dividers to adapt to light/dark modes
• Enhanced visual consistency with theme-aware shadows and colors

packages/extension-polkagate/src/components/DetailPanel.tsx


32. packages/extension-polkagate/src/popup/receive/Receive.tsx ✨ Enhancement +14/-8

Light mode styling for receive address interface

• Added useTheme() and useIsDark() hooks for theme detection
• Updated ListItem styled component with light mode hover styling
• Implemented conditional backgrounds and borders for light mode
• Enhanced modal backdrop with theme-aware gradient

packages/extension-polkagate/src/popup/receive/Receive.tsx


33. packages/extension-polkagate/src/components/ExtensionPopup.tsx ✨ Enhancement +13/-5

Light mode support for extension popup component

• Added useIsDark() hook and created theme-aware styling variables
• Implemented conditional modal backgrounds and borders for light mode
• Updated navigation text colors to use theme palette tokens
• Enhanced backdrop gradient to adapt to light/dark modes

packages/extension-polkagate/src/components/ExtensionPopup.tsx


34. packages/extension-polkagate/src/partials/ConnectedAccounts.tsx ✨ Enhancement +46/-18

Light mode styling for connected accounts interface

• Added useTheme() hook and isDark detection for theme-aware styling
• Implemented light mode styling with conditional backgrounds and borders
• Updated account list container with theme-aware colors and shadows
• Enhanced visual hierarchy with theme palette tokens

packages/extension-polkagate/src/partials/ConnectedAccounts.tsx


35. packages/extension-polkagate/src/popup/accountsLists/ProfilesDropDown.tsx ✨ Enhancement +14/-11

Light mode support for profiles dropdown menu

• Added useTheme() and useIsDark() hooks for theme detection
• Updated DropContentContainer styled component with light mode styling
• Implemented conditional backgrounds and borders in Tab component
• Enhanced visual consistency with theme palette tokens

packages/extension-polkagate/src/popup/accountsLists/ProfilesDropDown.tsx


36. packages/extension-polkagate/src/fullscreen/manageProxies/components/ProxyAccountInfo.tsx ✨ Enhancement +25/-12

Light mode styling for proxy account information display

• Added useTheme() hook and isDark detection for theme-aware styling
• Created theme-aware color variables for backgrounds, text, and accents
• Implemented light mode styling with conditional backgrounds and borders
• Enhanced visual consistency with theme palette tokens

packages/extension-polkagate/src/fullscreen/manageProxies/components/ProxyAccountInfo.tsx


37. packages/extension-polkagate/src/components/InputFile.tsx ✨ Enhancement +14/-8

Light mode support for file input component

• Added theme-aware color variables for light/dark mode styling
• Implemented conditional styling for file info card and drop zone
• Updated icon and text colors to adapt to theme mode
• Enhanced visual consistency with theme palette tokens

packages/extension-polkagate/src/components/InputFile.tsx


38. packages/extension-polkagate/src/components/DropContent.tsx ✨ Enhancement +15/-10

Light mode styling for dropdown content component

• Added useTheme() hook for theme-aware styling in styled components
• Updated DropContentContainer with light mode backgrounds and borders
• Implemented conditional hover states based on theme mode
• Enhanced visual consistency with theme palette tokens

packages/extension-polkagate/src/components/DropContent.tsx


39. packages/extension-polkagate/src/components/FadeOnScroll.tsx ✨ Enhancement +76/-7

Enhanced fade-on-scroll with theme-aware color support

• Added backgroundColor prop to support custom fade colors
• Implemented helper functions toTransparent() and toAlpha() for color manipulation
• Updated Fader styled component with theme-aware gradient calculations
• Enhanced fade effect to adapt to light/dark modes and custom backgrounds

packages/extension-polkagate/src/components/FadeOnScroll.tsx


40. packages/extension-polkagate/src/fullscreen/accountDetails/rightColumn/TokenSummary.tsx ✨ Enhancement +4/-2

Light mode styling for token summary display

• Added theme-aware color variables for muted amounts and logo borders
• Implemented conditional styling based on theme mode
• Updated border colors to adapt to light/dark modes
• Enhanced visual consistency with theme palette tokens

packages/extension-polkagate/src/fullscreen/accountDetails/rightColumn/TokenSummary.tsx


41. packages/extension-polkagate/src/fullscreen/stake/stakingPositions/EarningItem.tsx ✨ Enhancement +19/-11

Light mode support for earning item component

• Added useTheme hook to access theme palette for light/dark mode detection
• Updated color values to conditionally use dark mode colors or light mode alternatives
• Modified YieldBadge, StakeButton, and main component to apply theme-aware styling
• Updated background colors, text colors, and border colors based on theme.palette.mode

packages/extension-polkagate/src/fullscreen/stake/stakingPositions/EarningItem.tsx


42. packages/extension-polkagate/src/fullscreen/stake/partials/ValidatorInformationFS.tsx ✨ Enhancement +12/-5

Light mode styling for validator information components

• Added isDark variable to detect dark mode from theme palette
• Updated component backgrounds from dark-only colors to conditional light/dark values
• Modified text colors and borders to use theme-aware styling
• Added light mode gradient for divider elements

packages/extension-polkagate/src/fullscreen/stake/partials/ValidatorInformationFS.tsx


43. packages/extension-polkagate/src/fullscreen/stake/easyStake/InputPage.tsx ✨ Enhancement +19/-9

Light mode colors for staking input page components

• Added theme detection and color variables for light/dark modes
• Created variables for success colors, card backgrounds, borders, and shadows
• Updated StakingTypeOptionBox and EstimatedRate components with conditional styling
• Applied light mode colors to buttons, text, and container elements

packages/extension-polkagate/src/fullscreen/stake/easyStake/InputPage.tsx


44. packages/extension-polkagate/src/fullscreen/home/HideNumberShapes.tsx ✨ Enhancement +63/-9

Light mode support for hide number shape animations

• Added useIsDark hook to detect dark mode
• Created separate rendering functions for dark and light mode shapes
• Updated background colors and filter effects based on theme mode
• Added light mode specific block colors and layout adjustments

packages/extension-polkagate/src/fullscreen/home/HideNumberShapes.tsx


45. packages/extension-polkagate/src/components/FadeOnScrollHorizontal.tsx ✨ Enhancement +78/-6

Light mode gradient support for horizontal fade component

• Added utility functions toTransparent and toAlpha for color manipulation
• Updated Fader styled component to support light mode gradients
• Added isDark prop to control fade gradient appearance
• Modified backdrop filter and gradient calculations for theme-aware rendering

packages/extension-polkagate/src/components/FadeOnScrollHorizontal.tsx


46. packages/extension-polkagate/src/components/MySnackbar.tsx ✨ Enhancement +28/-6

Light mode styling for snackbar notifications

• Added theme-aware color variables for snackbar backgrounds, borders, and text
• Updated gradient backgrounds to differ between light and dark modes
• Modified progress bar colors and text colors based on isDark flag
• Applied conditional styling for error and success states

packages/extension-polkagate/src/components/MySnackbar.tsx


47. packages/extension-polkagate/src/popup/settings/accountSettings/Export.tsx ✨ Enhancement +31/-8

Light mode styling for account export dialog

• Added useTheme hook and isDark detection
• Updated text color from hardcoded value to text.secondary
• Modified input field styling with conditional backgrounds and borders
• Updated GradientBox2 component with light mode support
• Added custom icon color for export button based on theme

packages/extension-polkagate/src/popup/settings/accountSettings/Export.tsx


48. packages/extension-polkagate/src/components/AddressInput.tsx ✨ Enhancement +8/-7

Light mode support for address input component

• Added isDark detection from theme palette
• Updated default action color to be theme-aware
• Modified input adornment background and border colors
• Updated label and input field styling for light mode
• Applied conditional styling to hashtag icon color

packages/extension-polkagate/src/components/AddressInput.tsx


49. packages/extension-polkagate/src/fullscreen/manageProxies/Review.tsx ✨ Enhancement +16/-5

Light mode styling for proxy review component

• Added theme detection and color variables for light/dark modes
• Updated panel backgrounds, borders, and shadows based on theme
• Modified divider gradients for light mode appearance
• Added genesisHash prop to DisplayValue components
• Applied conditional styling to text colors and borders

packages/extension-polkagate/src/fullscreen/manageProxies/Review.tsx


50. packages/extension-polkagate/src/fullscreen/home/assetBars/AssetsRows.tsx ✨ Enhancement +12/-10

Light mode styling for asset rows component

• Added useTheme hook and isDark detection
• Updated BorderLinearProgress background color for light mode
• Modified row backgrounds and borders to be theme-aware
• Changed text colors from hardcoded to text.secondary palette
• Updated decimalColor prop to use theme palette

packages/extension-polkagate/src/fullscreen/home/assetBars/AssetsRows.tsx


51. packages/extension-polkagate/src/components/DropSelect.tsx ✨ Enhancement +34/-18

Light mode support for dropdown select component

• Refactored DropSelectContainer styled component to support light mode
• Added theme-aware hover and focus states
• Updated border colors and backgrounds based on isDark flag
• Modified icon color to use theme palette
• Removed useIsDark hook in favor of theme palette mode

packages/extension-polkagate/src/components/DropSelect.tsx


52. packages/extension-polkagate/src/popup/staking/partial/PortfolioActionButton.tsx ✨ Enhancement +60/-18

Light mode styling for portfolio action button

• Added theme detection and light mode color variables
• Updated background gradients for light/dark modes
• Modified text and icon colors based on theme and component state
• Applied conditional styling for disabled and hover states
• Changed icon and text to use CSS currentColor for inheritance

packages/extension-polkagate/src/popup/staking/partial/PortfolioActionButton.tsx


53. packages/extension-polkagate/src/components/GradientSwitch.tsx ✨ Enhancement +11/-8

Light mode support for gradient switch component

• Added useIsDark hook to detect dark mode
• Updated Ball and SwitchContainer styled components with isdark prop
• Modified background colors, gradients, and disabled states for light mode
• Applied theme-aware styling to switch component appearance

packages/extension-polkagate/src/components/GradientSwitch.tsx


54. packages/extension-polkagate/src/popup/accountsLists/BodySection.tsx ✨ Enhancement +12/-5

Light mode styling for accounts list body section

• Added useIsDark hook and theme detection
• Updated BackDrop component with light mode gradient
• Modified profile header background color based on theme
• Updated delete button background color for light mode
• Applied conditional styling to backdrop blur effect

packages/extension-polkagate/src/popup/accountsLists/BodySection.tsx


55. packages/extension-polkagate/src/popup/staking/StakingPositions.tsx ✨ Enhancement +9/-8

Light mode styling for staking positions component

• Updated StakingBadge colors to be theme-aware
• Modified row backgrounds and borders for light mode
• Updated hover states and text colors based on isDark flag
• Changed container background color in VelvetBox
• Applied conditional styling to position rows

packages/extension-polkagate/src/popup/staking/StakingPositions.tsx


56. packages/extension-polkagate/src/popup/staking/EarningOptions.tsx ✨ Enhancement +11/-8

Light mode support for earning options component

• Added success color variables for light/dark modes
• Updated container backgrounds and borders based on theme
• Modified row styling with conditional colors
• Applied light mode styling to earning items display
• Updated text colors and badge styling

packages/extension-polkagate/src/popup/staking/EarningOptions.tsx


57. packages/extension-polkagate/src/popup/staking/solo-new/nominations/NominationsSetting.tsx ✨ Enhancement +32/-22

Light mode styling for nominations setting component

• Added theme detection to DoubleSkeleton and UndefinedItem components
• Updated skeleton background colors for light mode
• Modified container styling with conditional borders and shadows
• Applied theme-aware styling to divider opacity

packages/extension-polkagate/src/popup/staking/solo-new/nominations/NominationsSetting.tsx


58. packages/extension-polkagate/src/fullscreen/stake/stakingPositions/PositionsToolbar.tsx ✨ Enhancement +13/-8

Light mode styling for positions toolbar component

• Added isDark detection to TabItem component
• Updated tab color logic for light/dark modes
• Modified badge background colors based on theme
• Updated PositionsExplore container styling for light mode
• Applied conditional styling to dropdown option icons

packages/extension-polkagate/src/fullscreen/stake/stakingPositions/PositionsToolbar.tsx


59. packages/extension-polkagate/src/popup/accountsLists/AccountRowSimple.tsx ✨ Enhancement +11/-5

Light mode support for account row simple component

• Added useIsDark hook and theme detection
• Updated row background color based on theme
• Modified text color to use theme palette
• Applied conditional styling to drag indicator icon
• Updated identity styling with theme-aware colors

packages/extension-polkagate/src/popup/accountsLists/AccountRowSimple.tsx


60. packages/extension-polkagate/src/fullscreen/settings/AddNewNetwork/ShowChainInfo.tsx ✨ Enhancement +11/-5

Light mode styling for show chain info component

• Added theme detection and color variables for light/dark modes
• Updated label colors to use theme palette
• Modified info strip background and border styling
• Applied conditional styling to hash field appearance

packages/extension-polkagate/src/fullscreen/settings/AddNewNetwork/ShowChainInfo.tsx


61. packages/extension-polkagate/src/fullscreen/settings/AccountSettings.tsx ✨ Enhancement +13/-7

Light mode support for account settings component

• Added theme detection and isDark flag
• Updated ActionBox styling with conditional backgrounds and borders
• Modified icon colors based on theme
• Applied light mode styling to remove account action
• Updated hover states for light mode

packages/extension-polkagate/src/fullscreen/settings/AccountSettings.tsx


62. packages/extension-polkagate/src/popup/staking/partial/SortBy.tsx ✨ Enhancement +21/-9

Light mode styling for sort by component

• Updated DropContentContainer styled component with theme support
• Added conditional background, border, and shadow styling
• Modified Tab component colors for light/dark modes
• Updated selected and hover state colors based on theme
• Applied theme-aware styling to checkbox icon

packages/extension-polkagate/src/popup/staking/partial/SortBy.tsx


63. packages/extension-polkagate/src/fullscreen/onboarding/OnboardingLayout.tsx ✨ Enhancement +45/-5

Light mode support for onboarding layout component

• Added theme detection and isDark flag
• Updated container and grid backgrounds for light mode
• Modified border and shadow styling based on theme
• Applied conditional styling to privacy link color
• Updated Version component with theme-aware text color

packages/extension-polkagate/src/fullscreen/onboarding/OnboardingLayout.tsx


64. packages/extension-polkagate/src/fullscreen/onboarding/TopRightIcons.tsx ✨ Enhancement +19/-7

Light mode styling for top right icons component

• Added theme detection and isDark flag
• Updated language selector background and border colors
• Modified text and icon colors based on theme
• Applied conditional styling to privacy icon color
• Updated hover states for light mode

packages/extension-polkagate/src/fullscreen/onboarding/TopRightIcons.tsx


65. packages/extension-polkagate/src/popup/import/importLedger/partials/LedgerOptions.tsx ✨ Enhancement +9/-7

Light mode support for ledger options component

• Added theme detection and isDark flag
• Updated text colors to use text.secondary palette
• Modified warning icon and text colors based on theme
• Applied conditional styling to ledger options display

packages/extension-polkagate/src/popup/import/importLedger/partials/LedgerOptions.tsx


66. packages/extension-polkagate/src/popup/tokens/partial/TokenHistory.tsx ✨ Enhancement +11/-6

Light mode styling for token history component

• Added useIsDark hook and theme detection
• Updated filter item icon backgrounds for light mode
• Modified setting button styling with conditional colors and borders
• Applied theme-aware styling to icon backgrounds
• Updated snowflake component background color

packages/extension-polkagate/src/popup/tokens/partial/TokenHistory.tsx


67. packages/extension-polkagate/src/components/ActionCard.tsx ✨ Enhancement +2/-2

Light mode logo support for action card component

• Added import for logoBlackBirdTransparent asset
• Updated logo selection to use light mode version when not in dark mode
• Applied conditional styling to logo display based on theme

packages/extension-polkagate/src/components/ActionCard.tsx


68. addedForPlus.txt Additional files +0/-8

...

addedForPlus.txt


69. packages/extension-polkagate/src/components/AccountVisibilityToggler.tsx Additional files +9/-4

...

packages/extension-polkagate/src/components/AccountVisibilityToggler.tsx


70. packages/extension-polkagate/src/components/ActionButton.tsx Additional files +4/-3

...

packages/extension-polkagate/src/components/ActionButton.tsx


71. packages/extension-polkagate/src/components/Address.tsx Additional files +6/-2

...

packages/extension-polkagate/src/components/Address.tsx


72. packages/extension-polkagate/src/components/Address2.tsx Additional files +5/-3

...

packages/extension-polkagate/src/components/Address2.tsx


73. packages/extension-polkagate/src/components/BackWithLabel.tsx Additional files +8/-2

...

packages/extension-polkagate/src/components/BackWithLabel.tsx


74. packages/extension-polkagate/src/components/DropMenuContent.tsx Additional files +6/-4

...

packages/extension-polkagate/src/components/DropMenuContent.tsx


75. packages/extension-polkagate/src/components/DropMenuRow.tsx Additional files +5/-3

...

packages/extension-polkagate/src/components/DropMenuRow.tsx


76. packages/extension-polkagate/src/components/FlyingLogo.tsx Additional files +1/-1

...

packages/extension-polkagate/src/components/FlyingLogo.tsx


77. packages/extension-polkagate/src/components/GlowCheck.tsx Additional files +5/-2

...

packages/extension-polkagate/src/components/GlowCheck.tsx


78. packages/extension-polkagate/src/components/GlowCheckbox.tsx Additional files +6/-5

...

packages/extension-polkagate/src/components/GlowCheckbox.tsx


79. packages/extension-polkagate/src/components/HasProxyOnHubIndicator.tsx Additional files +4/-3

...

packages/extension-polkagate/src/components/HasProxyOnHubIndicator.tsx


80. packages/extension-polkagate/src/components/HomeAccountDropDown.tsx Additional files +9/-7

...

packages/extension-polkagate/src/components/HomeAccountDropDown.tsx


81. packages/extension-polkagate/src/components/Identity.tsx Additional files +4/-2

...

packages/extension-polkagate/src/components/Identity.tsx


82. packages/extension-polkagate/src/components/MySkeleton.tsx Additional files +3/-2

...

packages/extension-polkagate/src/components/MySkeleton.tsx


83. packages/extension-polkagate/src/components/MyTextField.tsx Additional files +11/-8

...

packages/extension-polkagate/src/components/MyTextField.tsx


84. packages/extension-polkagate/src/components/MyTooltip.tsx Additional files +13/-5

...

packages/extension-polkagate/src/components/MyTooltip.tsx


85. packages/extension-polkagate/src/components/Radio.tsx Additional files +5/-2

...

packages/extension-polkagate/src/components/Radio.tsx


86. packages/extension-polkagate/src/components/SVG/CustomCloseSquare.tsx Additional files +1/-1

...

packages/extension-polkagate/src/components/SVG/CustomCloseSquare.tsx


87. packages/extension-polkagate/src/components/ScrollingTextBox.tsx Additional files +7/-6

...

packages/extension-polkagate/src/components/ScrollingTextBox.tsx


88. packages/extension-polkagate/src/components/SearchField.tsx Additional files +9/-4

...

packages/extension-polkagate/src/components/SearchField.tsx


89. packages/extension-polkagate/src/components/View.tsx Additional files +31/-10

...

packages/extension-polkagate/src/components/View.tsx


90. packages/extension-polkagate/src/fullscreen/accountDetails/LeftColumn.tsx Additional files +8/-3

...

packages/extension-polkagate/src/fullscreen/accountDetails/LeftColumn.tsx


91. packages/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks.tsx Additional files +3/-1

...

packages/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks.tsx


92. packages/extension-polkagate/src/fullscreen/accountDetails/rightColumn/ActionButtons.tsx Additional files +10/-4

...

packages/extension-polkagate/src/fullscreen/accountDetails/rightColumn/ActionButtons.tsx


93. packages/extension-polkagate/src/fullscreen/accountDetails/rightColumn/Receive.tsx Additional files +6/-2

...

packages/extension-polkagate/src/fullscreen/accountDetails/rightColumn/Receive.tsx


94. packages/extension-polkagate/src/fullscreen/accountDetails/rightColumn/TokenInfo.tsx Additional files +3/-2

...

packages/extension-polkagate/src/fullscreen/accountDetails/rightColumn/TokenInfo.tsx


95. packages/extension-polkagate/src/fullscreen/components/AccountChainSelect.tsx Additional files +7/-3

...

packages/extension-polkagate/src/fullscreen/components/AccountChainSelect.tsx


96. packages/extension-polkagate/src/fullscreen/components/AccountProfileLabel.tsx Additional files +9/-6

...

packages/extension-polkagate/src/fullscreen/components/AccountProfileLabel.tsx


97. packages/extension-polkagate/src/fullscreen/components/AccountRowSimple.tsx Additional files +9/-3

...

packages/extension-polkagate/src/fullscreen/components/AccountRowSimple.tsx


98. packages/extension-polkagate/src/fullscreen/components/ChainListModal.tsx Additional files +6/-3

...

packages/extension-polkagate/src/fullscreen/components/ChainListModal.tsx


99. packages/extension-polkagate/src/fullscreen/components/ChainPickerList.tsx Additional files +7/-3

...

packages/extension-polkagate/src/fullscreen/components/ChainPickerList.tsx


100. packages/extension-polkagate/src/fullscreen/components/DraggableModal.tsx Additional files +11/-8

...

packages/extension-polkagate/src/fullscreen/components/DraggableModal.tsx


101. packages/extension-polkagate/src/fullscreen/components/EmptyListBox.tsx Additional files +5/-3

...

packages/extension-polkagate/src/fullscreen/components/EmptyListBox.tsx


102. packages/extension-polkagate/src/...

@qodo-code-review
Copy link
Copy Markdown

qodo-code-review Bot commented May 5, 2026

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📎 Requirement gaps (0)

Grey Divider


Action required

1. Malformed fullscreen URL building ✓ Resolved 🐞 Bug ≡ Correctness
Description
switchToOrOpenTab() appends "?view=fullscreen" via string concatenation, which can generate invalid
URLs when the base URL already contains query parameters or when view=fullscreen is present as a
non-first parameter. This can break opening/switching to fullscreen tabs because tab
matching/navigation relies on exact URL equality.
Code

packages/extension-polkagate/src/util/switchToOrOpenTab.ts[R13-15]

+      const extensionBaseUrl = extensionUrl.split('#')[0].includes('?view=fullscreen')
+        ? extensionUrl.split('#')[0]
+        : `${extensionUrl.split('#')[0]}?view=fullscreen`;
Evidence
switchToOrOpenTab() constructs extensionBaseUrl by checking only for the literal substring
"?view=fullscreen" and otherwise appending "?view=fullscreen" to the existing base URL, which is
incorrect when any other query string exists (should use '&') and also fails to detect an
already-present "view=fullscreen" when it's not the first query param. fullscreen-shell.js then keys
off the presence of "view=fullscreen" in the query string, so malformed query strings can also
affect fullscreen-shell detection.

packages/extension-polkagate/src/util/switchToOrOpenTab.ts[9-18]
packages/extension/public/fullscreen-shell.js[35-40]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`switchToOrOpenTab()` builds the fullscreen URL by string concatenation, which can create malformed URLs when the current extension URL already contains query params (or contains `view=fullscreen` as a later param).
### Issue Context
Fullscreen-shell detection uses `search.includes('view=fullscreen')`, and tab matching uses exact `tab.url === tabUrl`, so URL correctness matters.
### Fix Focus Areas
- packages/extension-polkagate/src/util/switchToOrOpenTab.ts[10-18]
### Suggested fix approach
- Use the `URL` API:
- `const base = new URL(extensionUrl.split('#')[0]);`
- `base.searchParams.set('view', 'fullscreen');`
- `const extensionBaseUrl = base.toString();`
- This preserves existing params and prevents duplicate/invalid `?` separators.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


2. Fullscreen CSS overrides theme ✓ Resolved 🐞 Bug ≡ Correctness
Description
index.html hard-codes a light background for html.fullscreen-shell body and `html.fullscreen-shell
div#root`, which overrides the theme-driven backgrounds set in View.tsx when fullscreen-shell is
active. This can force a light background even when the user selects dark mode in fullscreen views.
Code

packages/extension/public/index.html[R26-35]

+      html.fullscreen-shell body {
+        background: #D8DDF1;
+      }
+
+      html.fullscreen-shell div#root {
+        background: #D8DDF1;
+        margin: 0;
+        max-width: 100%;
+        width: 100%;
}
Evidence
When fullscreen-shell is enabled, the selectors html.fullscreen-shell body and
html.fullscreen-shell div#root are more specific than View.tsx's body { ... } and `div#root {
... } rules, so the hard-coded #D8DDF1` background will win and prevent the runtime theme from
controlling body/root background colors.

packages/extension/public/index.html[26-35]
packages/extension-polkagate/src/components/View.tsx[92-101]
packages/extension/public/fullscreen-shell.js[35-40]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Fullscreen-shell adds CSS rules that hardcode a light background on `body` and `#root`, overriding the MUI theme backgrounds and breaking dark mode appearance in fullscreen.
### Issue Context
`View.tsx` sets `body` and `div#root` backgrounds from the active theme. `index.html` adds more-specific selectors under `html.fullscreen-shell ...`, which overrides those values.
### Fix Focus Areas
- packages/extension/public/index.html[26-35]
- packages/extension-polkagate/src/components/View.tsx[92-101]
### Suggested fix approach
- Keep fullscreen sizing/layout adjustments (e.g., width: 100%), but do not hardcode background colors.
- If you need a pre-React paint color, consider:
- setting background via a CSS variable that JS sets from `localStorage` theme, or
- using `prefers-color-scheme` media queries, while ensuring user-selected theme still wins once React loads.
- Ensure fullscreen-shell rules do not override `body`/`#root` theme backgrounds (or use less-specific selectors / remove background properties).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools



Remediation recommended

3. Unsafe matchMedia chaining 🐞 Bug ☼ Reliability
Description
chooseTheme() uses optional chaining on window.matchMedia but then immediately accesses .matches,
which will throw if matchMedia is unavailable. That can crash theme initialization when View.tsx
calls chooseTheme() during initial render.
Code

packages/extension-polkagate/src/components/chooseTheme.ts[R13-15]

+  return window.matchMedia?.('(prefers-color-scheme: light)').matches
+    ? 'light'
+    : 'dark';
Evidence
chooseTheme() evaluates window.matchMedia?.('(prefers-color-scheme: light)').matches; if
matchMedia is undefined, the optional call returns undefined and .matches becomes a property
access on undefined. View.tsx calls chooseTheme() to initialize state, so an exception here can
prevent the UI from rendering.

packages/extension-polkagate/src/components/chooseTheme.ts[6-15]
packages/extension-polkagate/src/components/View.tsx[21-23]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`chooseTheme()` can throw when `window.matchMedia` is missing because `.matches` is accessed without optional chaining.
### Issue Context
Theme selection runs during initial render (`useState(chooseTheme())`), so any thrown error can prevent the UI from loading.
### Fix Focus Areas
- packages/extension-polkagate/src/components/chooseTheme.ts[13-15]
### Suggested fix approach
- Change to:
- `return window.matchMedia?.('(prefers-color-scheme: light)')?.matches ? 'light' : 'dark';`
- (Optional hardening) Wrap `localStorage.getItem(...)` in try/catch if this code can run in contexts where localStorage is blocked.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

Qodo Logo

Comment thread packages/extension-polkagate/src/util/switchToOrOpenTab.ts Outdated
Comment thread packages/extension/public/index.html Outdated
@socket-security
Copy link
Copy Markdown

socket-security Bot commented May 19, 2026

No dependency changes detected. Learn more about Socket for GitHub.

👍 No dependency changes detected in pull request

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

test on testing phase WIP Work In Progress

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant