src/: allow locale-specific styles

src/css/themes/leaf.scss

@@ -31,3 +31,8 @@
     color: var(--white);
   }
 }
+
+.surah .leaf.theme.ar {
+  direction: rtl;
+  font-family: "Vazirmatn Regular";
+}

src/css/themes/moon.scss

@@ -33,3 +33,8 @@
     font-weight: bold;
   }
 }
+
+.surah .leaf.theme.ar {
+  direction: rtl;
+  font-family: "Vazirmatn Regular";
+}

src/js/pages/TheSurahPage.tsx

@@ -31,7 +31,7 @@ function TheSurahPage ({ locale, surahId }: PageProps) {
   }, [surahIsLoaded]);
 
   return (
-    <div className={classNames(theme, 'theme')}>
+    <div className={classNames(theme, locale, 'theme')}>
       <div className='flex-image'>
         <div className='image' />
       </div>