본문으로 건너뛰기

Theme Change Button

Setting Up a Theme Change Button

In this lesson, we will analyze the Light/Dark theme change (Toggle) button.


Introduction to the data-theme Attribute

The data-* attribute is a user-defined data attribute introduced in HTML5. It can be used to store additional information in an HTML element.

In this example, the data-theme attribute is used to manage the overall theme of the webpage.

This attribute is used in CSS selectors and JavaScript to get or modify the theme state.


HTML Structure for Dark and Light Buttons

Define buttons in HTML that can change the theme. Each button is created with the <a> tag, and each is differentiated by their id (dark and light) for specific theme actions.

<ul class="menu">
<a id="dark" class="btn"> <i class="icon icon-left ion-md-moon"></i> Dark </a>
<a id="light" class="btn">
<i class="icon icon-left ion-md-sunny"></i> Light
</a>
</ul>

Arranging Icons and Text

Each theme button consists of an icon (<i>) and text (Dark or Light).

The icons are imported from an external resource called Ionicons, and the icons are displayed through the class name of the respective icon.

Since the icon and text are listed on the same line, users can easily distinguish the state of the theme.

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!