Search code examples
csssasscolorswebfontstypography

Change Bold Color in SCSS Script

I'm a beginner struggling with the basic task of changing Bold Text Color in a pre-scripted scss file. I just can't find an obvious solution.

The API appears to predefine color parameters and I struggle to find how to change them before or after importing the embbeded code.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Inter:wght@400;600;700&family=Source+Sans+Pro:wght@400;600&display=swap');
:root {
  --font-body: "Source Sans Pro";
  --font-header: "Inter";
  --font-mono: "Fira Code"
}

// typography
html {
  scroll-behavior: smooth;
  &:lang(ar) {
    & p, & h1, & h2, & h3, article, header {
      direction: rtl;
      text-align: right;
    }
  }
  & footer > p {
    text-align: center !important;
  }
}

.singlePage {
  padding: 4em 30vw;
  margin: 0 auto;
  max-width: 1000px;
  @media all and (max-width: 1200px) {
    padding: 25px 5vw;
  }
}

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  box-sizing: border-box;
  background-color: var(--light);
}

I expect the body of the text to change to the color pink (#ff82b2) when bolded. And I tried to change that by tweaking parameters in the provided scss file.

Solution

  • You can add styles for the b and strong tags.

    b, strong {
    color: #ff82b2;
}

    This will not affect headings (h1, h2, etc.) which are bold by default, or other elements, that are styled to be bold elsewhere.