@material-ui/core/styles#createMuiTheme TypeScript Examples

The following examples show how to use @material-ui/core/styles#createMuiTheme. 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: index.tsx    From akashlytics with GNU General Public License v3.0 6 votes vote down vote up 
theme = createMuiTheme({
  palette: {
    type: "dark",
    primary: {
      main: "#f9303e",
    },
    text: {
      primary: "#fff",
    },
  },
  typography: {
    fontFamily: [
      "-apple-system",
      "BlinkMacSystemFont",
      '"Segoe UI"',
      "Roboto",
      '"Helvetica Neue"',
      "Arial",
      "sans-serif",
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(","),
  },
  overrides: {
    MuiCssBaseline: {
      "@global": {
        html: {
          WebkitFontSmoothing: "auto",
        },
        body: {
          paddingTop: "80px",
          backgroundColor: "#242526",
          backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%2323272e' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23252930'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E")`,
        },
      },
    },
  },
})
Example #2
Source File: theme.tsx    From frontend-clean-architecture with MIT License 6 votes vote down vote up 
theme = createMuiTheme({
    palette: {
        primary: {
            main: blue.A400,
        },
        secondary: {
            main: red.A700,
        },
        error: {
            main: red.A400,
        },
        background: {
            default: grey[50],
        },
    },
})
Example #3
Source File: App.tsx    From sphinx-win-linux-desktop with MIT License 6 votes vote down vote up 
function Wrap(){
  const {ui} = useStores()
  return useObserver(()=>{
    if(ui.ready) return <ThemeProvider theme={ createMuiTheme({palette}) }><App /></ThemeProvider>
    return <Loading>
      <CircularProgress style={{color:'white'}} />
    </Loading>
  })
}
Example #4
Source File: theme.tsx    From vhealth-gatsby with MIT License 6 votes vote down vote up 
theme = createMuiTheme({
  typography: {
    subtitle1: {
      color: "#7D7987",
    },
  },
  palette: {
    type: "light",
    primary: {
      main: "#458FF6",
    },
    error: {
      main: red.A400,
    },
    background: {
      default: "#fff",
    },
    text: {
      primary: "#000",
      secondary: "#7D7987",
      disabled: "#CCC",
      hint: "#7D7987",
    },
  },
  shape: {
    borderRadius: 20,
  },
})
Example #5
Source File: const.ts    From knboard with MIT License 6 votes vote down vote up 
theme = createMuiTheme({
  palette: {
    type: "light",
    primary: {
      main: PRIMARY_MAIN,
    },
    secondary: {
      light: grey[700],
      main: "#FDB915",
    },
  },
  typography: {
    fontFamily: '"Inter var", sans-serif',
  },
  props: {
    MuiButtonBase: {
      disableRipple: true,
    },
    MuiDialog: {
      transitionDuration: 100,
    },
  },
  overrides: {
    MuiButton: {
      root: {
        "&:hover": {
          transition: "none",
        },
      },
    },
  },
})
Example #6
Source File: index.tsx    From synapse-extension with MIT License 6 votes vote down vote up 
listItemTheme = createMuiTheme({
  overrides: {
    MuiListItem: {
      root: {
        border: 0,
        height: '56px',
        marginTop: '0px',
        marginBottom: '0px',
      },
    },
  },
})
Example #7
Source File: Login.tsx    From ra-enterprise-demo with MIT License 6 votes vote down vote up 
LoginWithTheme = (props: any): ReactElement => {
    const theme = useTheme();
    const { lightTheme } = getThemes(theme);
    return (
        <ThemeProvider theme={createMuiTheme(lightTheme)}>
            <Login {...props} />
        </ThemeProvider>
    );
}
Example #8
Source File: default.tsx    From gatsby-theme-pristine with Apache License 2.0 6 votes vote down vote up 
darkTheme = responsiveFontSizes(createMuiTheme({
  props: {
    MuiAppBar: {
      position: "sticky",
    },
    MuiCard: {
      elevation: 0,
    },
  },
  palette: {
    type: "dark",
    text: {
      primary: grey[400],
    },
    background: {
      default: grey[900],
      paper: grey[800],
    },
  },
  overrides: {
    MuiTable: {
      root: {
        background: "transparent !important",
      },
    },
    MuiTypography: {
      root: {
        color: grey[400],
      },
    },
  },
  typography,
}))
Example #9
Source File: index.ts    From selftrace with MIT License 6 votes vote down vote up 
muiTheme = createMuiTheme({
  palette: {
    primary: {
      main: Colors.PRIMARY.toString(),
    },
    secondary: {
      main: Colors.SECONDARY.toString(),
    },
  },
})
Example #10
Source File: theme.tsx    From logo-generator with MIT License 6 votes vote down vote up 
theme = createMuiTheme({
	palette: {
		primary: {
			main: '#556cd6',
		},
		secondary: {
			main: '#19857b',
		},
		error: {
			main: red.A400,
		},
		background: {
			default: '#fff',
		},
	},
})
Example #11
Source File: theme.tsx    From covid19testing-map with GNU General Public License v3.0 6 votes vote down vote up 
theme = createMuiTheme({
  palette: {
    primary: {
      main: indigo[900],
      light: '#7c42bd',
      dark: '#12005e',
      contrastText: '#ffffff',
    },
    secondary: {
      main: '#ace520',
      light: '#e2ff5e',
      dark: '#77b300',
      contrastText: '#4a148c',
    },
    warning: {
      main: '#ff9800',
      light: '#ffb74d',
      dark: '#f57c00',
      contrastText: '#4a148c',
    }
  },
})
Example #12
Source File: index.test.tsx    From prism-frontend with MIT License 6 votes vote down vote up 
test('renders as expected', () => {
  const rendered = render(
    <Provider store={store}>
      <ThemeProvider theme={createMuiTheme()}>
        <AlertForm isOpen setOpen={jest.fn()} />
      </ThemeProvider>
    </Provider>,
  );
  return expect(rendered.container).toMatchSnapshot();
});
Example #13
Source File: _app.tsx    From Figurify with Apache License 2.0 6 votes vote down vote up 
theme = createMuiTheme({
    typography: {
        fontFamily: dFont,
    },
    overrides: {
        MuiTooltip: {
            tooltip: Roboto
        },
    }
})
Example #14
Source File: Themes.tsx    From firetable with Apache License 2.0 6 votes vote down vote up 
customizableLightTheme = (customization: ThemeOptions) => {
  const customizedLightThemeBase = createMuiTheme(
    _merge({}, themeBase, customization)
  );

  return createMuiTheme(
    customizedLightThemeBase,
    _merge({}, defaultOverrides(customizedLightThemeBase), customization)
  );
}
Example #15
Source File: Main.tsx    From SpaceEye with MIT License 6 votes vote down vote up 
theme = createMuiTheme({
    palette: {
        type: 'dark',
        primary: {
            main: '#5297ff'
        }
    },
    typography: {
        allVariants: {
            color: 'white'
        }
    }
})
Example #16
Source File: App.tsx    From Pi-Tool with GNU General Public License v3.0 6 votes vote down vote up 
theme = createMuiTheme({
    palette: {
        type: 'dark',
        background: {
            default: '#212721'
        },
        primary: {
            main: '#84329B'
        }
    },
    typography: {
        fontFamily: 'noto_sansregular',
        h5: {
            fontFamily: 'oswaldregular',
            textTransform: 'uppercase',
        }
    }
})
Example #17
Source File: comments_widget.tsx    From jupyter-extensions with Apache License 2.0 6 votes vote down vote up 
theme = createMuiTheme({
  palette: {
    primary: {
      main: '#3f51b5',
    },
    secondary: {
      main: '#002984',
    },
  },
})
Example #18
Source File: index.tsx    From GroupChat with MIT License 5 votes vote down vote up 
darkTheme = createMuiTheme({
  palette: {
    type: 'dark'
  }
})
Example #19
Source File: theme.ts    From synapse-extension with MIT License 5 votes vote down vote up 
theme = createMuiTheme({
  typography: {
    button: {
      textTransform: 'none',
    },
  },
})
Example #20
Source File: index.tsx    From swap-ui with Apache License 2.0 5 votes vote down vote up 
/**
 * A`Swap` component that can be embedded into applications. To use,
 * one can, minimally, provide a provider and token list to the component.
 * For example,
 *
 * ```javascript
 * <Swap provider={provider} tokenList={tokenList} />
 * ```
 *
 * All of the complexity of communicating with the Serum DEX and managing
 * its data is handled internally by the component.
 *
 * For information on other properties like earning referrals, see the
 * [[SwapProps]] documentation.
 */
export default function Swap(props: SwapProps): ReactElement {
  const {
    containerStyle,
    contentStyle,
    swapTokenContainerStyle,
    materialTheme,
    provider,
    tokenList,
    fromMint,
    toMint,
    fromAmount,
    toAmount,
    referral,
  } = props;

  // @ts-ignore
  const swapClient = new SwapClient(provider, tokenList);
  const theme = createMuiTheme(
    materialTheme || {
      palette: {
        primary: {
          main: "#2196F3",
          contrastText: "#FFFFFF",
        },
        secondary: {
          main: "#E0E0E0",
          light: "#595959",
        },
        error: {
          main: "#ff6b6b",
        },
      },
    }
  );
  return (
    <ThemeProvider theme={theme}>
      <TokenListContextProvider tokenList={tokenList}>
        <TokenContextProvider provider={provider}>
          <DexContextProvider swapClient={swapClient}>
            <SwapContextProvider
              fromMint={fromMint}
              toMint={toMint}
              fromAmount={fromAmount}
              toAmount={toAmount}
              referral={referral}
            >
              <SwapCard
                containerStyle={containerStyle}
                contentStyle={contentStyle}
                swapTokenContainerStyle={swapTokenContainerStyle}
              />
            </SwapContextProvider>
          </DexContextProvider>
        </TokenContextProvider>
      </TokenListContextProvider>
    </ThemeProvider>
  );
}
Example #21
Source File: style-variables.tsx    From SeeQR with MIT License 5 votes vote down vote up 
MuiTheme = createMuiTheme({
  typography: {
    fontSize: 17,
  },
  palette: {
    primary: {
      light: greenLight,
      main: selectedColor,
      dark: greenDark,
    },
    secondary: {
      light: greyLight,
      main: greyLightest,
    },
    text: {
      primary: textColor,
      secondary: greyLight,
    },
  },
  overrides: {
    MuiIconButton: {
      root: {
        color: textColor,
        '&:hover': {
          color: hoverColor,
        },
      },
    },
    MuiTooltip: {
      tooltip: {
        fontSize: '1em',
      },
    },
    MuiTab: {
      root: {
        fontSize: 20,
        textTransform: 'none',
      },
    },
  },
})
Example #22
Source File: theme.ts    From abacus with GNU General Public License v2.0 5 votes vote down vote up 
baseTheme = createMuiTheme()
Example #23
Source File: index.ts    From fullstack-starterkit with MIT License 5 votes vote down vote up 
theme: Theme = createMuiTheme({ palette, typography, breakpoints, overrides })
Example #24
Source File: theme.ts    From planning-poker with MIT License 5 votes vote down vote up 
theme = createMuiTheme(customTheme)
Example #25
Source File: theme.tsx    From gateway-ui with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up 
theme = createMuiTheme({
  palette: {
    type: 'light',
    background: {
      default: '#efefef',
    },
    primary: {
      light: orange.A200,
      main: '#dd7200',
      dark: orange[800],
    },
    secondary: {
      main: '#242424',
    },
    text: {
      primary: '#242424',
      secondary: '#999999',
    },
  },
  typography: {
    button: {
      fontFamily: '"IBM Plex Mono", monospace',
      fontWeight: 500,
      fontStretch: 'normal',
      fontStyle: 'normal',
      color: '#242424',
    },
    caption: {
      fontFamily: '"IBM Plex Mono", monospace',
      fontWeight: 500,
      fontSize: '1rem',
      fontStretch: 'normal',
      fontStyle: 'normal',
    },
    body1: {
      color: '#242424',
    },
    body2: {
      color: '#999999',
      fontWeight: 400,
    },
    subtitle1: {
      color: '#242424',
    },
    subtitle2: {
      color: '#999999',
      fontWeight: 400,
    },
    fontFamily: ['Work Sans', 'Montserrat', 'Nunito', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'].join(','),
  },
})
Example #26
Source File: theme.ts    From metamask-snap-polkadot with Apache License 2.0 5 votes vote down vote up 
theme = createMuiTheme({
})
Example #27
Source File: DatePickerComponent.web.tsx    From react-native-jigsaw with MIT License 5 votes vote down vote up 
DatePickerComponent: React.FC<Props & { theme: typeof Theme }> = ({
  value,
  onChange,
  mode,
  toggleVisibility,
  isVisible,
  theme,
}) => {
  const internalTheme = createMuiTheme({
    palette: {
      primary: {
        main: theme?.colors?.primary ?? Theme.colors.primary,
      },
      secondary: {
        main: theme?.colors?.secondary ?? Theme.colors.secondary,
      },
    },
  });

  const Picker =
    mode === "date"
      ? DatePicker
      : mode === "time"
      ? TimePicker
      : DateTimePicker;

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <ThemeProvider theme={internalTheme}>
        <Picker
          value={value}
          open={isVisible}
          onChange={(d) => {
            toggleVisibility();
            onChange(null, d);
          }}
          onClose={() => toggleVisibility()}
          variant="dialog"
          TextFieldComponent={() => null}
        />
      </ThemeProvider>
    </MuiPickersUtilsProvider>
  );
}
Example #28
Source File: welcome.stories.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up 
lightTheme = createMuiTheme(ReactTheme)
Example #29
Source File: index.tsx    From GroupChat with MIT License 5 votes vote down vote up 
darkTheme = createMuiTheme({
  palette: {
    type: 'dark'
  }
})