styled-components#DefaultTheme TypeScript Examples

The following examples show how to use styled-components#DefaultTheme. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: utils.ts From metaflow-ui with Apache License 2.0

7 votes

export function lineColor(theme: DefaultTheme, grayed: boolean, state: string, isFirst: boolean): string {
  if (grayed) {
    return '#c7c7c7';
  } else {
    switch (state) {
      case 'completed':
      case 'ok':
        return !isFirst ? lighten(0.3, theme.color.bg.red) : theme.color.bg.green;
      case 'running':
        return theme.color.bg.greenLight;
      case 'pending':
        return theme.color.bg.yellow;
      case 'failed':
        return !isFirst ? lighten(0.3, theme.color.bg.red) : theme.color.bg.red;
      case 'unknown':
        return !isFirst ? lighten(0.3, theme.color.bg.dark) : theme.color.bg.dark;
      default:
        return lighten(0.5, theme.color.bg.dark);
    }
  }
}

Example #2

Source File: theme.ts From nlw06-letmeask with MIT License

6 votes

dark: DefaultTheme = {
  isLight:false,
  colors: {
    bg: {
      body: "#111111 ",
      modal: "#29292E",
      input:"#2d2d2d",
    },
    textColor: {
      primary: "#FEFEFE",
      details: "#F8F8F8",
      input:"#FEFEFE",
    },
    black: "#29292E",
    shadow: "#050206",
    purple: {
      white:"#e3d8ff",
      light: "#835AFD",
      dark: "#835afd70",
    },
    google:'#EA4335',
    danger: "#E73F5D",
    gray: {
      dark: "#737380",
      medium: "#A8A8B3",
      light: "#DBDCDD",
    },
    white: {
      medium: "#F8F8F8",
      light: "#FEFEFE",
    },
    pink: {
      medium: "#E559F9",
      light: "#D67EE2",
    }
  },
  ...styles,
}

Example #3

Source File: CurvedSvg.tsx From glide-frontend with GNU General Public License v3.0

6 votes

sharedStyles = (theme: DefaultTheme, clipPath: string, clipFill?: ClipFill) => css`
  width: 100%;
  height: 20px;
  clip-path: url(${clipPath});

  background: ${() => {
    if (theme.isDark) {
      return clipFill?.dark || clipFill?.light || theme.colors.background
    }
    return clipFill?.light || theme.colors.background
  }};

  & svg {
    display: block;
  }
`

Example #4

Source File: CardHeader.tsx From vvs-ui with GNU General Public License v3.0

6 votes

getBackgroundColor = (theme: DefaultTheme, status: Status) => {
  switch (status) {
    case 'calculating':
      return theme.colors.gradients.cardHeader
    case 'live':
      return 'transparent'
    case 'canceled':
      return theme.colors.warning
    case 'next':
      return theme.colors.secondary
    case 'expired':
    case 'soon':
    default:
      return theme.colors.cardBorder
  }
}

Example #5

Source File: App.tsx From vagasExplorer with MIT License

6 votes

App: React.FC = () => {
  const [theme, setTheme] = usePeristedState<DefaultTheme>('theme', light);

  const toggleTheme = () => {
    setTheme(theme.title === 'light' ? dark : light);
  };

  return (
    <ThemeProvider theme={theme}>
      <BrowserRouter>
        <Routes toggleTheme={toggleTheme} />
        <GlobalStyle />
      </BrowserRouter>
    </ThemeProvider>
  );
}

Example #6

Source File: themes.ts From nyxo-app with GNU General Public License v3.0

6 votes

lightTheme: DefaultTheme = {
  mode: 'light',
  PRIMARY_BACKGROUND_COLOR: '#F1F1F1',
  SECONDARY_BACKGROUND_COLOR: '#FFFFFF',
  SECONDARY_BACKGROUND_COLOR_TRANSPARENT: 'rgba(255,255,255,0.3)',

  PRIMARY_TEXT_COLOR: '#202125',
  SECONDARY_TEXT_COLOR: '#5e6267',
  ICON_COLOR: '#f7f8fb',
  PRIMARY_BUTTON_COLOR: colors.darkBlue,
  SECONDARY_BUTTON_COLOR: colors.darkBlue,
  HAIRLINE_COLOR: '#C9C9CB',
  GRADIENT: [
    'rgba(255,255,255,0)',
    'rgba(255,255,255,0)',
    'rgba(255,255,255,1)'
  ],
  SHADOW: `1px 1px 5px rgba(32, 33, 37, 0.1)`,
  accent: colors.darkBlue,

  FONT_REGULAR: 'Montserrat-Regular',
  FONT_MEDIUM: 'Montserrat-Medium',
  FONT_BOLD: 'Montserrat-Bold',

  primaryBoneColer: '#E1E9EE',
  SecondaryBoneColor: '#F2F8FC'
}

Example #7

Source File: themes.ts From nyxo-website with MIT License

6 votes

lightTheme: DefaultTheme = {
  PRIMARY_BACKGROUND_COLOR: "#F6F6F9",
  SECONDARY_BACKGROUND_COLOR: "#FFFFFF",
  SECONDARY_BACKGROUND_COLOR_TRANSPARENT: "rgba(255,255,255,0.3)",

  titleColor: "hsl(255deg, 85%, 30%)",
  errorColor: "#e71934",
  PRIMARY_TEXT_COLOR: "#202125",
  SECONDARY_TEXT_COLOR: "#5e6267",
  ICON_COLOR: "#f7f8fb",
  PRIMARY_BUTTON_COLOR: colors.radiantBlue,
  SECONDARY_BUTTON_COLOR: colors.radiantBlue,
  HAIRLINE_COLOR: "#e4e8eb",
  GRADIENT: [
    "rgba(246,246,249,0)",
    "rgba(246,246,249,0)",
    "rgba(246,246,249,1)",
  ],
  SHADOW: `1px 1px 5px rgba(32, 33, 37, 0.1)`,

  FONT_REGULAR: fonts.regular,
  FONT_MEDIUM: fonts.medium,
  FONT_BOLD: fonts.bold,
}

Example #8

Source File: index.tsx From skeleton-web3-interface with GNU General Public License v3.0

6 votes

export function theme(darkMode: boolean): DefaultTheme {
  return {
    ...colors(darkMode),

    grids: {
      sm: 8,
      md: 12,
      lg: 24
    },

    //shadows
    shadow1: darkMode ? '#000' : '#2F80ED',

    // media queries
    mediaWidth: mediaWidthTemplates,

    // css snippets
    flexColumnNoWrap: css`
      display: flex;
      flex-flow: column nowrap;
    `,
    flexRowNoWrap: css`
      display: flex;
      flex-flow: row nowrap;
    `
  }
}

Example #9

Source File: theme.ts From nlw06-letmeask with MIT License

6 votes

light: DefaultTheme = {
  isLight: true,
  colors: {
    bg: {
      body: "#F8F8F8",
      modal: "#F8F8F8",
      input:"#fff",
    },
    textColor: {
      primary: "#29292E",
      details: "#737380",
      input:"#835AFD",
    },
    black: "#29292E",
    shadow: "#050206",
    purple: {
      white:"#e3d8ff",
      light: "#835AFD",
      dark: "#835afd99",
    },
    google:'#EA4335',
    danger: "#E73F5D",
    gray: {
      dark: "#737380",
      medium: "#A8A8B3",
      light: "#DBDCDD",
    },
    white: {
      medium: "#F8F8F8",
      light: "#FEFEFE",
    },
    pink: {
      medium: "#E559F9",
      light: "#D67EE2",
    }
  },
  ...styles,
}

Example #10

Source File: NotificationContent.tsx From anchor-web-app with Apache License 2.0

6 votes

useSwitchStyle = makeStyles((theme: DefaultTheme) => ({
  root: {
    width: 40,
    height: 22,
    padding: 0,
    margin: 0,
  },
  switchBase: {
    'padding': 1,
    '&$checked': {
      'transform': 'translateX(18px)',
      'color': theme.palette.common.white,
      '& + $track': {
        backgroundColor: theme.colors.positive,
        opacity: 1,
        border: 'none',
      },
    },
    '&$focusVisible $thumb': {
      color: theme.colors.positive,
      border: '6px solid #fff',
    },
  },
  thumb: {
    width: 20,
    height: 20,
    color: theme.palette.common.white,
  },
  track: {
    borderRadius: 26 / 2,
    backgroundColor: theme.dimTextColor,
    opacity: 1,
    transition: theme.transitions.create(['background-color']),
  },
  checked: {},
  focusVisible: {},
}))

Example #11

Source File: index.ts From netflix-clone with GNU General Public License v3.0

6 votes

defaultTheme: DefaultTheme = {
  title: 'default',

  colors: {
    primary: '#FFF',
    secondary: '#828386',
    tertiary: '#b9bbbe',

    red: '#E50914',
    green: '#46d369',
    blue: '#6e86d6',
    yellow: '#f9a839',

    body: '#141414',
  },
}

Example #12

Source File: index.tsx From luaswap-interface with GNU General Public License v3.0

6 votes

export function theme(darkMode: boolean): DefaultTheme {
  return {
    ...colors(),

    grids: {
      sm: 8,
      md: 12,
      lg: 24
    },
    // Spacing
    spacing: {
      1: 4,
      2: 8,
      3: 16,
      4: 24,
      5: 32,
      6: 48,
      7: 64
    },
    // siteWidth
    siteWidth: 1200,
    //shadows
    shadow1: '#000',

    // media queries
    mediaWidth: mediaWidthTemplates,

    // css snippets
    flexColumnNoWrap: css`
      display: flex;
      flex-flow: column nowrap;
    `,
    flexRowNoWrap: css`
      display: flex;
      flex-flow: row nowrap;
    `
  }
}

Example #13

Source File: theme.tsx From lesesalen with MIT License

6 votes

theme: DefaultTheme = {
  colors: {
    backgroundColor: "#f5f5f5",
    red: "#ff0000",
    darkRed: "#e50003",
    blue: "#008bf8",
    green: "#00e557",
    gray: "#161616",
    lightGray: "#f1f1f1",
  },
}

Example #14

Source File: theme.ts From dh-web with GNU General Public License v3.0

6 votes

DarkTheme: DefaultTheme = {
    borderRadius: "8px",
    palette: {
        primary: {
            100: "#dee3ea",
            200: "#b2bdcd",
            300: "#5d7290", // Searchbar text color
            400: "#5d7290", // Items hover
            500: "#5d7290", // "+" hover
            600: "#323d4d", // Separators and +
            700: "#242c37", // Bg (Explore more rooms) + hover
            800: "#151a21", // Bg boxes
            900: "#0b0e11" // Main bg
        },
        accent: {
            default: "#fd4d4d",
            disabled: "#f5bfbf",
            hover: "#fd6868"
        },
        secondary: {
            default: "#5575e7",
            washedOut: "#879eed"
        },
        buttonText: "#fff"
    },
    animation: {
        micro: "180ms"
    },
    breakpoints: {
        one: 800,
        two: 1265,
        three: 1336
    }
}

Example #15

Source File: theme.ts From mStable-apps with GNU Lesser General Public License v3.0

6 votes

lightTheme: DefaultTheme = {
  color: colorTheme(false),
  spacing: Spacing,
  size: Size,
  fontSize: FontSize,
  viewportWidth: ViewportWidth,
  mixins,
  isLight: true,
}

Example #16

Source File: index.tsx From sushiswap-exchange with GNU General Public License v3.0

6 votes

export function theme(darkMode: boolean): DefaultTheme {
  return {
    ...colors(darkMode),

    grids: {
      sm: 8,
      md: 12,
      lg: 24
    },

    //shadows
    shadow1: darkMode ? '#000' : '#2F80ED',

    // media queries
    mediaWidth: mediaWidthTemplates,

    // css snippets
    flexColumnNoWrap: css`
      display: flex;
      flex-flow: column nowrap;
    `,
    flexRowNoWrap: css`
      display: flex;
      flex-flow: row nowrap;
    `
  }
}

Example #17

Source File: index.tsx From forward.swaps with GNU General Public License v3.0

6 votes

export function theme(darkMode: boolean): DefaultTheme {
  return {
    ...colors(darkMode),

    grids: {
      sm: 8,
      md: 12,
      lg: 24
    },

    //shadows
    shadow1: darkMode ? '#000' : '#2F80ED',

    // media queries
    mediaWidth: mediaWidthTemplates,

    // css snippets
    flexColumnNoWrap: css`
      display: flex;
      flex-flow: column nowrap;
    `,
    flexRowNoWrap: css`
      display: flex;
      flex-flow: row nowrap;
    `
  }
}

Example #18

Source File: styles.tsx From pancake-toolkit with GNU General Public License v3.0

6 votes

getTextColor = ({
  $isActive,
  disabled,
  theme,
}: StyledDropdownMenuItemProps & { theme: DefaultTheme; $isActive: boolean }) => {
  if (disabled) return theme.colors.textDisabled;
  if ($isActive) return theme.colors.secondary;

  return theme.colors.textSubtle;
}

Example #19

Source File: index.test.tsx From react-boilerplate-cra-template with MIT License

6 votes

renderWithTheme = (theme?: DefaultTheme) => {
  return render(
    <MemoryRouter>
      <Link to="/test" theme={theme || themes.light}>
        HeaderLink
      </Link>
    </MemoryRouter>,
  );
}

Example #20

Source File: styles.tsx From vvs-ui with GNU General Public License v3.0

6 votes

getBackgroundColor = ({
  theme,
  betPosition,
  isNext,
  isLive,
  hasEntered,
}: RoundResultBoxProps & { theme: DefaultTheme }) => {
  if (isNext) {
    return 'linear-gradient(180deg, #53DEE9 0%, #7645D9 100%)'
  }

  if (hasEntered || isLive) {
    return theme.colors.secondary
  }

  switch (betPosition) {
    case BetPosition.BULL:
      return theme.colors.success
    case BetPosition.BEAR:
      return theme.colors.failure
    case BetPosition.HOUSE:
      return theme.colors.textDisabled
    default:
      return theme.colors.cardBorder
  }
}

Example #21

Source File: ConvertSymbols.tsx From anchor-web-app with Apache License 2.0

6 votes

colors = (theme: DefaultTheme) => {
  if (theme.palette.type === 'light') {
    return css`
      --color-background: white;
      --color-primitive: #38d938;
      --color-dim: #c2c2c2;
      --color-text: white;
    `;
  } else {
    return css`
      --color-background: #0c1226;
      --color-primitive: ${theme.colors.positive};
      --color-dim: #3b4350;
      --color-text: white;
    `;
  }
}

Example #22

Source File: styles.tsx From vvs-ui with GNU General Public License v3.0

6 votes

getTextColor = ({
  $isActive,
  disabled,
  theme,
}: StyledDropdownMenuItemProps & { theme: DefaultTheme; $isActive: boolean }) => {
  if (disabled) return theme.colors.textDisabled;
  if ($isActive) return theme.colors.primary;

  return theme.colors.textSubtle;
}

Example #23

Source File: darkTheme.ts From anchor-web-app with Apache License 2.0

6 votes

darkTheme: DefaultTheme = {
  ...defaultDarkTheme,
  // VARIABLES (SHOULD BE CHANGED)
  textColor: WHITE,
  dimTextColor: DARK_GRAY_100,

  colors: {
    positive: GREEN_100,
    negative: RED_100,
    warning: YELLOW_100,
    primary: GREEN_100,
    primaryDark: GREEN_100,
    secondary: GREEN_100,
    secondaryDark: GREEN_100,
  },

  header: {
    backgroundColor: BLACK,
    textColor: GREEN_200,
  },

  messageBox: {
    borderColor: GREEN_200,
    backgroundColor: GREEN_300,
    textColor: GREEN_400,
    linkColor: GREEN_200,
  },

  chart: [
    GREEN_200,
    GREEN_500,
    GREEN_600,
    GREEN_700,
    GREEN_800,
    GREEN_900,
    GRAY_200,
  ],
}

Example #24

Source File: default.ts From gobarber-mobile with MIT License

6 votes

defaultTheme: DefaultTheme = {
  title: 'default',

  colors: {
    background: '#312e38',
    white: '#f4ede8',
    orange: '#FF9000',
    grayHard: '#666360',
    gray: '#999591',
    inputs: '#232129',
    shape: '#3E3B47',
    blackMedium: '#28262E',

    error: '#c53030',
  },

  fonts: {
    regular: 'RobotoSlab-Regular',
    medium: 'RobotoSlab-Medium',
  },
}

Example #25

Source File: index.tsx From cuiswap with GNU General Public License v3.0

6 votes

export function theme(darkMode: boolean): DefaultTheme {
  return {
    ...colors(darkMode),

    grids: {
      sm: 8,
      md: 12,
      lg: 24
    },

    //shadows
    shadow1: darkMode ? '#000' : '#2F80ED',

    // media queries
    mediaWidth: mediaWidthTemplates,

    // css snippets
    flexColumnNoWrap: css`
      display: flex;
      flex-flow: column nowrap;
    `,
    flexRowNoWrap: css`
      display: flex;
      flex-flow: row nowrap;
    `
  }
}

Example #26

Source File: ThemeStyles.ts From taskcafe with MIT License

6 votes

theme: DefaultTheme = {
  borderRadius: {
    primary: '3x',
    alternate: '6px',
  },
  colors: {
    multiColors: ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'],
    primary: 'rgb(115, 103, 240)',
    secondary: 'rgb(216, 93, 216)',
    alternate: 'rgb(65, 69, 97)',
    success: 'rgb(40, 199, 111)',
    danger: 'rgb(234, 84, 85)',
    warning: 'rgb(255, 159, 67)',
    dark: 'rgb(30, 30, 30)',
    text: {
      primary: 'rgb(194, 198, 220)',
      secondary: 'rgb(255, 255, 255)',
    },
    border: 'rgb(65, 69, 97)',
    bg: {
      primary: 'rgb(16, 22, 58)',
      secondary: 'rgb(38, 44, 73)',
    },
  },
}

Example #27

Source File: themes.ts From SpaceEye with MIT License

6 votes

DarkTheme: DefaultTheme = {
    colors: {
        background: 'rgb(34, 34, 34)',
        headerBackground: 'rgb(30, 30, 30)',
        foreground: 'white',
        borderHighlight: 'rgb(0, 80, 196)',
        main: '',
        secondary: ''
    },

    elevation: {
        low: {
            backgroundColor: 'rgb(41, 41, 41)',
            boxShadow: '0 3px 10px rgba(0, 0, 0, 0.3)'
        },
        medium: {
            backgroundColor: 'test',
            boxShadow: 'test'
        },
        high: {
            backgroundColor: 'test',
            boxShadow: 'test'
        }
    }
}

Example #28

Source File: index.tsx From metaflow-ui with Apache License 2.0

6 votes

getSize = (p: {
  theme: DefaultTheme;
  size?: number;
  borderWidth?: number;
  sm?: boolean;
  md?: boolean;
  lg?: boolean;
}) =>
  p.size && p.borderWidth
    ? {
        size: p.size,
        borderWidth: p.borderWidth,
      }
    : p.sm
    ? p.theme.spinner.sizes.sm
    : p.md
    ? p.theme.spinner.sizes.md
    : p.lg
    ? p.theme.spinner.sizes.lg
    : p.theme.spinner.sizes.sm

Example #29

Source File: index.tsx From interface-v2 with GNU General Public License v3.0

6 votes

export function theme(darkMode: boolean): DefaultTheme {
  return {
    ...colors(darkMode),

    grids: {
      sm: 8,
      md: 12,
      lg: 24,
    },

    //shadows
    shadow1: darkMode ? '#000' : '#2F80ED',

    // media queries
    mediaWidth: mediaWidthTemplates,

    // css snippets
    flexColumnNoWrap: css`
      display: flex;
      flex-flow: column nowrap;
    `,
    flexRowNoWrap: css`
      display: flex;
      flex-flow: row nowrap;
    `,
  };
}