안녕하세요 질문입니다 채택완료

</p>

<p><!-- darkmode/lightmode tail part-->

  <button type="button" onclick="toggleDarkMode()" class="btn_dark_mode">

  <span class="sound_only">다크모드 전환</span>

  <!--<i class="fa fa-moon-o" aria-hidden="true"></i>-->

  <i class="fa-solid fa-moon fa-beat" style="color:#ffd700"></i>

  <i class="fa-solid fa-sun fa-beat" style="color:#ff0000"></i>   

</button>

<style>

.btn_dark_mode {   

  position: fixed;

  right: 20px; 

  bottom: 80px;

  width: 50px;

  height: 50px;

  border: 1px solid #ddd;

  border-radius: 50%;

  background: #fff;

  font-size: 20px;

  z-index: 999;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}

.btn_dark_mode:hover {

  /*background: #eee;*/

  background: #f5f5f5;

  transform: scale(1.05);

}

/* 다크모드일 때 */

/*

.darkreader .btn_dark_mode {   

  background: #333;

  border-color: #666;

  color: #fff;

}

*/

.darkreader .btn_dark_mode {   

  background: #2d2d2d;

  border-color: #404040;

  color: #ffffff;

  box-shadow: 0 2px 5px rgb(255, 255, 255);

}</p>

<p>.darkreader .btn_dark_mode:hover {

  background: #3d3d3d;

}

</style>

<!-- darkmode/lightmode tail part-->

 </p>

<p>

<!---dark mode/light mode(head part)-->

 <?php

// head.sub.php 하단에 추가

//$darkreader = get_cookie('darkreader');//not working as null cookie, so use below code.

$darkreader = isset($_COOKIE['darkreader']) ? $_COOKIE['darkreader'] : '';

?>

<!-- darkreader 스크립트 추가 -->

<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/darkreader/4.9.58/darkreader.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/darkreader/4.9.58/darkreader.min.js"></script></a>

<script>

// 다크모드 토글 함수

function toggleDarkMode() {

  if (DarkReader.isEnabled()) {

    DarkReader.disable();    

    set_cookie('darkreader', '', 365); 

  } else {

    DarkReader.enable({

      brightness: 100,

      contrast: 90,

      sepia: 10

    });

    set_cookie('darkreader', 'enabled', 365);

  }  

}

// 초기 다크모드 상태 설정

window.addEventListener('DOMContentLoaded', () => {

  if('<?php echo $darkreader?>' === 'enabled') {

    DarkReader.enable({

      brightness: 100,

      contrast: 90, 

      sepia: 10

    });

  }

});

</script> 

<!---dark mode/light mode(head part)-->