styled-components#createGlobalStyle JavaScript Examples

The following examples show how to use styled-components#createGlobalStyle. 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.js From uniswap-v1-frontend with GNU General Public License v3.0

6 votes

GlobalStyle = createGlobalStyle`
  @import url('https://rsms.me/inter/inter.css');
  html { font-family: 'Inter', sans-serif; }
  @supports (font-variation-settings: normal) {
    html { font-family: 'Inter var', sans-serif; }
  }
  
  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;    
  }

  body > div {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

  html {
    font-size: 16px;
    font-variant: none;
    color: ${({ theme }) => theme.textColor};
    background-color: ${({ theme }) => theme.backgroundColor};
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
`

Example #2

Source File: GlobalStyles.js From foster-together-fe with MIT License

6 votes

GlobalStyle = createGlobalStyle`
  ${normalize}
 
  * {
    box-sizing: border-box;
    font-size: 62.5%;
    max-width: 100%;
    -webkit-font-smoothing: antialiased;
  }

  body {
    font-family: 'Roboto', sans-serif;
  }

  span,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  a,
  address,
  ol,
  ul,
  li,
  form,
  label,
  table,
  caption {
    font-size: 1.6rem;
}
`

Example #3

Source File: GlobalStyle.js From roomie-frontend with MIT License

6 votes

GlobalStyle = createGlobalStyle`

:root {
  --accent-color: #BACD25;
}

* {
  box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;;
    background-color: white;
  }

  ::-webkit-scrollbar {
    display: none;
  }
  
  input:-webkit-autofill,
  input:-webkit-autofill:hover, 
  input:-webkit-autofill:focus, 
  input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
  

`

Example #4

Source File: globalStyles.js From Lightspeed-react with MIT License

6 votes

GlobalStyle = createGlobalStyle`
    *{
        padding: 0;
        margin:0;
        border: 0;
        font-family: 'Poppins', sans-serif;
        font-style: normal;
        text-align:center;
    }

    body{
        background-color: #1f2128;
    }

    .App{
        text-align:center;
    }

    h4 {
  font-weight: 500;
  font-size: 32px;
  line-height: 48px;
  letter-spacing: -0.5px;
}

h6 {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
}
`

Example #5

Source File: _app.js From website with MIT License

6 votes

GlobalStyle = createGlobalStyle`
  body {
    margin: 0 auto;
    font-family: 'Trebuchet MS';
  }

  pre {
    font-family: 'Trebuchet MS';
    margin: 0;
    word-wrap: break-word;
    white-space: pre-wrap; 
    word-break: break-word;
  }

  .default-avatar {
    width: 40px;
    height: 40px;
  }

  #scrollableCategory::-webkit-scrollbar, .scrollableDonation::-webkit-scrollbar {
    display: none;
  }

  .carousel .slide {
    background: ${colors.white};
  }

  .control-dots {
    padding-inline-start: 0px; 
  }

  .ql-editor li {
    padding-bottom: 15px;
  }
`

Example #6

Source File: _app.jsx From clipface with MIT License

6 votes

GlobalStyle = createGlobalStyle`
  html {
    font-family: "Roboto", sans-serif;
  }

  body {
    position: relative;
    font-family: inherit;
    min-height: 100vh;
    box-sizing: border-box;
    padding-bottom: 33px;
  }
`

Example #7

Source File: global-styles.js From QiskitFlow with Apache License 2.0

6 votes

GlobalStyle = createGlobalStyle`
  html,
  body {
    height: 100%;
    width: 100%;
    line-height: 1.5;
  }

  body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

  body.fontLoaded {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

  #app {
    background-color: #fafafa;
    min-height: 100%;
    min-width: 100%;
  }

  p,
  label {
    font-family: Georgia, Times, 'Times New Roman', serif;
    line-height: 1.5em;
  }
`

Example #8

Source File: globalStyles.js From saasgear with MIT License

6 votes

GlobalStyle = createGlobalStyle`
  .public-DraftEditor-content {
    min-height: 500px;
    overflow: auto;
  }
  * {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    box-sizing: border-box;
    letter-spacing: 0.5px;
  }
  a {
    color: ${COLORS.PRIMARY};
    text-decoration: none;
  }
  html, body {
    margin: 0;
    padding: 0;
    position: relative;
  }

  h1, h2, h3, h4, h5, h6, ul, li, p {
    margin: 0;
    padding: 0;
  }
`

Example #9

Source File: globalStyle.js From js-docs with MIT License

6 votes

GlobalStyle = createGlobalStyle`
  body {
    height: calc(100vh - 15px);
    font-family: 'Open Sans', 'Helvetica Neue', Ubuntu;
    background: rgb(40, 44, 53);
  }

  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  div {
    width: 100%;
  }

  #___gatsby > * {
    display:flex;
    background: rgb(40, 44, 53);
  }

  h1, h2, h3, h4, h5 {
    text-decoration: none !important;
    color: #ff9900;
    font-weight: 700;
  }
`

Example #10

Source File: index.js From apps-ng with Apache License 2.0

6 votes

GlobalStyle = createGlobalStyle`
  body, html {
    padding: 0;
    margin: 0;
    ${({ isMobile }) => !isMobile && `
      min-width: ${constants.PAGE_MIN_WIDTH}px;
    `}
  }
  
  html {
    overflow-x: auto;
  }

  * {
    box-sizing: border-box;
  }
  
  #__next {
    ${({ isMobile }) => !isMobile && `
      min-width: ${constants.PAGE_MIN_WIDTH}px;
    `}
    overflow-x: auto;
    min-height: 100vh;
  }

  #zeit-ui-modal .content footer button.btn {
    min-width: unset;
  }

  #zeit-ui-modal .content .wrapper {
    max-width: calc(100vw - 24px);
  }
`

Example #11

Source File: global.js From web with GNU General Public License v3.0

6 votes

GlobalStyle = createGlobalStyle`
  html {
    font-size: 16px;
  }
  * {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
`

Example #12

Source File: style.js From svg-to-jsx-electron with MIT License

6 votes

Styles = createGlobalStyle`
  html, body {
    padding: 0;
    margin: 0;
    background-color: rgb(1, 22, 39);
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  label {
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #888888;
    margin-bottom: 8px;
  }

  #root {
    max-width: 90%;
    position: relative;
    margin: auto;
    margin-top: 80px;
  }

  div[role="tabpanel"] {
    outline: none;
  }
`

Example #13

Source File: global.js From gnosis-safe-delegate-dapp with MIT License

6 votes

GlobalStyle = createGlobalStyle`
    @font-face {
        font-family: 'Averta';
        font-display: swap;
        src: local('Averta'), local('Averta Bold'),
        url(${avertaFont}) format('woff2'),
        url(${avertaBoldFont}) format('woff');
    }
`

Example #14

Source File: global.js From portfolio with MIT License

6 votes

GlobalStyles = createGlobalStyle`
  *,
  *::after,
  *::before {
    box-sizing: border-box;
  }

  body {
    align-items: center;
    background: ${({ theme }) => theme.body};
    color: ${({ theme }) => theme.text};
    display: flex;
    // flex-direction: column;
    // justify-content: center;
    // height: 100vh;
    // margin: 0;
    // padding: 0;
    font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    transition: all 0.25s linear;
  }`

Example #15

Source File: _app.js From lightning-address with MIT License

6 votes

GlobalStyle = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;700;900&display=swap');

  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
  }

  ::selection {
    background-color: rgba(0,118,255,0.9);
    color: #fff;
  }
`

Example #16

Source File: global.js From truvisory with MIT License

6 votes

GlobalStyles = createGlobalStyle`
  *,
  *::after,
  *::before {
    box-sizing: border-box;
  }

  #root{
     box-shadow:inset 0 0 0 4000px ${({ theme }) => theme.body};
    // background: ${({ theme }) => theme.body};
  }

  html {
    height: 100%;
  }

  body {
    height: 100%;
    // align-items: center;
    // background: ${({ theme }) => theme.body};
    // background: ${require("./assets/images/website_background.jpg")};
    color: ${({ theme }) => theme.text};
    display: flex;
    flex-direction: column;
    // justify-content: center;
    height: 100vh;
    margin: 0;
    padding: 0;
    font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    transition: all 0.25s linear;
  }
  `

Example #17

Source File: global-style.js From derivcrypto-com with Apache License 2.0

6 votes

GlobalStyle = createGlobalStyle`
    ${reset}

    * {
        font-family: 'IBM Plex Sans', sans-serif;

        &, &::before, &::after {
            box-sizing: border-box;
        }
    }
    html {
        font-size: 16px;
        color: ${({ theme }) => theme.colors.text_primary};
        box-sizing: border-box;
    }
    body {
        font-family: 'IBM Plex Sans', sans-serif;
        line-height: 1.5;
        letter-spacing: 0;
        background: ${({ theme }) => theme.colors.background_dark};
    }
`

Example #18

Source File: App.jsx From relay_15 with MIT License

6 votes

GlobalStyle = createGlobalStyle`
  body{ 
    margin: 0;
    padding: 0;
  }
  @font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/JalnanOTF00.woff')
      format('woff');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'MapoPeacefull';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/MapoPeacefullA.woff')
      format('woff');
    font-weight: normal;
    font-style: normal;
  }
`

Example #19

Source File: index.js From boring-avatars with MIT License

6 votes

BaseStyles = createGlobalStyle`
  :root {
    ${cssVariables}
  }

  *, *:before, *:after {
    box-sizing: border-box;
  }

  body {
    background-color: var(--c-background);
    color: var(--c-body);
  }
`

Example #20

Source File: CSSReset.jsx From Edlib with GNU General Public License v3.0

6 votes

GlobalStyle = createGlobalStyle`
  html {
    font-size: ${(props) => props.theme.fontSize}px;
  }

  body .edlib-components {
    code {
      font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
      monospace;
    }

    label {
      color: inherit;
    }

    strong {
      font-weight: bold;
    }
  }
`

Example #21

Source File: fonts.js From ThreatMapper with Apache License 2.0

6 votes

Fonts = createGlobalStyle`
  /* stylelint-disable sh-waqar/declaration-use-variable */
  @font-face {
    font-family: 'proxima-nova';
    src: url(${ProximaNova});
  }

  @font-face {
    font-family: 'Roboto Mono';
    src: url(${RobotoMono});
  }
  /* stylelint-enable sh-waqar/declaration-use-variable */
`

Example #22

Source File: globalStyles.js From urlShortner with GNU General Public License v3.0

6 votes

GlobalStyles = createGlobalStyle`
  body {
    background: ${({ theme }) => theme.body};
    color: ${({ theme }) => theme.text};
    navbar: ${({ theme }) => theme.navbarColor};
    font-family: Tahoma, Helvetica, Arial, Roboto, sans-serif;
    transition: all 0.50s linear;
  }

  `

Example #23

Source File: fonts.js From nft-minting-dapp with MIT License

6 votes

GlobalStyle = createGlobalStyle`
    @font-face {
        font-family: 'Upheaval';
        src: url(${Upheaval}) format('truetype');
    }

    @font-face {
        font-family: 'Renomono';
        src: url(${RenoMono}) format('opentype');
    }
`

Example #24

Source File: Layout.js From ingress-cycle-stats with MIT License

6 votes

GlobalStyle = createGlobalStyle`
* {box-sizing: border-box}
  body {
    font-size: 14px;
    font-family: 'oswald', serif;
    background-color: #111111;
    color: #04eaf5;
    margin: 0;
    padding: 0;
  }
`

Example #25

Source File: index.js From sorbet-finance with GNU General Public License v3.0

6 votes

GlobalStyle = createGlobalStyle`
  @import url('https://rsms.me/inter/inter.css');
  html { font-family: 'Inter', sans-serif; }
  @supports (font-variation-settings: normal) {
    html { font-family: 'Inter var', sans-serif; }
  }

  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  body > div {
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

  html {
    font-size: 16px;
    font-variant: none;
    color: ${({ theme }) => theme.textColor};
    background-color: ${({ theme }) => theme.backgroundColor};
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
`

Example #26

Source File: GlobalStyle.js From indeplot with GNU General Public License v3.0

6 votes

GlobalStyles = createGlobalStyle`
  body {
    background: ${({ theme }) => theme.body};
    color: ${({ theme }) => theme.text};
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
    transition: all 0.50s linear;
  }
  `

Example #27

Source File: App.js From react-router-scroll-memory with MIT License

6 votes

GlobalStyle = createGlobalStyle`
  body {
    font-family: Helvetica, Arial, sans-serif;
    margin: 0;
  }
  nav {
    display: flex;
    padding:1rem;
    a {
      margin: .5rem;
    }
  }
`

Example #28

Source File: GlobalStyle.js From friendbank-markey with MIT License

6 votes

GlobalStyle = createGlobalStyle`
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  ul[class],
  ol[class],
  li,
  figure,
  figcaption,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  ul[class],
  ol[class] {
    list-style: none;
    padding: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
`

Example #29

Source File: Popup.jsx From acid-tabs-extension with MIT License

6 votes

GlobalStyle = createGlobalStyle`
  html {
    background-color: #282C34;
  }

  body {
    width: 40rem;
    min-height: 20rem;
    color: white;
  }
`