feat: better dark theme for settings dialog

- input calendar: follow to the current theme;
- better modal contrast.

src/components/Modal/styles.ts

@@ -1,6 +1,6 @@
 import { css, type CSSProperties } from '@linaria/core'
 import { darken, rgba } from 'polished'
-import { black, dark1, lightGrey, white } from '@/theme/colors'
+import { black, dark2, lightGrey, white } from '@/theme/colors'
 import { darkScheme } from '@/theme/media'
 
 const overlayBackground = (opacity = 1): CSSProperties => ({
@@ -53,8 +53,8 @@ export const dialog = css`
   color: ${black};
 
   @media ${darkScheme} {
-    background: ${dark1};
-    box-shadow: 0 0 0.8rem 0 ${rgba(white, 0.48)};
+    background: ${dark2};
+    box-shadow: 0 0 0.8rem 0 ${rgba(black, 0.6)};
     color: ${white};
   }
 

src/components/SettingsDialog/components/SettingsForm/styles.ts

@@ -33,6 +33,14 @@ export const input = css`
     background: ${darken(0.85, white)};
     border-color: ${white};
   }
+
+  &[type='date'] {
+    color-scheme: light;
+
+    @media ${darkScheme} {
+      color-scheme: dark;
+    }
+  }
 `
 
 export const button = css`

src/theme/__snapshots__/theme.test.ts.snap

@@ -4,6 +4,7 @@ exports[`colors 1`] = `
 {
   "black": "#000000",
   "dark1": "#202124",
+  "dark2": "#2c2c2c",
   "lightGrey": "#eeeeee",
   "white": "#ffffff",
 }

src/theme/colors.ts

@@ -1,4 +1,5 @@
 export const black = '#000000'
 export const dark1 = '#202124'
+export const dark2 = '#2c2c2c'
 export const lightGrey = '#eeeeee'
 export const white = '#ffffff'