개발하자

바디 요소를 벨벳으로 스타일링

Cuire 2023. 8. 20. 19:37
반응형

바디 요소를 벨벳으로 스타일링

나의 목표는 내 웹 앱의 어두운 모드를 만드는 것이다. 내 설정을 받으려면 틀로 입력하고 벨벳을 선택하십시오. 그런 다음 명령줄 지침을 따릅니다. src > App.svelte로 이동합니다:

다음을 시도하십시오:

body {
    background: black;
}

vs-code의 svelte 확장에 의해 다음과 같은 경고가 표시됩니다:

Unused CSS selector "body"

Image of my css and the warning

이 오류가 브라우저와 관련이 있는지 확인하기 위해 크롬 개발 도구에서 속성을 수동으로 설정했고 예상 결과를 얻었습니다.

Image of the same css working in dev tools

이 때문에 다음과 같은 질문이 있습니다:

  • 왜 벨벳은 이런 식으로 몸의 스타일링을 허용하지 않는 것일까요?
  • 바디 태그를 어떻게 벨벳으로 스타일링 할 수 있나요?
  • 다크 모드는 어떻게 구현됩니까?



왜 벨벳은 이런 식으로 몸의 스타일링을 허용하지 않는 것일까요?

왜냐하면 벨벳 스타일은. 어떤 스타일을 전체적으로 적용하고 싶다는 것을 분명히 말해줘야 해요.

바디 태그를 어떻게 벨벳으로 스타일링 할 수 있나요?

대신에 css 선택기를 사용하려고 합니다.

다크 모드는 어떻게 구현됩니까?

비슷한 스타일로 실렉터를 사용합니다.




프로젝트에 파일을 추가하고 다음과 같이 파일로 가져오면 제가 시도한 작업을 수행할 수 있습니다:

<script>
  import "./global.css";
</script>

만약 당신이 정말로 그것을 글로벌하게 하고 싶다면, 당신은 다음과 같이 당신의 프로젝트 루트에 있는 index.html에 링크할 수도 있다:

<link rel="stylesheet" href="styles.css">


반응형