Two different buttons for switching dark/light mode - main app and Chatify

Hi my main app has a light dark mode switch and Chatify has its own light dark switch, I want to have the chatify mode change when I click my main app switch is this possible? here is the js for both switches:

   // Theme Change by Header Button - main App switch
$("#themeMood").on("click", function () {
    if (currentTheme === "light") {
        currentTheme = "dark";
    } else {
        currentTheme = "light";
    }
    localStorage.theme = currentTheme;
    location.reload();
});

$("#grayScale").on("click", function () {
    if ($("html").hasClass("grayScale")) {
        $("html").removeClass("grayScale");
        localStorage.effect = "";
    } else {
        $("html").addClass("grayScale");
        localStorage.effect = "grayScale";
    }
});
// Switch to Dark/Light mode  - Chatify switch
$("body").on("click", ".dark-mode-switch", function () {
    if ($(this).attr("data-mode") == "0") {
        $(this).attr("data-mode", "1");
        $(this).removeClass("far");
        $(this).addClass("fas");
        dark_mode = "dark";
    } else {
        $(this).attr("data-mode", "0");
        $(this).removeClass("fas");
        $(this).addClass("far");
        dark_mode = "light";
    }
});

In the chatify header

   <link href="{{ asset('css/chatify/'. (Auth::user()->dark_mode  > 0 ? 1 : 0).'.mode.css') }}" rel="stylesheet" /> 

This gets the user setting for darkmode from the db I modified it from

  <link href="{{ asset('css/chatify/'.$dark_mode.'.mode.css') }}" rel="stylesheet" />

as I was getting an error as it didn't know what this is .$dark_mode.

I added the dark-mode-switch class to my main app button, however it does not seem to be getting triggered? is there anyway to combine these so I can remove the chatify light/dark switch?