3 files changed, 26 insertions, 13 deletions

diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx
index 18dc2a8..581563b 100644
--- a/packages/renderer/src/components/ThemeProvider.tsx
+++ b/packages/renderer/src/components/ThemeProvider.tsx
@@ -30,10 +30,11 @@ import { useStore } from './StoreProvider';
 export default observer(
   ({ children }: { children: JSX.Element | JSX.Element[] }) => {
     const {
-      shared: { shouldUseDarkColors },
+      shared: { shouldUseDarkColors, writingDirection },
     } = useStore();
 
     const theme = createTheme({
+      direction: writingDirection,
       palette: {
         mode: shouldUseDarkColors ? 'dark' : 'light',
       },
diff --git a/packages/renderer/src/i18n/loadRendererLoalization.ts b/packages/renderer/src/i18n/loadRendererLoalization.ts
index b078aeb..4d7b84a 100644
--- a/packages/renderer/src/i18n/loadRendererLoalization.ts
+++ b/packages/renderer/src/i18n/loadRendererLoalization.ts
@@ -20,7 +20,7 @@
 
 import { FALLBACK_LOCALE, SophieRenderer } from '@sophie/shared';
 import i18next from 'i18next';
-import { autorun } from 'mobx';
+import { reaction } from 'mobx';
 import { addDisposer } from 'mobx-state-tree';
 import { initReactI18next } from 'react-i18next';
 
@@ -68,17 +68,20 @@ export default function loadRendererLocalization(
     }
 
     await i18n.init();
-    const disposeChangeLanguage = autorun(() => {
-      const {
-        shared: { language },
-      } = store;
-      if (i18n.language !== language) {
-        log.debug('Setting language', language);
-        i18n.changeLanguage(language).catch((error) => {
-          log.error('Failed to change language', error);
-        });
-      }
-    });
+
+    const disposeChangeLanguage = reaction(
+      () => store.shared.language,
+      (languageToSet) => {
+        if (i18n.language !== languageToSet) {
+          i18n.changeLanguage(languageToSet).catch((error) => {
+            log.error('Failed to change language', error);
+          });
+        }
+      },
+      {
+        fireImmediately: true,
+      },
+    );
     addDisposer(store, disposeChangeLanguage);
   };
 
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 37116db..60ef714 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -56,6 +56,15 @@ if (isDevelopment) {
 
 loadRendererLocalization(store, ipc, isDevelopment);
 
+const disposeSetHtmlLang = autorun(() => {
+  const {
+    shared: { language, writingDirection },
+  } = store;
+  document.documentElement.lang = language;
+  document.documentElement.dir = writingDirection;
+});
+addDisposer(store, disposeSetHtmlLang);
+
 const disposeSetTitle = autorun(() => {
   const titlePrefix = isDevelopment ? '[dev] ' : '';
   const serviceTitle = store.settings.selectedService?.title;