Railsでダークモードとライトモードを切り替えるコードが動かない

Ruby on Railsの練習でサイトを作っていてそのサイトにダークモード機能をつけたいと思いいろいろ調べてこのコードにたどり着いたのですがなぜかボタンを押してもダークモードになりません。
https://codepen.io/0guzhan/pen/ROgWbW
HTML・CSSはちゃんと適応されているのでJavaScriptの問題だと思うのですが原因がわからなくて困っています。
ちなみに違う機能のために書いたJavaScriptのコードはしっかりと動いています。

Railsで書いているコードではなく1からHTMLとCSSとJavaScriptを書いたサイトでやってみるとうまく反応しました。
今作っているサイトの何かと相性が悪くてJavaScriptが動かないのでしょうか

下記のサイトも試しましたがおなじくJavaScriptのところで動かなくなってしまima
した
https://codepen.io/mburridge/pen/mdJONQj
https://codepen.io/IKEMAKI/pen/vYERLrG

いろいろと初心者で言葉足らずなところもありますが詳しい方教えていただけると幸いです。

JavaScript
1const lightMode = document.querySelector('.sun');
2const darkMode = document.querySelector('.moon');
3
4const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
5
6lightMode.onclick = function(){
7  document.documentElement.setAttribute('data-theme', 'dark');
8  lightMode.style = "display: none";
9  darkMode.style = "display: block";
10  localStorage.setItem('theme', 'dark');
11}
12
13darkMode.onclick = function(){
14  document.documentElement.setAttribute('data-theme', 'light');
15  lightMode.style = "display: block";
16  darkMode.style = "display: none";
17  localStorage.setItem('theme', 'light');
18  
19}
20
21if (currentTheme) {
22    document.documentElement.setAttribute('data-theme', currentTheme);
23
24    if (currentTheme === 'dark') {
25        lightMode.style = "display: none";
26      darkMode.style = "display: block";
27    }
28}