fix prefers-color-scheme dark

src/Article.tsx

@@ -16,11 +16,6 @@ const useStyles = createStyles((theme) => ({
     [theme.fn.smallerThan('xs')]: {
       fontSize: rem(28),
     },
-  },
-
-  heading2: {
-    color: theme.colorScheme === 'dark' ? theme.white : theme.black,
-    paddingTop: rem(11)
   }
 }));
 
@@ -32,13 +27,13 @@ export function Article() {
   const articleData = useLoaderData();
   const { classes } = useStyles();
   const article = articleData.data[0].attributes
-  console.log(articleData)
+  // console.log(articleData)
 
   const generateCarousel = () => {
     if (articleData.data[0].attributes.carousel.data) {
       return (
         <Carousel slideSize="70%" mih={200} mah={500} slideGap="md" loop>
-          {articleData.data[0].attributes.carousel.data.map(image => <Carousel.Slide><Image fit='fill' mih={200} mah={500} mx="auto" radius="md" src={`https://strapi.litmusmap.ru${image.attributes.url}`} alt="Random image" /></Carousel.Slide>)}
+          {articleData.data[0].attributes.carousel.data.map(image => <Carousel.Slide key={image.attributes.url}><Image fit='fill' mih={200} mah={500} mx="auto" radius="md" src={`https://strapi.litmusmap.ru${image.attributes.url}`} alt="Random image" /></Carousel.Slide>)}
         </Carousel>
       )
     }
@@ -49,7 +44,7 @@ export function Article() {
       <Title order={1} className={classes.title}>
         {article.title}
       </Title>
-      <TypographyStylesProvider>
+      <TypographyStylesProvider sx={{ '@media (prefers-color-scheme: dark)': { color: "#C1C2C5" } }}>
         <Markdown>{article.content}</Markdown>
       </TypographyStylesProvider>
       {generateCarousel()}