style: Modify style.

Author: jaywcjlove

src/style/index.less

@@ -2,7 +2,8 @@
 
 @media (prefers-color-scheme: dark) {
   .@{w-textarea} {
-    color-scheme: dark;
+    --color-fg-default: #c9d1d9;
+    --color-canvas-subtle: #161b22;
     --color-prettylights-syntax-comment: #8b949e;
     --color-prettylights-syntax-entity-tag: #7ee787;
     --color-prettylights-syntax-entity: #d2a8ff;
@@ -16,7 +17,8 @@
 
 @media (prefers-color-scheme: light) {
   .@{w-textarea} {
-    color-scheme: light;
+    --color-fg-default: #24292f;
+    --color-canvas-subtle: #161b22;
     --color-prettylights-syntax-comment: #6e7781;
     --color-prettylights-syntax-entity-tag: #116329;
     --color-prettylights-syntax-entity: #8250df;
@@ -31,7 +33,8 @@
 [data-color-mode*='dark'] .@{w-textarea},
 [data-color-mode*='dark'] .@{w-textarea}-var,
 body[data-color-mode*='dark'] {
-  color-scheme: dark;
+  --color-fg-default: #c9d1d9;
+  --color-canvas-subtle: #161b22;
   --color-prettylights-syntax-comment: #8b949e;
   --color-prettylights-syntax-entity-tag: #7ee787;
   --color-prettylights-syntax-entity: #d2a8ff;
@@ -45,7 +48,8 @@ body[data-color-mode*='dark'] {
 [data-color-mode*='light'] .@{w-textarea},
 [data-color-mode*='light'] .@{w-textarea}-var,
 body[data-color-mode*='light'] {
-  color-scheme: light;
+  --color-fg-default: #24292f;
+  --color-canvas-subtle: #f6f8fa;
   --color-prettylights-syntax-comment: #6e7781;
   --color-prettylights-syntax-entity-tag: #116329;
   --color-prettylights-syntax-entity: #8250df;
@@ -59,6 +63,9 @@ body[data-color-mode*='light'] {
 .@{w-textarea} {
   font-family: inherit;
   font-size: 12px;
+  color: var(--color-fg-default);
+  background-color: var(--color-canvas-subtle);
+  color: var(--color-fg-default);
   &-text,
   &-preview {
     min-height: 16px;

website/App.tsx

@@ -68,7 +68,6 @@ const App: React.FC = () => {
           minHeight={80}
           placeholder={`Please enter ${(language || '').toLocaleUpperCase()} code.`}
           style={{
-            backgroundColor: 'var(--color-canvas-subtle)',
             fontSize: 14,
             fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
           }}