make color theme-based for custom elements

src/pages/article/show.tsx

@@ -131,8 +131,14 @@ export const ArticleShow = () => {
             ) : linkedMedia.length > 0 ? (
               linkedMedia.map((mediaItem) => (
                 <Grid key={mediaItem.id}>
-                  <Card sx={{backgroundColor: '#1e1e1e', borderRadius: 2}}>
+                  <Card
-                    <CardMedia component="img" height="200" image={`${BACKEND_URL}/media/${mediaItem?.id}/download`} alt={mediaItem?.filename} sx={{objectFit: 'contain', backgroundColor: '#2e2e2e'}} />
+                    sx={{
+                      marginBottom: '8px',
+                      borderRadius: 2,
+                      border: (theme) => `2px solid ${theme.palette.divider}`,
+                    }}
+                  >
+                    <CardMedia component="img" height="200" image={`${BACKEND_URL}/media/${mediaItem?.id}/download`} alt={mediaItem?.filename} sx={{objectFit: 'contain'}} />
                     <CardContent>
                       {mediaFields.map(({label, data}) => (
                         <Typography key={data} variant="body2" color="textSecondary">

src/pages/sight/show.tsx

@@ -127,7 +127,15 @@ export const SightShow = () => {
               <Typography>Загрузка статей...</Typography>
             ) : linkedArticles.length > 0 ? (
               linkedArticles.map((article) => (
-                <Box key={article.id} sx={{border: '2px solid #dddddd25', padding: '14px', marginBottom: '8px', borderRadius: 2}}>
+                <Box
+                  key={article.id}
+                  sx={{
+                    marginBottom: '8px',
+                    padding: '14px',
+                    borderRadius: 2,
+                    border: (theme) => `2px solid ${theme.palette.divider}`,
+                  }}
+                >
                   <Stack gap={1}>
                     <Typography variant="h5">
                       <strong>{article.heading}</strong>

src/pages/station/show.tsx

@@ -136,7 +136,15 @@ export const StationShow = () => {
               <Typography>Загрузка достопримечательностей...</Typography>
             ) : linkedSights.length > 0 ? (
               linkedSights.map((sight, index) => (
-                <Box key={index} sx={{border: '2px solid #dddddd25', padding: '14px', marginBottom: '8px', borderRadius: 2}}>
+                <Box
+                  key={index}
+                  sx={{
+                    marginBottom: '8px',
+                    padding: '14px',
+                    borderRadius: 2,
+                    border: (theme) => `2px solid ${theme.palette.divider}`,
+                  }}
+                >
                   <Stack gap={0.5}>
                     {sightFields.map(({label, data}) => (
                       <Typography key={data}>