styled-components DefaultTheme TypeScript Examples

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);
    }
  }
}

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,
}

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;
  }
`

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
  }
}

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>
  );
}

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'
}

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,
}

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;
    `
  }
}

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,
}

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: {},
}))

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',
  },
}

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;
    `
  }
}

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",
  },
}

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
    }
}

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,
}

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;
    `
  }
}

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;
    `
  }
}

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;
}

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>,
  );
}

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
  }
}

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;
    `;
  }
}

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;
}

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,
  ],
}

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',
  },
}

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;
    `
  }
}

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)',
    },
  },
}

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'
        }
    }
}

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

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;
    `,
  };
}

styled-components#DefaultTheme TypeScript Examples