Bulma로 다크 모드 구현
현대의 프런트 엔드 개발자는 거의 항상 사용자 인터페이스(UI)를 완벽한 픽셀 표준으로 작업 코드에 구현할 수 있어야 합니다. 시간이 지남에 따라 이 표준을 보다 효율적으로 달성하고 훨씬 적은 코드를 필요로 하는 데 도움이 되는 다양한 CSS 라이브러리가 있었습니다.
Bulma는 다양한 효과를 위해 프런트 엔드 프로젝트에서 사용할 수 있는 유틸리티 클래스를 제공하고 바로 사용할 수 있는 프런트 엔드를 제공함으로써 프런트 엔드 개발자가 마크업 코드의 스타일을 개선하고 반응형 웹 레이아웃을 구축할 수 있도록 제작된 CSS 라이브러리입니다. 구성 요소. Bulma 및 시작 방법에 대한 자세한 내용은 click here
이 기사에서는 Bulma와 이를 통해 다크 모드 기능을 구현하는 방법에 대해 알아봅니다.
Bulma의 다크 모드
이제 우리는 Bulma가 무엇인지, 왜 우리가 Bulma를 좋아하고 사용하는지 알게 되었으므로 Bulma를 사용하여 다크 모드를 구현하는 방법에 대해 자세히 살펴보겠습니다. 먼저 다음을 수행해야 합니다.
Bulma로 프로젝트 설정
프로젝트에서 Bulma의 기능을 활용하려면 Bulma를 설치하고 프로젝트 파일 디렉토리를 설정해야 합니다. Bulma를 설치하고 시작하는 방법에는 다음과 같은 다양한 방법이 있습니다.
이 기사를 위해 Bulma의 공식 컴파일 파일을 다운로드하여 프로젝트 디렉토리에 임베드합니다.
위 이미지에서 자산 폴더에 있는 Bulma 파일을 볼 수 있습니다. 그런 다음 Bulma를 HTML 파일로 가져옵니다.
<!---index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dark mode with Bulma!</title>
<link rel="stylesheet" href="/assets/bulma/css/bulma.css">
<link rel="stylesheet" href="/index.css">
</head>
<body class="">
<section class="section">
<div class="container">
<h1 class="title">
Hello World
</h1>
<p class="subtitle">
My first website with Bulma!
</p>
<button id='toggle'>
Toggle Theme
</button>
</div>
</section>
</body>
<script src="index.js"></script>
</html>
Bulma의 다른 설치 옵션에 대해 자세히 알아보려면click here
Bulma의 Sass 변수를 사용하여 두 테마를 모두 사용자 지정
프로젝트에 Bulma가 있으므로 다음 단계는 Bulma의 Saas 변수를 사용하여 각 테마를 사용자 지정하는 것입니다. 이 프로세스는 초보자에게 친숙하지만 쉽게 따라하려면 Saas에 대한 지식이 필요합니다.
Sass 설치 및 설정 - Sass에서 스타일을 작성할 것이므로 첫 번째 단계는 Sass를 설치 및 설정하는 것입니다. 그런 다음 이제 .sass 또는 .scss 파일을 만들 수 있습니다. Sass 설치 프로세스에 익숙하지 않은 경우 자세한 내용을 확인할 수 있습니다here.
Bulma의 변수를 Sass 파일로 가져오기 이제 프로젝트에 Sass가 설치 및 설정되었으므로 사용자 지정 및 업데이트하려는 변수와 함께 Bulma의 Sass 파일을 가져올 수 있습니다.
//styles.scss
// Import Bulma Sass file
@import "./assets/bulma/bulma.sass";
Bulma Sass 변수 업데이트 아래 코드에서 이제 Bulma의 전역 변수에 액세스할 수 있고 사용자 지정 브랜드 색상으로 변수를 업데이트하고 있음을 알 수 있습니다. 또한 .dark 클래스로 구별되는 밝은 테마와 어두운 테마 모두에 대한 몇 가지 스타일을 추가했습니다.
//styles.scss
body {
background-color: $light;
height: 100vh;
transition: all 0.4s ease;
}
// Some styling
body .subtitle,
body .title {
color: $dark;
}
body.dark {
background-color: $dark;
color: $light;
}
body.dark .subtitle,
body.dark .title {
color: $light;
}
.section {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
text-align: center;
}
button{
cursor: pointer;
border: none;
color: $light;
padding: .8rem;
background: $dark;
border-radius: 6px;
}
body.dark button {
background: $light;
color: $dark;
}
테마를 전환하는 일부 JavaScript
축하합니다. 여기까지 오셨습니다. 이 시점에서 두 테마가 모두 준비되었습니다. JavaScript를 사용하여 클릭하면 테마를 전환하는 버튼을 추가할 예정입니다.
//App.js
const body = document.querySelector('body');
const toggle = document.getElementById('toggle');
toggle.addEventListener("click", () => {
const bodyCheck = body.classList.contains('dark');
if (bodyCheck) {
body.className = ''
} else {
body.className = "dark"
}
})
모든 것이 올바르게 완료되면 이와 유사한 경험을 얻을 수 있습니다.
오픈 소스 세션 재생
OpenReplay은 사용자가 웹 앱에서 수행하는 작업을 볼 수 있는 오픈 소스 세션 재생 제품군으로, 문제를 더 빨리 해결할 수 있도록 도와줍니다. OpenReplay는 데이터를 완벽하게 제어할 수 있도록 자체 호스팅됩니다.
디버깅 경험을 즐기십시오 - start using OpenReplay for free .
결론
축하해요! 당신은 끝까지 해냈고, 나는 당신이 Bulma와 함께 이 멋진 기능을 배울 수 있기를 바랍니다. 도전으로 받아들이고 Bulma와 함께 제공되는 다른 멋진 기능을 탐색하고 Bulma로 훨씬 더 멋진 일을 할 수 있습니다.
자원
이에 대한 전체 코드는 GitHub에서 찾을 수 있습니다.
라이브 데모도 찾을 수 있습니다here.
A TIP FROM THE EDITOR: For another take on dark mode, look at our Theming React Native Applications With Styled Components article.
Reference
이 문제에 관하여(Bulma로 다크 모드 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/asayerio_techblog/implementing-dark-mode-with-bulma-cl3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
