diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 351a11506d68..4100a13f8bee 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -98,7 +98,7 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c
     - [ ] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
 - [ ] If a new CSS style is added I verified that:
     - [ ] A similar style doesn't already exist
-    - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)`)
+    - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)`)
 - [ ] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
 - [ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like `Avatar` is modified, I verified that `Avatar` is working as expected in all cases)
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
diff --git a/contributingGuides/REVIEWER_CHECKLIST.md b/contributingGuides/REVIEWER_CHECKLIST.md
index 16c8f88927b1..68088f623f8d 100644
--- a/contributingGuides/REVIEWER_CHECKLIST.md
+++ b/contributingGuides/REVIEWER_CHECKLIST.md
@@ -46,7 +46,7 @@
     - [ ] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
 - [ ] If a new CSS style is added I verified that:
     - [ ] A similar style doesn't already exist
-    - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG`)
+    - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(theme.componentBG`)
 - [ ] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
 - [ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like `Avatar` is modified, I verified that `Avatar` is working as expected in all cases)
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
diff --git a/src/components/AddressSearch/CurrentLocationButton.js b/src/components/AddressSearch/CurrentLocationButton.js
index a955cf821f7f..6f5148edd436 100644
--- a/src/components/AddressSearch/CurrentLocationButton.js
+++ b/src/components/AddressSearch/CurrentLocationButton.js
@@ -25,8 +25,8 @@ const defaultProps = {
 };
 
 function CurrentLocationButton({onPress, isDisabled}) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
 
     return (
diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
index f24b82d8e867..efde2b24992f 100644
--- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
+++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
@@ -39,8 +39,8 @@ function BaseAutoCompleteSuggestions<TSuggestion>(
     }: AutoCompleteSuggestionsProps<TSuggestion>,
     ref: ForwardedRef<View | HTMLDivElement>,
 ) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     const rowHeight = useSharedValue(0);
     const scrollRef = useRef<FlashList<TSuggestion>>(null);
     /**
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index e97d73d28c8c..6e5ad8970f1a 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -41,8 +41,8 @@ type BannerProps = {
 };
 
 function Banner({text, onClose, onPress, containerStyles, textStyles, shouldRenderHTML = false, shouldShowIcon = false, shouldShowCloseButton = false}: BannerProps) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
 
     return (
diff --git a/src/components/BaseMiniContextMenuItem.js b/src/components/BaseMiniContextMenuItem.js
index 035d8bf4b981..3252938e4ca5 100644
--- a/src/components/BaseMiniContextMenuItem.js
+++ b/src/components/BaseMiniContextMenuItem.js
@@ -51,8 +51,8 @@ const defaultProps = {
  * @returns {JSX.Element}
  */
 function BaseMiniContextMenuItem(props) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     return (
         <Tooltip text={props.tooltipText}>
             <PressableWithoutFeedback
diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js
index eb227de36a54..9852e607562b 100644
--- a/src/components/Composer/index.ios.js
+++ b/src/components/Composer/index.ios.js
@@ -66,8 +66,8 @@ const defaultProps = {
 
 function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isComposerFullSize, setIsFullComposerAvailable, ...props}) {
     const textInput = useRef(null);
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
 
     /**
      * Set the TextInput Ref
diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index 4c4c34851afb..4ddd537fdd7d 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -42,8 +42,8 @@ function ConfirmedRoute({mapboxAccessToken, transaction}) {
     const {route0: route} = transaction.routes || {};
     const waypoints = lodashGet(transaction, 'comment.waypoints', {});
     const coordinates = lodashGet(route, 'geometry.coordinates', []);
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
 
     const getWaypointMarkers = useCallback(
         (waypointsData) => {
diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js
index 7059e0161001..a5a8985e3978 100644
--- a/src/components/ContextMenuItem.js
+++ b/src/components/ContextMenuItem.js
@@ -54,8 +54,8 @@ const defaultProps = {
 };
 
 function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini, description, isAnonymousAction, isFocused, innerRef}) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     const {windowWidth} = useWindowDimensions();
     const [isThrottledButtonActive, setThrottledButtonInactive] = useThrottledButtonState();
 
diff --git a/src/components/DatePicker/CalendarPicker/index.js b/src/components/DatePicker/CalendarPicker/index.js
index 82204e095f4a..eaa6a8b45b33 100644
--- a/src/components/DatePicker/CalendarPicker/index.js
+++ b/src/components/DatePicker/CalendarPicker/index.js
@@ -1,4 +1,3 @@
-import {withTheme} from '@storybook/theming';
 import {addMonths, endOfDay, endOfMonth, format, getYear, isSameDay, parseISO, setDate, setYear, startOfDay, startOfMonth, subMonths} from 'date-fns';
 import Str from 'expensify-common/lib/str';
 import PropTypes from 'prop-types';
@@ -9,7 +8,7 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import {withThemePropTypes} from '@components/withTheme';
+import withTheme, {withThemePropTypes} from '@components/withTheme';
 import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
 import compose from '@libs/compose';
 import DateUtils from '@libs/DateUtils';
@@ -265,4 +264,4 @@ class CalendarPicker extends React.PureComponent {
 CalendarPicker.propTypes = propTypes;
 CalendarPicker.defaultProps = defaultProps;
 
-export default compose(withLocalize, withThemeStyles, withTheme)(CalendarPicker);
+export default compose(withLocalize, withTheme, withThemeStyles)(CalendarPicker);
diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js
index f61c4624db32..2926d6346b1b 100644
--- a/src/components/EmojiPicker/EmojiPickerButton.js
+++ b/src/components/EmojiPicker/EmojiPickerButton.js
@@ -31,8 +31,8 @@ const defaultProps = {
 };
 
 function EmojiPickerButton(props) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     const emojiPopoverAnchor = useRef(null);
 
     useEffect(() => EmojiPickerAction.resetEmojiPopoverAnchor, []);
diff --git a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
index fe659612c846..6fd24adf04aa 100644
--- a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
+++ b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
@@ -26,8 +26,8 @@ const defaultProps = {
 };
 
 function EmojiPickerButtonDropdown(props) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     const emojiPopoverAnchor = useRef(null);
     useEffect(() => EmojiPickerAction.resetEmojiPopoverAnchor, []);
 
diff --git a/src/components/EmojiSuggestions.tsx b/src/components/EmojiSuggestions.tsx
index f141624699ed..6917d3dec185 100644
--- a/src/components/EmojiSuggestions.tsx
+++ b/src/components/EmojiSuggestions.tsx
@@ -43,8 +43,8 @@ type EmojiSuggestionsProps = {
 const keyExtractor = (item: SimpleEmoji, index: number): string => `${item.name}+${index}}`;
 
 function EmojiSuggestions({emojis, onSelect, prefix, isEmojiPickerLarge, preferredSkinToneIndex, highlightedEmojiIndex = 0, measureParentContainer = () => {}}: EmojiSuggestionsProps) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     /**
      * Render an emoji suggestion menu item component.
      */
diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js
index 86850a8af96d..faf1ec9cfa16 100644
--- a/src/components/GrowlNotification/index.js
+++ b/src/components/GrowlNotification/index.js
@@ -21,8 +21,8 @@ function GrowlNotification(_, ref) {
     const [bodyText, setBodyText] = useState('');
     const [type, setType] = useState('success');
     const [duration, setDuration] = useState();
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
 
     const types = {
         [CONST.GROWL.SUCCESS]: {
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
index fc53c8c51611..0027a557ab02 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
@@ -28,8 +28,8 @@ const propTypes = {
 };
 
 function MentionUserRenderer(props) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
     const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style']);
     const htmlAttribAccountID = lodashGet(props.tnode.attributes, 'accountid');
diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js
index 0434bd1f9bdd..a6477fcf2ce0 100755
--- a/src/components/HeaderWithBackButton/index.js
+++ b/src/components/HeaderWithBackButton/index.js
@@ -56,8 +56,8 @@ function HeaderWithBackButton({
     singleExecution = (func) => func,
     shouldNavigateToTopMostReport = false,
 }) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     const [isDownloadButtonActive, temporarilyDisableDownloadButton] = useThrottledButtonState();
     const {translate} = useLocalize();
     const {isKeyboardShown} = useKeyboardState();
diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts
index ece9a865629b..49ff4a64446b 100644
--- a/src/components/Icon/BankIcons.ts
+++ b/src/components/Icon/BankIcons.ts
@@ -1,7 +1,7 @@
 import {SvgProps} from 'react-native-svg';
 import GenericBank from '@assets/images/bankicons/generic-bank-account.svg';
 import GenericBankCard from '@assets/images/cardicons/generic-bank-card.svg';
-import {ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/styles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import {BankIcon, BankName, BankNameKey} from '@src/types/onyx/Bank';
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index 98449c838b67..25bd0a083be0 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -1,7 +1,7 @@
 import React, {PureComponent} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import withTheme, {ThemeProps} from '@components/withTheme';
-import withThemeStyles, {ThemeStylesProps} from '@components/withThemeStyles';
+import withThemeStyles, {type ThemeStylesProps} from '@components/withThemeStyles';
 import * as StyleUtils from '@styles/StyleUtils';
 import variables from '@styles/variables';
 import IconWrapperStyles from './IconWrapperStyles';
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index 653ce910da9f..f5c498b24893 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -1,6 +1,7 @@
 import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import ReactNativeModal from 'react-native-modal';
+import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import usePrevious from '@hooks/usePrevious';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -133,14 +134,14 @@ function BaseModal(
     } = useMemo(
         () =>
             getModalStyles(
+                theme,
+                styles,
                 type,
                 {
                     windowWidth,
                     windowHeight,
                     isSmallScreenWidth,
                 },
-                theme,
-                styles,
                 popoverAnchorPosition,
                 innerContainerStyle,
                 outerStyle,
@@ -207,7 +208,7 @@ function BaseModal(
                 style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone]}
                 ref={ref}
             >
-                {children}
+                <ColorSchemeWrapper>{children}</ColorSchemeWrapper>
             </View>
         </ReactNativeModal>
     );
diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx
index 179b9bc0f5a1..efff279324ac 100644
--- a/src/components/MultipleAvatars.tsx
+++ b/src/components/MultipleAvatars.tsx
@@ -193,11 +193,11 @@ function MultipleAvatars({
                                     <Avatar
                                         iconAdditionalStyles={[
                                             StyleUtils.getHorizontalStackedAvatarBorderStyle({
+                                                theme,
                                                 isHovered,
                                                 isPressed,
                                                 isInReportAction,
                                                 shouldUseCardBackground,
-                                                theme,
                                             }),
                                             StyleUtils.getAvatarBorderWidth(size),
                                         ]}
@@ -221,11 +221,11 @@ function MultipleAvatars({
                                         styles.alignItemsCenter,
                                         styles.justifyContentCenter,
                                         StyleUtils.getHorizontalStackedAvatarBorderStyle({
+                                            theme,
                                             isHovered,
                                             isPressed,
                                             isInReportAction,
                                             shouldUseCardBackground,
-                                            theme,
                                         }),
 
                                         // Set overlay background color with RGBA value so that the text will not inherit opacity
diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js
index b2bc4b182a60..31bc4d4070af 100644
--- a/src/components/OptionsList/BaseOptionsList.js
+++ b/src/components/OptionsList/BaseOptionsList.js
@@ -54,7 +54,7 @@ function BaseOptionsList({
     contentContainerStyles,
     sectionHeaderStyle,
     showScrollIndicator,
-    listContainerStyles,
+    listContainerStyles: listContainerStylesProp,
     shouldDisableRowInnerPadding,
     shouldPreventDefaultFocusOnSelectRow,
     disableFocusOptions,
@@ -78,6 +78,8 @@ function BaseOptionsList({
     const previousSections = usePrevious(sections);
     const didLayout = useRef(false);
 
+    const listContainerStyles = listContainerStylesProp || [styles.flex1];
+
     /**
      * This helper function is used to memoize the computation needed for getItemLayout. It is run whenever section data changes.
      *
diff --git a/src/components/OptionsList/optionsListPropTypes.js b/src/components/OptionsList/optionsListPropTypes.js
index 19bb43fbcc78..6008101ac1b6 100644
--- a/src/components/OptionsList/optionsListPropTypes.js
+++ b/src/components/OptionsList/optionsListPropTypes.js
@@ -108,7 +108,7 @@ const defaultProps = {
     optionHoveredStyle: undefined,
     contentContainerStyles: [],
     sectionHeaderStyle: undefined,
-    listContainerStyles: [{flex: 1}],
+    listContainerStyles: undefined,
     sections: [],
     focusedIndex: 0,
     selectedOptions: [],
diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index 9c8b76515fe8..a151dca1f211 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -463,6 +463,7 @@ class BaseOptionsSelector extends Component {
         const shouldShowDefaultConfirmButton = !this.props.footerContent && defaultConfirmButtonText;
         const safeAreaPaddingBottomStyle = shouldShowFooter ? undefined : this.props.safeAreaPaddingBottomStyle;
         const listContainerStyles = this.props.listContainerStyles || [this.props.themeStyles.flex1];
+        const optionHoveredStyle = this.props.optionHoveredStyle || this.props.themeStyles.hoveredComponentBG;
 
         const textInput = (
             <TextInput
@@ -493,7 +494,7 @@ class BaseOptionsSelector extends Component {
         const optionsList = (
             <OptionsList
                 ref={(el) => (this.list = el)}
-                optionHoveredStyle={this.props.optionHoveredStyle || this.props.themeStyles.hoveredComponentBG}
+                optionHoveredStyle={optionHoveredStyle}
                 onSelectRow={this.props.onSelectRow ? this.selectRow : undefined}
                 sections={this.state.sections}
                 focusedIndex={this.state.focusedIndex}
diff --git a/src/components/Picker/BasePicker.js b/src/components/Picker/BasePicker.js
index 084cabc02234..8eaf33ab7423 100644
--- a/src/components/Picker/BasePicker.js
+++ b/src/components/Picker/BasePicker.js
@@ -104,8 +104,8 @@ const defaultProps = {
 };
 
 function BasePicker(props) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
 
     const [isHighlighted, setIsHighlighted] = useState(false);
 
diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js
index 1c785d4b363f..6572a55ed889 100644
--- a/src/components/PopoverWithoutOverlay/index.js
+++ b/src/components/PopoverWithoutOverlay/index.js
@@ -1,5 +1,6 @@
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
+import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import {defaultProps, propTypes} from '@components/Popover/popoverPropTypes';
 import {PopoverContext} from '@components/PopoverProvider';
 import withWindowDimensions from '@components/withWindowDimensions';
@@ -16,14 +17,14 @@ function Popover(props) {
     const {onOpen, close} = React.useContext(PopoverContext);
     const insets = useSafeAreaInsets();
     const {modalStyle, modalContainerStyle, shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaMargin, shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding} = getModalStyles(
+        theme,
+        styles,
         'popover',
         {
             windowWidth: props.windowWidth,
             windowHeight: props.windowHeight,
             isSmallScreenWidth: false,
         },
-        theme,
-        styles,
         props.anchorPosition,
         props.innerContainerStyle,
         props.outerStyle,
@@ -114,7 +115,7 @@ function Popover(props) {
                 }}
                 ref={props.forwardedRef}
             >
-                {props.children}
+                <ColorSchemeWrapper>{props.children}</ColorSchemeWrapper>
             </View>
         </View>
     );
diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx
index 9a5f1ecbbb8f..a80272ee05cf 100644
--- a/src/components/Pressable/PressableWithDelayToggle.tsx
+++ b/src/components/Pressable/PressableWithDelayToggle.tsx
@@ -67,8 +67,8 @@ function PressableWithDelayToggle(
     }: PressableWithDelayToggleProps,
     ref: PressableRef,
 ) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     const [isActive, temporarilyDisableInteractions] = useThrottledButtonState();
 
     const updatePressState = () => {
diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js
index 55c2c5bb04e0..78c1f5407d64 100644
--- a/src/components/Reactions/AddReactionBubble.js
+++ b/src/components/Reactions/AddReactionBubble.js
@@ -55,8 +55,8 @@ const defaultProps = {
 };
 
 function AddReactionBubble(props) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     const ref = useRef();
     useEffect(() => EmojiPickerAction.resetEmojiPopoverAnchor, []);
 
diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js
index 0b690cd5aeef..73538a032e38 100644
--- a/src/components/Reactions/EmojiReactionBubble.js
+++ b/src/components/Reactions/EmojiReactionBubble.js
@@ -55,8 +55,8 @@ const defaultProps = {
 };
 
 function EmojiReactionBubble(props) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     return (
         <PressableWithSecondaryInteraction
             style={({hovered, pressed}) => [
diff --git a/src/components/Reactions/MiniQuickEmojiReactions.js b/src/components/Reactions/MiniQuickEmojiReactions.js
index 2226573a196e..7795f77d5d53 100644
--- a/src/components/Reactions/MiniQuickEmojiReactions.js
+++ b/src/components/Reactions/MiniQuickEmojiReactions.js
@@ -56,8 +56,8 @@ const defaultProps = {
  * @returns {JSX.Element}
  */
 function MiniQuickEmojiReactions(props) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     const ref = useRef();
 
     const openEmojiPicker = () => {
diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 5790d04845be..abc65b513ab9 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -76,8 +76,8 @@ const defaultProps = {
 };
 
 function TaskPreview(props) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     // The reportAction might not contain details regarding the taskReport
     // Only the direct parent reportAction will contain details about the taskReport
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index de0c1774b74f..3d3ed9315f6e 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -46,8 +46,8 @@ const propTypes = {
 };
 
 function TaskView(props) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     useEffect(() => {
         Task.setTaskReport({...props.report});
     }, [props.report]);
diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index 83601dbc27d8..602a326d6c48 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -70,8 +70,8 @@ const getOpacity = (position, routesLength, tabIndex, active, affectedTabs) => {
 
 function TabSelector({state, navigation, onTabPress, position}) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     const defaultAffectedAnimatedTabs = useMemo(() => Array.from({length: state.routes.length}, (v, i) => i), [state.routes.length]);
     const [affectedAnimatedTabs, setAffectedAnimatedTabs] = useState(defaultAffectedAnimatedTabs);
 
diff --git a/src/components/withTheme.tsx b/src/components/withTheme.tsx
index 451292f1a66f..532ff6e5c375 100644
--- a/src/components/withTheme.tsx
+++ b/src/components/withTheme.tsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, {ComponentType, ForwardedRef, forwardRef, ReactElement, RefAttributes} from 'react';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
-import {ThemeColors} from '@styles/themes/types';
+import {type ThemeColors} from '@styles/themes/types';
 import useTheme from '@styles/themes/useTheme';
 
 const withThemePropTypes = {
diff --git a/src/components/withThemeStyles.tsx b/src/components/withThemeStyles.tsx
index 8ea55c5fbef8..bdd5e50fe8e3 100644
--- a/src/components/withThemeStyles.tsx
+++ b/src/components/withThemeStyles.tsx
@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
 import React, {ComponentType, ForwardedRef, forwardRef, ReactElement, RefAttributes} from 'react';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
-import styles from '@styles/styles';
+import {type ThemeStyles} from '@styles/styles';
 import useThemeStyles from '@styles/useThemeStyles';
 
 const withThemeStylesPropTypes = {
     themeStyles: PropTypes.object.isRequired,
 };
-type ThemeStylesProps = {themeStyles: typeof styles};
+type ThemeStylesProps = {themeStyles: ThemeStyles};
 
 export default function withThemeStyles<TProps extends ThemeStylesProps, TRef>(
     WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
diff --git a/src/libs/ComposerUtils/updateNumberOfLines/types.ts b/src/libs/ComposerUtils/updateNumberOfLines/types.ts
index cef7d7ef6a80..5e109afe8959 100644
--- a/src/libs/ComposerUtils/updateNumberOfLines/types.ts
+++ b/src/libs/ComposerUtils/updateNumberOfLines/types.ts
@@ -1,7 +1,7 @@
 import {NativeSyntheticEvent, TextInputContentSizeChangeEventData} from 'react-native';
 import ComposerProps from '@libs/ComposerUtils/types';
-import themeStyles from '@styles/styles';
+import {type ThemeStyles} from '@styles/styles';
 
-type UpdateNumberOfLines = (props: ComposerProps, event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>, styles: typeof themeStyles) => void;
+type UpdateNumberOfLines = (props: ComposerProps, event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>, styles: ThemeStyles) => void;
 
 export default UpdateNumberOfLines;
diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts
index fc2bfb6d83fb..488041d2061f 100644
--- a/src/libs/PaymentUtils.ts
+++ b/src/libs/PaymentUtils.ts
@@ -1,5 +1,5 @@
 import getBankIcon from '@components/Icon/BankIcons';
-import {ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/styles';
 import CONST from '@src/CONST';
 import BankAccount from '@src/types/onyx/BankAccount';
 import Fund from '@src/types/onyx/Fund';
diff --git a/src/pages/home/report/ReactionList/HeaderReactionList.js b/src/pages/home/report/ReactionList/HeaderReactionList.js
index 59367395119c..2d4e6bfbb35a 100644
--- a/src/pages/home/report/ReactionList/HeaderReactionList.js
+++ b/src/pages/home/report/ReactionList/HeaderReactionList.js
@@ -27,8 +27,8 @@ const defaultProps = {
 };
 
 function HeaderReactionList(props) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     return (
         <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.emojiReactionListHeader, !props.isSmallScreenWidth && styles.pt4]}>
             <View style={styles.flexRow}>
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index 39bce4bf067a..b13d57ad2976 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -79,8 +79,8 @@ const showWorkspaceDetails = (reportID) => {
 };
 
 function ReportActionItemSingle(props) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const actorAccountID = props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && props.iouReport ? props.iouReport.managerID : props.action.actorAccountID;
     let displayName = ReportUtils.getDisplayNameForParticipant(actorAccountID);
diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js
index d956e10e1384..5af4129aefbc 100644
--- a/src/pages/settings/Wallet/PaymentMethodList.js
+++ b/src/pages/settings/Wallet/PaymentMethodList.js
@@ -207,8 +207,8 @@ function PaymentMethodList({
     shouldEnableScroll,
     style,
 }) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
 
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
index 4cb62b930632..64ef54a8ab84 100644
--- a/src/styles/StyleUtils.ts
+++ b/src/styles/StyleUtils.ts
@@ -8,8 +8,8 @@ import CONST from '@src/CONST';
 import {Transaction} from '@src/types/onyx';
 import colors from './colors';
 import fontFamily from './fontFamily';
-import {ThemeStyles} from './styles';
-import {ThemeColors} from './themes/types';
+import {type ThemeStyles} from './styles';
+import {type ThemeColors} from './themes/types';
 import cursor from './utilities/cursor';
 import positioning from './utilities/positioning';
 import spacing from './utilities/spacing';
@@ -69,11 +69,11 @@ type ModalPaddingStylesParams = {
 };
 
 type AvatarBorderStyleParams = {
+    theme: ThemeColors;
     isHovered: boolean;
     isPressed: boolean;
     isInReportAction: boolean;
     shouldUseCardBackground: boolean;
-    theme: ThemeColors;
 };
 
 type GetBaseAutoCompleteSuggestionContainerStyleParams = {
@@ -857,7 +857,7 @@ function fade(fadeAnimation: Animated.Value): Animated.WithAnimatedValue<ViewSty
     };
 }
 
-function getHorizontalStackedAvatarBorderStyle({isHovered, isPressed, isInReportAction = false, shouldUseCardBackground = false, theme}: AvatarBorderStyleParams): ViewStyle {
+function getHorizontalStackedAvatarBorderStyle({theme, isHovered, isPressed, isInReportAction = false, shouldUseCardBackground = false}: AvatarBorderStyleParams): ViewStyle {
     let borderColor = shouldUseCardBackground ? theme.cardBG : theme.appBG;
 
     if (isHovered) {
diff --git a/src/styles/addOutlineWidth/index.native.ts b/src/styles/addOutlineWidth/index.native.ts
index 4384a3f811e2..d081e2a9af70 100644
--- a/src/styles/addOutlineWidth/index.native.ts
+++ b/src/styles/addOutlineWidth/index.native.ts
@@ -4,6 +4,7 @@
  */
 import AddOutlineWidth from './types';
 
-const addOutlineWidth: AddOutlineWidth = (obj) => obj;
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const addOutlineWidth: AddOutlineWidth = (_theme, obj) => obj;
 
 export default addOutlineWidth;
diff --git a/src/styles/addOutlineWidth/index.ts b/src/styles/addOutlineWidth/index.ts
index 7063d610cf11..c1ac1af52a8b 100644
--- a/src/styles/addOutlineWidth/index.ts
+++ b/src/styles/addOutlineWidth/index.ts
@@ -7,11 +7,11 @@ import AddOutlineWidth from './types';
 /**
  * Adds the addOutlineWidth property to an object to be used when styling
  */
-const addOutlineWidth: AddOutlineWidth = (obj, theme, val, hasError = false) => ({
+const addOutlineWidth: AddOutlineWidth = (theme, obj, val, hasError = false) => ({
     ...obj,
     outlineWidth: val,
     outlineStyle: val ? 'auto' : 'none',
-    boxShadow: val !== 0 ? `0px 0px 0px ${val}px ${hasError ? theme?.danger : theme?.borderFocus}` : 'none',
+    boxShadow: val !== 0 ? `0px 0px 0px ${val}px ${hasError ? theme.danger : theme.borderFocus}` : 'none',
 });
 
 export default addOutlineWidth;
diff --git a/src/styles/addOutlineWidth/types.ts b/src/styles/addOutlineWidth/types.ts
index 35b6bc97a631..91e3f7409259 100644
--- a/src/styles/addOutlineWidth/types.ts
+++ b/src/styles/addOutlineWidth/types.ts
@@ -1,6 +1,6 @@
 import {TextStyle} from 'react-native';
-import {ThemeColors} from '@styles/themes/types';
+import {type ThemeColors} from '@styles/themes/types';
 
-type AddOutlineWidth = (obj: TextStyle, theme?: ThemeColors, val?: number, hasError?: boolean) => TextStyle;
+type AddOutlineWidth = (theme: ThemeColors, obj: TextStyle, val?: number, hasError?: boolean) => TextStyle;
 
 export default AddOutlineWidth;
diff --git a/src/styles/containerComposeStyles/types.ts b/src/styles/containerComposeStyles/types.ts
index 0b2305f52b56..9930e0230016 100644
--- a/src/styles/containerComposeStyles/types.ts
+++ b/src/styles/containerComposeStyles/types.ts
@@ -1,6 +1,6 @@
 import {ViewStyle} from 'react-native';
-import themeStyles from '@styles/styles';
+import {type ThemeStyles} from '@styles/styles';
 
-type ContainerComposeStyles = (styles: typeof themeStyles) => ViewStyle[];
+type ContainerComposeStyles = (styles: ThemeStyles) => ViewStyle[];
 
 export default ContainerComposeStyles;
diff --git a/src/styles/getContextMenuItemStyles/types.ts b/src/styles/getContextMenuItemStyles/types.ts
index 6a101fdae413..60b25acec0cb 100644
--- a/src/styles/getContextMenuItemStyles/types.ts
+++ b/src/styles/getContextMenuItemStyles/types.ts
@@ -1,5 +1,5 @@
 import {ViewStyle} from 'react-native';
-import {ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/styles';
 
 type GetContextMenuItemStyle = (themeStyles: ThemeStyles, windowWidth?: number) => ViewStyle[];
 
diff --git a/src/styles/getModalStyles.ts b/src/styles/getModalStyles.ts
index 1c28de3bb5e2..b11b350e4e9d 100644
--- a/src/styles/getModalStyles.ts
+++ b/src/styles/getModalStyles.ts
@@ -2,8 +2,8 @@ import {ViewStyle} from 'react-native';
 import {ModalProps} from 'react-native-modal';
 import {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
-import {ThemeStyles} from './styles';
-import {ThemeColors} from './themes/types';
+import {type ThemeStyles} from './styles';
+import {type ThemeColors} from './themes/types';
 import variables from './variables';
 
 function getCenteredModalStyles(styles: ThemeStyles, windowWidth: number, isSmallScreenWidth: boolean, isFullScreenWhenSmall = false): ViewStyle {
@@ -37,10 +37,10 @@ type GetModalStyles = {
 };
 
 export default function getModalStyles(
-    type: ModalType | undefined,
-    windowDimensions: WindowDimensions,
     theme: ThemeColors,
     styles: ThemeStyles,
+    type: ModalType | undefined,
+    windowDimensions: WindowDimensions,
     popoverAnchorPosition: ViewStyle = {},
     innerContainerStyle: ViewStyle = {},
     outerStyle: ViewStyle = {},
diff --git a/src/styles/getReportActionContextMenuStyles.ts b/src/styles/getReportActionContextMenuStyles.ts
index 781d0cc11549..86dd14cb8446 100644
--- a/src/styles/getReportActionContextMenuStyles.ts
+++ b/src/styles/getReportActionContextMenuStyles.ts
@@ -1,6 +1,6 @@
 import {ViewStyle} from 'react-native';
-import {ThemeStyles} from './styles';
-import {ThemeColors} from './themes/types';
+import {type ThemeStyles} from './styles';
+import {type ThemeColors} from './themes/types';
 import variables from './variables';
 
 const getDefaultWrapperStyle = (theme: ThemeColors): ViewStyle => ({
diff --git a/src/styles/getTooltipStyles.ts b/src/styles/getTooltipStyles.ts
index c47659c4f80c..fa2b5ee308e2 100644
--- a/src/styles/getTooltipStyles.ts
+++ b/src/styles/getTooltipStyles.ts
@@ -1,8 +1,8 @@
 import {TextStyle, View, ViewStyle} from 'react-native';
 import fontFamily from './fontFamily';
 import roundToNearestMultipleOfFour from './roundToNearestMultipleOfFour';
-import {ThemeStyles} from './styles';
-import {ThemeColors} from './themes/types';
+import {type ThemeStyles} from './styles';
+import {type ThemeColors} from './themes/types';
 import positioning from './utilities/positioning';
 import spacing from './utilities/spacing';
 import variables from './variables';
diff --git a/src/styles/optionRowStyles/types.ts b/src/styles/optionRowStyles/types.ts
index 68eb91975f8e..8dc5d5cc9419 100644
--- a/src/styles/optionRowStyles/types.ts
+++ b/src/styles/optionRowStyles/types.ts
@@ -1,5 +1,5 @@
 import {ViewStyle} from 'react-native';
-import {ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/styles';
 
 type CompactContentContainerStyles = (themeStyles: ThemeStyles) => ViewStyle;
 
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 983f1ba82caa..e8ce79bb5dc6 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -21,7 +21,7 @@ import pointerEventsAuto from './pointerEventsAuto';
 import pointerEventsBoxNone from './pointerEventsBoxNone';
 import pointerEventsNone from './pointerEventsNone';
 import defaultTheme from './themes/default';
-import {ThemeColors} from './themes/types';
+import {type ThemeColors} from './themes/types';
 import borders from './utilities/borders';
 import cursor from './utilities/cursor';
 import display from './utilities/display';
@@ -1016,7 +1016,7 @@ const styles = (theme: ThemeColors) =>
             flexDirection: 'row',
         },
 
-        textInputDesktop: addOutlineWidth({}, theme, 0),
+        textInputDesktop: addOutlineWidth(theme, {}, 0),
 
         textInputIconContainer: {
             paddingHorizontal: 11,
@@ -1133,7 +1133,7 @@ const styles = (theme: ThemeColors) =>
             color: theme.icon,
         },
 
-        noOutline: addOutlineWidth({}, theme, 0),
+        noOutline: addOutlineWidth(theme, {}, 0),
 
         textLabelSupporting: {
             fontFamily: fontFamily.EXP_NEUE,
@@ -1779,6 +1779,7 @@ const styles = (theme: ThemeColors) =>
         // Be extremely careful when editing the compose styles, as it is easy to introduce regressions.
         // Make sure you run the following tests against any changes: #12669
         textInputCompose: addOutlineWidth(
+            theme,
             {
                 backgroundColor: theme.componentBG,
                 borderColor: theme.border,
@@ -1799,7 +1800,6 @@ const styles = (theme: ThemeColors) =>
                 alignSelf: 'center',
                 verticalAlign: 'middle',
             },
-            theme,
             0,
         ),
 
@@ -2619,6 +2619,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         iouAmountTextInput: addOutlineWidth(
+            theme,
             {
                 ...headlineFont,
                 fontSize: variables.iouAmountTextSize,
@@ -2626,7 +2627,6 @@ const styles = (theme: ThemeColors) =>
                 padding: 0,
                 lineHeight: undefined,
             },
-            theme,
             0,
         ),
 
diff --git a/src/styles/themes/ThemeContext.ts b/src/styles/themes/ThemeContext.ts
index 8c57cc9c7e9f..3c969c7393c5 100644
--- a/src/styles/themes/ThemeContext.ts
+++ b/src/styles/themes/ThemeContext.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 import darkTheme from './default';
-import {ThemeColors} from './types';
+import {type ThemeColors} from './types';
 
 const ThemeContext = React.createContext<ThemeColors>(darkTheme);
 
diff --git a/src/styles/themes/Themes.ts b/src/styles/themes/Themes.ts
index a87407790502..5de65c7316b4 100644
--- a/src/styles/themes/Themes.ts
+++ b/src/styles/themes/Themes.ts
@@ -1,7 +1,7 @@
 import CONST from '@src/CONST';
 import darkTheme from './default';
 import lightTheme from './light';
-import {ThemeColors, ThemePreferenceWithoutSystem} from './types';
+import {type ThemeColors, ThemePreferenceWithoutSystem} from './types';
 
 const Themes = {
     [CONST.THEME.LIGHT]: lightTheme,
diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts
index 519e818054e0..59de9b7269a8 100644
--- a/src/styles/themes/default.ts
+++ b/src/styles/themes/default.ts
@@ -1,7 +1,7 @@
 import colors from '@styles/colors';
 import CONST from '@src/CONST';
 import SCREENS from '@src/SCREENS';
-import {ThemeColors} from './types';
+import {type ThemeColors} from './types';
 
 const darkTheme = {
     // Figma keys
diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts
index 2f6eda2f70dc..1541c0e723d7 100644
--- a/src/styles/themes/light.ts
+++ b/src/styles/themes/light.ts
@@ -1,7 +1,7 @@
 import colors from '@styles/colors';
 import CONST from '@src/CONST';
 import SCREENS from '@src/SCREENS';
-import {ThemeColors} from './types';
+import {type ThemeColors} from './types';
 
 const lightTheme = {
     // Figma keys
diff --git a/src/styles/themes/useTheme.ts b/src/styles/themes/useTheme.ts
index 8bb4fe73c106..adeaffbcae8a 100644
--- a/src/styles/themes/useTheme.ts
+++ b/src/styles/themes/useTheme.ts
@@ -1,6 +1,6 @@
 import {useContext} from 'react';
 import ThemeContext from './ThemeContext';
-import {ThemeColors} from './types';
+import {type ThemeColors} from './types';
 
 function useTheme(): ThemeColors {
     const theme = useContext(ThemeContext);
diff --git a/web/index.html b/web/index.html
index a7630b1a2cdc..b55ac69f8cd7 100644
--- a/web/index.html
+++ b/web/index.html
@@ -31,9 +31,6 @@
         #root > div > div {
             height: 100% !important;
         }
-        :root {
-            color-scheme: dark !important;
-        }
         * {
             touch-action: pan-x pan-y;
         }
