enahcne(style):刷新样式定义。
This commit is contained in:
		@@ -1,21 +1,33 @@
 | 
			
		||||
import { css } from "@emotion/react";
 | 
			
		||||
import { css, Theme } from "@emotion/react";
 | 
			
		||||
import { mq } from "./style-predefines";
 | 
			
		||||
 | 
			
		||||
export const globalStyle = (theme) =>
 | 
			
		||||
  css({
 | 
			
		||||
    [":root"]: {
 | 
			
		||||
      colorScheme: "light dark",
 | 
			
		||||
      fontFamily: "Inter, Avenir, Helvetica, Arial, sans-serif",
 | 
			
		||||
      fontSize: 0.625,
 | 
			
		||||
      fontSynthesis: "none",
 | 
			
		||||
      textRendering: "optimizeLegibility",
 | 
			
		||||
      WebkitFontSmoothing: "antialiased",
 | 
			
		||||
      MozOsxFontSmoothing: "grayscale",
 | 
			
		||||
      WebkitTextSizeAdjust: "100%",
 | 
			
		||||
      backgroundColor: theme.backgroundColor.light,
 | 
			
		||||
      overflow: "hidden",
 | 
			
		||||
      [mq.dark]: {
 | 
			
		||||
        backgroundColor: theme.backgroundColor.dark,
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
  });
 | 
			
		||||
export const globalStyle = (theme: Theme) => css`
 | 
			
		||||
  :root {
 | 
			
		||||
    color-scheme: light dark;
 | 
			
		||||
    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
 | 
			
		||||
    font-size: 0.625;
 | 
			
		||||
    font-synthesis: none;
 | 
			
		||||
    text-rendering: optimizeLegibility;
 | 
			
		||||
    -webkit-font-smoothing: antialiased;
 | 
			
		||||
    -moz-osx-font-smoothing: grayscale;
 | 
			
		||||
    -webkit-text-size-adjust: 100%;
 | 
			
		||||
    color: ${theme.foregroundColor.light};
 | 
			
		||||
    background-color: ${theme.backgroundColor.light};
 | 
			
		||||
    overflow: hidden;
 | 
			
		||||
    height: 100vh;
 | 
			
		||||
    width: 100vw;
 | 
			
		||||
    ${mq.dark} {
 | 
			
		||||
      color: ${theme.foregroundColor.dark};
 | 
			
		||||
      background-color: ${theme.backgroundColor.dark};
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  body {
 | 
			
		||||
    height: inherit;
 | 
			
		||||
    width: inherit;
 | 
			
		||||
    overflow: hidden;
 | 
			
		||||
    #root {
 | 
			
		||||
      height: inherit;
 | 
			
		||||
      width: inherit;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
`;
 | 
			
		||||
 
 | 
			
		||||
@@ -24,12 +24,12 @@ export const theme: Partial<Theme> = {
 | 
			
		||||
  white: "#ffffff",
 | 
			
		||||
  black: "#000000",
 | 
			
		||||
  foregroundColor: {
 | 
			
		||||
    light: chroma.hsl(0, 0, 0.06).hex(),
 | 
			
		||||
    dark: chroma.hsl(0, 0, 0.88).hex(),
 | 
			
		||||
    light: chroma.hsl(0, 0, 0.12).hex(),
 | 
			
		||||
    dark: chroma.hsl(0, 0, 0.82).hex(),
 | 
			
		||||
  },
 | 
			
		||||
  backgroundColor: {
 | 
			
		||||
    light: chroma.hsl(0, 0, 0.96).hex(),
 | 
			
		||||
    dark: chroma.hsl(0, 0, 0.18).hex(),
 | 
			
		||||
    light: chroma.hsl(0, 0, 0.94).hex(),
 | 
			
		||||
    dark: chroma.hsl(0, 0, 0.098).hex(),
 | 
			
		||||
  },
 | 
			
		||||
  successColor: {
 | 
			
		||||
    light: colors.green[5],
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user