diff --git a/docs/components/AtlantisThemeContext/AtlantisThemeContext.stories.mdx b/docs/components/AtlantisThemeContext/AtlantisThemeContext.stories.mdx
index ec7ee330c2..4b7f3f7f8a 100644
--- a/docs/components/AtlantisThemeContext/AtlantisThemeContext.stories.mdx
+++ b/docs/components/AtlantisThemeContext/AtlantisThemeContext.stories.mdx
@@ -13,7 +13,23 @@ tokens.
 
 ## Design & usage guidelines
 
-### Using the AtlantisThemeContextProvider
+Both the web and mobile components have the exact same API, except for one
+minor difference in how you update the theme.
+
+Each platform provides a `useAtlantisTheme` hook that you may use to access the
+`theme` and `tokens` in your components.
+
+On mobile, this hook also returns a `setTheme` function which you'll use to
+update the theme for the nearest `AtlantisThemeContextProvider` ancestor.
+Typically there will only be a single provider at the root, controlling the
+theme for the entire app.
+
+On web, you'll need to import the `updateTheme` function and call it with the
+new theme. This is a separate function because it synchronizes the theme update
+across all providers under various React trees. Synchronizing across providers
+is necessary for cases where an island-based architecture is used.
+
+### Usage for web
 
 ```tsx
 import {
@@ -41,7 +57,7 @@ function ThemedComponent() {
         }}
       >
         <Content>
-          <Text>The current theme is: {theme}. </Text>
+          <Text>The current theme is: {theme}.</Text>
           <Text>
             The javascript tokens can be accessed via the tokens object.
           </Text>
@@ -61,6 +77,50 @@ function ThemedComponent() {
 }
 ```
 
+### Usage for mobile
+
+```tsx
+import { AtlantisThemeContextProvider, useAtlantisTheme } from "@jobber/components/AtlantisThemeContext";
+
+function App() {
+  return (
+    <AtlantisThemeContextProvider>
+      <ThemedComponent />
+    </AtlantisThemeContextProvider>
+  );
+}
+
+function ThemedComponent() {
+  const { theme, tokens, setTheme } = useAtlantisTheme();
+  return (
+    <Content>
+      <View
+        style={{
+          background: tokens["surface-background"],
+          padding: tokens["space-base"],
+        }}
+      >
+        <Content>
+          <Text>The current theme is: {theme}.</Text>
+          <Text>
+            The javascript tokens can be accessed via the tokens object.
+          </Text>
+          <Text>The theme can be changed using `setTheme`</Text>
+          <Button
+            onPress={() => setTheme("light")}
+            label="The theme can be changed to light"
+          />
+          <Button
+            onPress={() => setTheme("dark")}
+            label="The theme can be changed to dark"
+          />
+        </Content>
+      </View>
+    </Content>
+  );
+}
+```
+
 ### Forcing a theme for an AtlantisThemeContextProvider
 
 In some scenarios you may want to force a theme for specific components
diff --git a/docs/components/AtlantisThemeContext/Mobile.stories.tsx b/docs/components/AtlantisThemeContext/Mobile.stories.tsx
new file mode 100644
index 0000000000..5ada330ec2
--- /dev/null
+++ b/docs/components/AtlantisThemeContext/Mobile.stories.tsx
@@ -0,0 +1,94 @@
+import React from "react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { View } from "react-native";
+import {
+  AtlantisThemeContextProvider,
+  Button,
+  Content,
+  Text,
+  useAtlantisTheme,
+} from "@jobber/components-native";
+
+export default {
+  title: "Components/Themes/AtlantisThemeContext/Mobile",
+  component: AtlantisThemeContextProvider,
+  parameters: {
+    viewMode: "story",
+    previewTabs: {
+      code: {
+        hidden: false,
+      },
+    },
+    viewport: { defaultViewport: "mobile1" },
+  },
+} as ComponentMeta<typeof AtlantisThemeContextProvider>;
+
+function ChildrenComponent({
+  message = "It is possible to have multiple Atlantis Theme providers.",
+}: {
+  readonly message?: string;
+}) {
+  const { theme, tokens, setTheme } = useAtlantisTheme();
+
+  return (
+    <View
+      style={{
+        backgroundColor: tokens["color-surface"],
+      }}
+    >
+      <Content>
+        <Text>{message}</Text>
+        <Text>{`Current theme: ${theme}`}</Text>
+        <Text>Tokens can be accessed using tokens[token-name]</Text>
+        <Text>{`For example color-surface: ${tokens["color-surface"]}`}</Text>
+        <Button label="Set dark theme" onPress={() => setTheme("dark")} />
+        <Button label="Set light theme" onPress={() => setTheme("light")} />
+      </Content>
+    </View>
+  );
+}
+
+function ForcedDarkThemeComponent() {
+  const { tokens } = useAtlantisTheme();
+
+  return (
+    <View
+      style={{
+        backgroundColor: tokens["color-surface"],
+      }}
+    >
+      <Content>
+        <Text>This will always be a dark theme</Text>
+      </Content>
+    </View>
+  );
+}
+
+const BasicTemplate: ComponentStory<
+  typeof AtlantisThemeContextProvider
+> = args => {
+  return (
+    <AtlantisThemeContextProvider {...args}>
+      <ChildrenComponent />
+    </AtlantisThemeContextProvider>
+  );
+};
+
+export const Basic = BasicTemplate.bind({});
+BasicTemplate.args = {};
+
+const ForceThemeTemplate: ComponentStory<
+  typeof AtlantisThemeContextProvider
+> = args => {
+  return (
+    <AtlantisThemeContextProvider {...args}>
+      <ChildrenComponent message="It is possible to have a provider ignore Theme Changes" />
+      <AtlantisThemeContextProvider dangerouslyOverrideTheme="dark">
+        <ForcedDarkThemeComponent />
+      </AtlantisThemeContextProvider>
+    </AtlantisThemeContextProvider>
+  );
+};
+
+export const ForceThemeForProvider = ForceThemeTemplate.bind({});
+ForceThemeForProvider.args = {};
diff --git a/packages/components-native/src/AtlantisThemeContext/AtlantisThemeContext.test.tsx b/packages/components-native/src/AtlantisThemeContext/AtlantisThemeContext.test.tsx
new file mode 100644
index 0000000000..9df5c8442e
--- /dev/null
+++ b/packages/components-native/src/AtlantisThemeContext/AtlantisThemeContext.test.tsx
@@ -0,0 +1,106 @@
+import React from "react";
+import { act, renderHook } from "@testing-library/react-native";
+import { darkTokens, iosTokens } from "@jobber/design";
+import merge from "lodash/merge";
+import {
+  AtlantisThemeContextProvider,
+  useAtlantisTheme,
+} from "./AtlantisThemeContext";
+import { AtlantisThemeContextProviderProps, Theme } from "./types";
+
+const expectedDarkTokens = merge({}, iosTokens, darkTokens);
+const expectedLightTokens = iosTokens;
+
+function Wrapper({
+  children,
+  dangerouslyOverrideTheme,
+}: AtlantisThemeContextProviderProps) {
+  return (
+    <AtlantisThemeContextProvider
+      dangerouslyOverrideTheme={dangerouslyOverrideTheme}
+    >
+      {children}
+    </AtlantisThemeContextProvider>
+  );
+}
+
+function WrapperWithOverride({
+  children,
+  dangerouslyOverrideTheme,
+}: AtlantisThemeContextProviderProps) {
+  return (
+    <Wrapper>
+      <AtlantisThemeContextProvider
+        dangerouslyOverrideTheme={dangerouslyOverrideTheme}
+      >
+        {children}
+      </AtlantisThemeContextProvider>
+    </Wrapper>
+  );
+}
+
+describe("ThemeContext", () => {
+  it("defaults to the light theme", () => {
+    const { result } = renderHook(useAtlantisTheme, {
+      wrapper: (props: AtlantisThemeContextProviderProps) => (
+        <Wrapper {...props} />
+      ),
+    });
+
+    expect(result.current.theme).toBe("light");
+    expect(result.current.tokens).toEqual(expectedLightTokens);
+  });
+
+  it("updates the theme and tokens", () => {
+    const { result } = renderHook(useAtlantisTheme, {
+      wrapper: (props: AtlantisThemeContextProviderProps) => (
+        <Wrapper {...props} />
+      ),
+    });
+
+    act(() => result.current.setTheme("dark"));
+    expect(result.current.theme).toBe("dark");
+    expect(result.current.tokens).toEqual(expectedDarkTokens);
+
+    act(() => result.current.setTheme("light"));
+    expect(result.current.theme).toBe("light");
+    expect(result.current.tokens).toEqual(expectedLightTokens);
+  });
+
+  describe("when theme is forced for provider", () => {
+    it("ignores updates to the global theme", () => {
+      const { result } = renderHook(useAtlantisTheme, {
+        wrapper: (props: AtlantisThemeContextProviderProps) => (
+          <WrapperWithOverride {...props} dangerouslyOverrideTheme="light" />
+        ),
+      });
+
+      // Update the global theme
+      act(() => result.current.setTheme("dark"));
+
+      // This hook shouldn't be affected by it because it's set to the light theme
+      expect(result.current.theme).toBe("light");
+      expect(result.current.tokens).toEqual(expectedLightTokens);
+    });
+
+    it.each([
+      { defaultTheme: "light", expectedTokens: expectedLightTokens },
+      { defaultTheme: "dark", expectedTokens: expectedDarkTokens },
+    ] as { defaultTheme: Theme; expectedTokens: typeof iosTokens }[])(
+      "provides the dangerouslyOverrideTheme $defaultTheme tokens",
+      ({ defaultTheme, expectedTokens }) => {
+        const { result } = renderHook(useAtlantisTheme, {
+          wrapper: (props: AtlantisThemeContextProviderProps) => (
+            <WrapperWithOverride
+              {...props}
+              dangerouslyOverrideTheme={defaultTheme}
+            />
+          ),
+        });
+
+        expect(result.current.theme).toBe(defaultTheme);
+        expect(result.current.tokens).toEqual(expectedTokens);
+      },
+    );
+  });
+});
diff --git a/packages/components-native/src/AtlantisThemeContext/AtlantisThemeContext.tsx b/packages/components-native/src/AtlantisThemeContext/AtlantisThemeContext.tsx
new file mode 100644
index 0000000000..d3f5e42f7f
--- /dev/null
+++ b/packages/components-native/src/AtlantisThemeContext/AtlantisThemeContext.tsx
@@ -0,0 +1,56 @@
+import { androidTokens, darkTokens, iosTokens } from "@jobber/design";
+import React, { createContext, useContext, useState } from "react";
+import merge from "lodash/merge";
+import { Platform } from "react-native";
+import {
+  AtlantisThemeContextProviderProps,
+  AtlantisThemeContextValue,
+  Theme,
+} from "./types";
+
+const lightTokens = Platform.select({
+  ios: () => iosTokens,
+  android: () => androidTokens,
+  default: () => androidTokens,
+})();
+
+const completeDarkTokens = merge({}, lightTokens, darkTokens);
+
+const AtlantisThemeContext = createContext<AtlantisThemeContextValue>({
+  theme: "light",
+  tokens: lightTokens,
+  setTheme: () => {
+    console.error(
+      "useAtlantisTheme accessed outside of AtlantisThemeContextProvider",
+    );
+  },
+});
+
+export function AtlantisThemeContextProvider({
+  children,
+  dangerouslyOverrideTheme,
+}: AtlantisThemeContextProviderProps) {
+  // TODO: check last saved theme from local/device storage
+  const initialTheme: Theme = "light";
+  const [globalTheme, setGlobalTheme] = useState<Theme>(initialTheme);
+
+  const currentTheme = dangerouslyOverrideTheme ?? globalTheme;
+  const currentTokens =
+    currentTheme === "dark" ? completeDarkTokens : lightTokens;
+
+  return (
+    <AtlantisThemeContext.Provider
+      value={{
+        theme: currentTheme,
+        tokens: currentTokens,
+        setTheme: setGlobalTheme,
+      }}
+    >
+      {children}
+    </AtlantisThemeContext.Provider>
+  );
+}
+
+export function useAtlantisTheme() {
+  return useContext(AtlantisThemeContext);
+}
diff --git a/packages/components-native/src/AtlantisThemeContext/index.ts b/packages/components-native/src/AtlantisThemeContext/index.ts
new file mode 100644
index 0000000000..5fec733370
--- /dev/null
+++ b/packages/components-native/src/AtlantisThemeContext/index.ts
@@ -0,0 +1,9 @@
+export {
+  AtlantisThemeContextProvider,
+  useAtlantisTheme,
+} from "./AtlantisThemeContext";
+export {
+  Theme,
+  AtlantisThemeContextProviderProps,
+  AtlantisThemeContextValue,
+} from "./types";
diff --git a/packages/components-native/src/AtlantisThemeContext/types.ts b/packages/components-native/src/AtlantisThemeContext/types.ts
new file mode 100644
index 0000000000..cf26d74fc6
--- /dev/null
+++ b/packages/components-native/src/AtlantisThemeContext/types.ts
@@ -0,0 +1,33 @@
+import { iosTokens } from "@jobber/design";
+
+export interface AtlantisThemeContextValue {
+  /**
+   * The active theme.
+   */
+  readonly theme: Theme;
+
+  /**
+   * The design tokens for the current theme.
+   */
+  readonly tokens: typeof iosTokens;
+
+  /**
+   * Change the current theme globally.
+   */
+  readonly setTheme: (theme: Theme) => void;
+}
+
+export interface AtlantisThemeContextProviderProps {
+  /**
+   * The children to render.
+   */
+  readonly children: React.ReactNode;
+
+  /**
+   * Force the theme for this provider to always be the same as the provided theme. Useful for sections that should remain the same theme regardless of the rest of the application's theme.
+   * This is dangerous because the children in this provider will not be able to change the theme.
+   */
+  readonly dangerouslyOverrideTheme?: Theme;
+}
+
+export type Theme = "light" | "dark";
diff --git a/packages/components-native/src/index.ts b/packages/components-native/src/index.ts
index 6a5102c650..2a5e99c1e7 100644
--- a/packages/components-native/src/index.ts
+++ b/packages/components-native/src/index.ts
@@ -2,6 +2,7 @@ export * from "./ActionItem";
 export * from "./ActionLabel";
 export * from "./ActivityIndicator";
 export * from "./AtlantisContext";
+export * from "./AtlantisThemeContext";
 export * from "./AutoLink";
 export * from "./Banner";
 export * from "./BottomSheet";
diff --git a/packages/components-native/src/utils/design/index.ts b/packages/components-native/src/utils/design/index.ts
index 9721921321..7a470255bd 100644
--- a/packages/components-native/src/utils/design/index.ts
+++ b/packages/components-native/src/utils/design/index.ts
@@ -1,6 +1,11 @@
 import { Platform } from "react-native";
 import { androidTokens, iosTokens } from "@jobber/design";
 
+/**
+ * These design tokens don't react to theme changes. Only use these if you need to access
+ * tokens that are not affected by the current theme, otherwise you should be using our
+ * useAtlantisTheme() hook to access the current theme's tokens.
+ */
 export const tokens: typeof iosTokens = Platform.select({
   ios: () => iosTokens,
   android: () => androidTokens,
diff --git a/packages/components-native/src/utils/meta/meta.json b/packages/components-native/src/utils/meta/meta.json
index 34060306a9..5c83e1881a 100644
--- a/packages/components-native/src/utils/meta/meta.json
+++ b/packages/components-native/src/utils/meta/meta.json
@@ -8,6 +8,7 @@
     "AtlantisContext.Provider",
     "AtlantisFormContext.Consumer",
     "AtlantisFormContext.Provider",
+    "AtlantisThemeContextProvider",
     "AutoLink",
     "Banner",
     "BottomSheet",
diff --git a/packages/site/baseComponentLists.mjs b/packages/site/baseComponentLists.mjs
index e50a1b9d6b..234aff1fb0 100644
--- a/packages/site/baseComponentLists.mjs
+++ b/packages/site/baseComponentLists.mjs
@@ -88,6 +88,7 @@ const mobileComponents = [
   "ActionItemGroup",
   "ActionLabel",
   "ActivityIndicator",
+  "AtlantisThemeContext",
   "AutoLink",
   "Banner",
   "BottomSheet",
diff --git a/packages/site/src/content/AtlantisThemeContext/AtlantisThemeContext.props-mobile.json b/packages/site/src/content/AtlantisThemeContext/AtlantisThemeContext.props-mobile.json
new file mode 100644
index 0000000000..e78ae4b2e1
--- /dev/null
+++ b/packages/site/src/content/AtlantisThemeContext/AtlantisThemeContext.props-mobile.json
@@ -0,0 +1,37 @@
+[
+  {
+    "tags": {},
+    "filePath": "../components-native/src/AtlantisThemeContext/AtlantisThemeContext.tsx",
+    "description": "",
+    "displayName": "AtlantisThemeContextProvider",
+    "methods": [],
+    "props": {
+      "children": {
+        "defaultValue": null,
+        "description": "The children to render.",
+        "name": "children",
+        "parent": {
+          "fileName": "packages/components-native/src/AtlantisThemeContext/types.ts",
+          "name": "AtlantisThemeContextProviderProps"
+        },
+        "required": true,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "dangerouslyOverrideTheme": {
+        "defaultValue": null,
+        "description": "Force the theme for this provider to always be the same as the provided theme. Useful for sections that should remain the same theme regardless of the rest of the application's theme.\nThis is dangerous because the children in this provider will not be able to change the theme.",
+        "name": "dangerouslyOverrideTheme",
+        "parent": {
+          "fileName": "packages/components-native/src/AtlantisThemeContext/types.ts",
+          "name": "AtlantisThemeContextProviderProps"
+        },
+        "required": false,
+        "type": {
+          "name": "Theme"
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/packages/site/src/content/AtlantisThemeContext/index.tsx b/packages/site/src/content/AtlantisThemeContext/index.tsx
index 1f8959cbc5..ab63f72b4a 100644
--- a/packages/site/src/content/AtlantisThemeContext/index.tsx
+++ b/packages/site/src/content/AtlantisThemeContext/index.tsx
@@ -1,11 +1,13 @@
 import AtlantisThemeContextContent from "@atlantis/docs/components/AtlantisThemeContext/AtlantisThemeContext.stories.mdx";
 import Props from "./AtlantisThemeContext.props.json";
+import MobileProps from "./AtlantisThemeContext.props-mobile.json";
 import { ContentExport } from "../../types/content";
 import { getStorybookUrl } from "../../layout/getStorybookUrl";
 
 export default {
   content: () => <AtlantisThemeContextContent />,
   props: Props,
+  mobileProps: MobileProps,
   component: {
     element: `<AtlantisThemeContextProvider>
     <Box background="surface" padding="larger" radius="base" gap="base">
@@ -23,6 +25,19 @@ export default {
     </Box>
   </AtlantisThemeContextProvider>
   `,
+    mobileElement: `const { theme, tokens, setTheme } = useAtlantisTheme();
+
+return (
+  <AtlantisThemeContextProvider dangerouslyOverrideTheme={theme}>
+    <View style={{ backgroundColor: tokens["color-surface"], borderRadius: tokens["radius-base"], width: "100%" }}>
+      <Content>
+        <Text>Current Theme: {theme}</Text>
+        <Button label="Set dark theme" onPress={() => setTheme("dark")} />
+        <Button label="Set light theme" onPress={() => setTheme("light")} />
+      </Content>
+    </View>
+  </AtlantisThemeContextProvider>
+)`,
   },
   title: "AtlantisThemeContext",
   links: [
diff --git a/packages/site/src/preview/AtlantisPreviewProvider.tsx b/packages/site/src/preview/AtlantisPreviewProvider.tsx
index 2f669dd4bc..5f8450c18a 100644
--- a/packages/site/src/preview/AtlantisPreviewProvider.tsx
+++ b/packages/site/src/preview/AtlantisPreviewProvider.tsx
@@ -43,6 +43,10 @@ export const AtlantisPreviewProvider = ({ children }: PropsWithChildren) => {
       const iframeWindow = iframe.current.contentWindow;
       iframeWindow?.postMessage({ type: "updateTheme", theme }, "*");
     }
+    if (iframeMobile.current) {
+      const iframeMobileWindow = iframeMobile.current.contentWindow;
+      iframeMobileWindow?.postMessage({ type: "updateTheme", theme }, "*");
+    }
   }, [theme]);
 
   return (
diff --git a/packages/site/src/preview/useAtlantisPreviewSkeleton.tsx b/packages/site/src/preview/useAtlantisPreviewSkeleton.tsx
index 23e2b91475..d8acef50cb 100644
--- a/packages/site/src/preview/useAtlantisPreviewSkeleton.tsx
+++ b/packages/site/src/preview/useAtlantisPreviewSkeleton.tsx
@@ -18,7 +18,7 @@ const skeletonHTML = (theme: Theme, type: "web" | "mobile") => {
   return `
 
 <!DOCTYPE html>
-<html data-theme="${type === "web" ? theme : "light"}" data-type="${type}">
+<html data-theme="${theme}" data-type="${type}">
 <head>
 <style>
 html,body,#root {
@@ -76,6 +76,9 @@ html,body,#root {
           }
         } else if (type === 'updateTheme') {
           document.documentElement.dataset.theme = theme;
+          if (window.updateMobileTheme) {
+            window.updateMobileTheme(theme);
+          }
         }
       });
       </script>
@@ -207,6 +210,7 @@ export const MobileCodeWrapper = (
               ActionItemGroup,
               ActionLabel,
               ActivityIndicator,
+              AtlantisThemeContextProvider,
               AutoLink,
               Banner,
               BottomSheet,
@@ -250,6 +254,7 @@ export const MobileCodeWrapper = (
               Toast,
               showToast,
               Typography,
+              useAtlantisTheme,
               useState,
               forwardRef,
               useEffect,
@@ -260,7 +265,20 @@ export const MobileCodeWrapper = (
                 ${transpiledCode}
 
             function RootWrapper() {
-              return React.createElement(Host, {style:{display:'flex',alignItems:'center',justifyContent:'center', width:'100%'}}, React.createElement(App));
+              const themedApp = React.createElement(AtlantisThemeContextProvider, null, React.createElement(function ThemeHandler(props) {
+                const { setTheme } = useAtlantisTheme();
+
+                // Make this globally available so the doc's site theme can update it
+                window.updateMobileTheme = (theme) => setTheme(theme);
+
+                // Set the initial theme on mount
+                useEffect(() => {
+                  setTheme(document.documentElement.dataset.theme);
+                }, []);
+
+                return React.createElement(App);
+              }));
+              return React.createElement(Host, {style:{display:'flex',alignItems:'center',justifyContent:'center', width:'100%'}}, themedApp);
             }
 
             function IntlWrapper() {