добавлена поддержка темной темы

2024-12-15 20:26:03 +03:00
parent f8f6fb991a
commit 5aa97a5255
18 changed files with 409 additions and 106 deletions
@@ -0,0 +1,60 @@
+import styled from '@emotion/styled';
+import TextField from '@mui/material/TextField';
+
+export const AboutStyled = styled(TextField)`  
+  & .MuiInputBase-input {
+      color: var(--tg-theme-text-color,rgba(0, 0, 0, 0.6));
+    }
+
+    & .MuiFormLabel-root {
+      color: var(--tg-theme-text-color, rgba(0, 0, 0, 0.6));
+    }  
+
+    & .Mui-focused .MuiFormLabel-root {
+      color: var(--tg-theme-label-focus-color, #0066ff);
+    }
+
+    
+    & .MuiOutlinedInput-root {
+      fieldset {
+        border-color: var(--tg-theme-border-color, #cccccc);
+      }
+
+      &:hover fieldset {
+        border-color: var(--tg-theme-border-hover, #888888);
+      }
+
+      &.Mui-focused fieldset {
+        border-color: var(--tg-theme-border-focused, #0066ff);
+      }
+        
+    }
+  
+  @media (prefers-color-scheme: dark) {
+    & .MuiInputBase-input {
+      color: var(--tg-theme-text-color-dark, #ffffff);
+    }
+
+    & .MuiFormLabel-root {
+      color: var(--tg-theme-label-color-dark, #ffffff);
+    }
+
+    & .Mui-focused .MuiFormLabel-root {
+      color: var(--tg-theme-label-focus-color-dark, #0066ff);
+    }
+
+    & .MuiOutlinedInput-root {
+      fieldset {
+        border-color: var(--tg-theme-border-color-dark, #ffffff);
+      }
+
+      &:hover fieldset {
+        border-color: var(--tg-theme-border-hover-dark, #777777);
+      }
+
+      &.Mui-focused fieldset {
+        border-color: var(--tg-theme-border-focused-dark, #0066ff); 
+      }
+    }
+  }
+`;
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { AboutStyled } from './index.style';
+
+const About = ({rows, id, label, name, placeholder="Введите текст...", className = null}): React.ReactElement => {
+    return (
+        <AboutStyled
+            fullWidth
+            multiline
+            rows={rows}        
+            id={id}
+            label={label}
+            name={name}
+            placeholder={placeholder}
+            className={className}
+        />
+    );
+}
+
+export default About;