> ## Content Index
> Fetch the complete content index at: https://bepublish.com/vi/llms.txt
> Use this file to discover other available public pages before exploring further.

# Tạo nút chuyển đổi Dark mode cho Casper theme
- URL: https://bepublish.com/vi/dark-mode-toggle-for-casper/
- Published: 2023-05-28T15:10:21.000Z
- Updated: 2025-10-01T15:00:19.000Z
- Description: Hướng dẫn tạo nút chuyển đổi dark mode cho Casper theme mà không cần chỉnh sửa theme.
- Author: Cường Thạch
- Tags: Hướng Dẫn, #multilingual, #Import 2025-09-22 14:17, #Import 2025-09-23 03:55

Ghost đã thêm chế độ dark mode vào theme Casper trong phiên bản cập nhật gần đây. Chế độ dark mode của Casper được kích hoạt tự động dựa trên cài đặt dark mode của trình duyệt mà người dùng đang sử dụng, thay vì cho phép người dùng lựa chọn chế độ này.

Việc cung cấp một nút chuyển đổi dark mode là một lựa chọn thuận tiện hơn cho người dùng. Người dùng có thể tùy ý bật hoặc tắt chế độ dark mode trong trang web, cho phép họ kiểm soát trực tiếp giao diện hiển thị của trang web tốt hơn. Điều này mang lại sự thuận tiện và linh hoạt hơn cho người dùng hơn.

Hướng dẫn này sẽ giúp bạn thêm nút chuyển đổi dark mode vào theme Casper đơn giản mà không cần phải tùy chỉnh theme.

💡

Đặc biệt hữu dụng khi bạn đang dùng dịch vụ [ghost (Pro) Starter](https://ghost.org/pricing/?via=cuong76&ref=bepublish.com).

![Sau khi thêm nút chuyển Dark Mode](https://bepublish.com/vi/content/images/2023/05/image-7.png)

Sau khi thêm nút chuyển Dark Mode

## Bước 1: Thêm code CSS vào ghost head

Bạn copy code CSS bên dưới vào site header `/ghost/#/settings/code-injection`

```html
<style>.switch:hover{cursor:pointer}.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input[type='checkbox']{opacity:0;width:0;height:0}.slider{position:relative;display:inline-block;width:60px;height:34px;background-color:#ccc;border-radius:34px;transition:.4s}.slider:before{position:absolute;content:'';height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input[type='checkbox']:checked+.slider{background-color:var(--ghost-accent-color)}input[type='checkbox']:checked+.slider:before{transform:translateX(26px)}.moon-icon{position:absolute;top:50%;left:5px;transform:translate(0,-50%);color:#fff;font-size:16px;line-height:26px}</style>
```

![Setting > Code injection > Site Header](https://bepublish.com/vi/content/images/2023/05/image-8.png)

Setting > Code injection > Site Header

Màu sắc chủ đạo của nút sẽ tự dựa theo màu của ghost accent color.

![Màu nút sẽ theo Accent Color](https://bepublish.com/vi/content/images/2023/05/image-10.png)

Màu nút sẽ theo Accent Color

## Bước 2: Thêm code JavaScript vào ghost foot

Bạn copy và dán code bên dưới vào site footer `/ghost/#/settings/code-injection`

```html
<script>const darkModeSwitch=document.createElement('label');darkModeSwitch.setAttribute('class','switch');darkModeSwitch.setAttribute('for','dark-mode-switch');const inputCheckbox=document.createElement('input');inputCheckbox.setAttribute('type','checkbox');inputCheckbox.setAttribute('id','dark-mode-switch');const slider=document.createElement('span');slider.setAttribute('class','slider');const moonIcon=document.createElement('span');moonIcon.setAttribute('class','moon-icon');moonIcon.textContent='🌙';slider.appendChild(moonIcon);darkModeSwitch.appendChild(inputCheckbox);darkModeSwitch.appendChild(slider);const targetElement=document.querySelector('.gh-head-members');targetElement.insertAdjacentElement('afterend',darkModeSwitch);document.addEventListener('DOMContentLoaded',function(){const htmlElement=document.querySelector('html');darkModeSwitch.addEventListener('change',function(){htmlElement.classList.toggle('dark-mode');if(inputCheckbox.checked){moonIcon.style.display='none'}else{moonIcon.style.display='inline'}})})</script>
```

![Setting > Code injection > Site Footer](https://bepublish.com/vi/content/images/2023/05/image-9.png)

Setting > Code injection > Site Footer

![Trên Desktop](https://bepublish.com/vi/content/images/2023/05/image-11.png)

Trên Desktop

![Trên fđiện thoại](https://bepublish.com/vi/content/images/2023/05/image-12.png)

Trên điện thoại

## Lời kết...

Rất tiếc nút sẽ không có tác dụng chuyển theme sang Light Mode nếu người dùng đang dùng Dark Mode mặc định cho hệ thống.

Chúc bạn thành công!