diff --git a/site/source/components/BarChart.tsx b/site/source/components/BarChart.tsx
index 68801fd39..03f27d935 100644
--- a/site/source/components/BarChart.tsx
+++ b/site/source/components/BarChart.tsx
@@ -2,7 +2,7 @@ import { formatValue } from 'publicodes'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { animated, config, useSpring } from 'react-spring'
-import { styled, ThemeContext } from 'styled-components'
+import { styled, useTheme } from 'styled-components'
 
 import useDisplayOnIntersecting from '@/components/utils/useDisplayOnIntersecting'
 import { Emoji } from '@/design-system/emoji'
@@ -30,7 +30,7 @@ function ChartItemBar({
 		colors: {
 			bases: { primary },
 		},
-	} = useContext(ThemeContext)
+	} = useTheme()
 	const style = useSpring({
 		config: config.slow,
 		delay: 100,
diff --git a/site/source/components/simulationExplanation/IndépendantExplanation.tsx b/site/source/components/simulationExplanation/IndépendantExplanation.tsx
index 4d11b17c6..cc7428bd3 100644
--- a/site/source/components/simulationExplanation/IndépendantExplanation.tsx
+++ b/site/source/components/simulationExplanation/IndépendantExplanation.tsx
@@ -3,10 +3,9 @@ import BarChartBranch from '@/components/BarChart'
 import '@/components/Distribution.css'
 
 import { DottedName } from 'modele-social'
-import { useContext } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import { ThemeContext } from 'styled-components'
+import { useTheme } from 'styled-components'
 
 import Value, {
 	Condition,
@@ -31,7 +30,7 @@ import { DistributionSection } from './SalaryExplanation'
 
 export default function IndépendantExplanation() {
 	const { t } = useTranslation()
-	const { colors } = useContext(ThemeContext)
+	const { colors } = useTheme()
 
 	return (
 		<>
diff --git a/site/source/components/simulationExplanation/SalaryExplanation.tsx b/site/source/components/simulationExplanation/SalaryExplanation.tsx
index 292c41253..0ba155087 100644
--- a/site/source/components/simulationExplanation/SalaryExplanation.tsx
+++ b/site/source/components/simulationExplanation/SalaryExplanation.tsx
@@ -1,6 +1,6 @@
-import { useContext, useRef } from 'react'
+import { useRef } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { ThemeContext } from 'styled-components'
+import { useTheme } from 'styled-components'
 
 import Distribution from '@/components/Distribution'
 import PaySlip from '@/components/PaySlip'
@@ -105,7 +105,7 @@ export default function SalaryExplanation() {
 
 function RevenueRepartitionSection(props: { onSeePayslip: () => void }) {
 	const { t } = useTranslation()
-	const { colors } = useContext(ThemeContext)
+	const { colors } = useTheme()
 	const { currentSimulatorData } = useCurrentSimulatorData()
 
 	return (
diff --git a/site/source/pages/assistants/demande-mobilité/EndBlock.tsx b/site/source/pages/assistants/demande-mobilité/EndBlock.tsx
index d934195ab..7a703fbc1 100644
--- a/site/source/pages/assistants/demande-mobilité/EndBlock.tsx
+++ b/site/source/pages/assistants/demande-mobilité/EndBlock.tsx
@@ -2,7 +2,7 @@ import { BlobProvider } from '@react-pdf/renderer'
 import { RuleNode, utils } from 'publicodes'
 import { lazy, Suspense, useContext, useRef, useState } from 'react'
 import SignaturePad from 'react-signature-pad-wrapper'
-import { ThemeContext } from 'styled-components'
+import { useTheme } from 'styled-components'
 
 import { TrackingContext, TrackPage } from '@/components/ATInternetTracking'
 import { Condition } from '@/components/EngineValue'
@@ -37,7 +37,7 @@ export default function EndBlock({ fields, missingValues }: EndBlockProps) {
 	const engine = useContext(EngineContext)
 	const signatureRef = useRef<SignaturePadInstance>()
 	const tracker = useContext(TrackingContext)
-	const { colors } = useContext(ThemeContext)
+	const { colors } = useTheme()
 	if (missingValues.length) {
 		return (
 			<Message type="info" icon>
diff --git a/site/source/pages/simulateurs/auto-entrepreneur/AutoEntrepreneur.tsx b/site/source/pages/simulateurs/auto-entrepreneur/AutoEntrepreneur.tsx
index 4514e3a16..ab53481ba 100644
--- a/site/source/pages/simulateurs/auto-entrepreneur/AutoEntrepreneur.tsx
+++ b/site/source/pages/simulateurs/auto-entrepreneur/AutoEntrepreneur.tsx
@@ -1,6 +1,5 @@
-import { useContext } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { ThemeContext } from 'styled-components'
+import { useTheme } from 'styled-components'
 
 import ChiffreAffairesActivitéMixte from '@/components/ChiffreAffairesActivitéMixte'
 import { WhenAlreadyDefined } from '@/components/EngineValue'
@@ -54,7 +53,7 @@ export default function AutoEntrepreneur() {
 
 function Explanation() {
 	const { t } = useTranslation()
-	const { colors } = useContext(ThemeContext)
+	const { colors } = useTheme()
 
 	return (
 		<section>
diff --git a/site/source/pages/simulateurs/dividendes/Dividendes.tsx b/site/source/pages/simulateurs/dividendes/Dividendes.tsx
index 1ef0f43b2..fe104e315 100644
--- a/site/source/pages/simulateurs/dividendes/Dividendes.tsx
+++ b/site/source/pages/simulateurs/dividendes/Dividendes.tsx
@@ -1,8 +1,8 @@
 import { DottedName } from 'modele-social'
-import { useContext, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
-import { ThemeContext } from 'styled-components'
+import { useTheme } from 'styled-components'
 
 import { Condition } from '@/components/EngineValue'
 import Notifications from '@/components/Notifications'
@@ -107,7 +107,7 @@ const DividendesSimulationGoals = () => (
 
 const DividendesExplanation = () => {
 	const { t } = useTranslation()
-	const { colors } = useContext(ThemeContext)
+	const { colors } = useTheme()
 
 	return (
 		<Condition expression="bénéficiaire . dividendes . bruts > 0">
diff --git a/site/source/pages/statistiques/Chart.tsx b/site/source/pages/statistiques/Chart.tsx
index 8460906bc..5376fe907 100644
--- a/site/source/pages/statistiques/Chart.tsx
+++ b/site/source/pages/statistiques/Chart.tsx
@@ -1,5 +1,5 @@
 import { formatValue } from 'publicodes'
-import { ComponentProps, ReactElement, ReactNode, useContext } from 'react'
+import { ComponentProps, ReactElement, ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
 	Area,
@@ -16,7 +16,7 @@ import {
 	XAxis,
 	YAxis,
 } from 'recharts'
-import { ThemeContext } from 'styled-components'
+import { useTheme } from 'styled-components'
 
 import { StyledLegend } from '@/components/charts/PagesCharts'
 import { Strong } from '@/design-system/typography'
@@ -77,7 +77,7 @@ export default function VisitsChart({
 }: VisitsChartProps) {
 	const { t } = useTranslation()
 	const [darkMode] = useDarkMode()
-	const { colors } = useContext(ThemeContext)
+	const { colors } = useTheme()
 	if (!data.length) {
 		return null
 	}