@erkamalper, ID olduğu için döngüye sokamazsın tekillikten dolayı

şöyle yapabilirsin, input'un yine bir tane olur. bunu dışarıda herhangi bir yerde tutabilirsin önemli değil.

<input id="mode-btn" class="mode-btn" name="mode-btn"
       <?=cookiecheck('mode') == 'dark' ? 'checked' : null ?> type="checkbox">

<!-- header için olan kodların -->
<label for="mode-btn" class="mode-control">
    <span><img src="/frontend/images/dark.svg" data-toggle="tooltip" data-bs-placement="bottom"
               title="{{ __('general.darkmode')}}"></span>
    <span><img src="/frontend/images/light.svg" data-toggle="tooltip" data-bs-placement="bottom"
               title="{{ __('general.lightmode')}}"></span>
</label>

<!-- footer için olan kodların -->
<label for="mode-btn" class="mode-control">
    <span><img src="/frontend/images/dark.svg" data-toggle="tooltip" data-bs-placement="bottom"
               title="{{ __('general.darkmode')}}"></span>
    <span><img src="/frontend/images/light.svg" data-toggle="tooltip" data-bs-placement="bottom"
               title="{{ __('general.lightmode')}}"></span>
</label>

yazdığın javascript şu an geçerli olacaktır. Tek ihtiyacın belki switch işleminde görselleri değiştirmek. Onu da body classına göre kontrol edebilirsin

body:not(.dark) .mode-control span:not(:first-child) {
    display: none;
}
body.dark .mode-control span:not(:last-child) {
    display: none;
}

bu şekilde kontrol edebilirsin.

demo: https://codepen.io/tayfunerbilen/pen/jOwVrGm

client-side tarafında oluşturamazsın, nodejs yazarsan oluşturabilirsin sadece javascript ile.

şöyle bir şey yapabilirsin.

ilk olarak src/ klasörünün içinde mainContext.js adıyla dosya oluşturup içine şunu yaz

import React, {useState, createContext, useContext} from 'react'

const MainContext = createContext()

const MainContextProvider = ({ children }) => {

	const [methods, setMethods] = useState({})

	const data = {
		methods,
		...methods,
		setMethods
	}

	return (
		<MainContext.Provider value={data}>
			{children}
		</MainContext.Provider>
	)
}

export {
	MainContextProvider,
	MainContext,
	useContext
}

Daha sonra App.js de şu şekilde kullan

// src/App.js
import {MainContextProvider} from 'mainContext'

import Header from 'components/Header'
import Footer from 'components/Footer'

function App() {

	return (
        <MainContextProvider>
            <Header />
            <Footer />
        </MainContextProvider>
    )
    
}

export default App

Şimdi diyelim ki Header componentinde bir state oluşturacaksın ve footer'da bunu update etmek istiyorsun.

O zaman Header componentin şöyle olmalı

// components/Header.js

import {useEffect, useState} from 'react'
import {MainContext, useContext} from '../mainContext'

function Header() {
	const [logo, setLogo] = useState('erbilen.net')
	
	// header componentinden contexte değer ekle
	const {methods, setMethods} = useContext(MainContext)
	useEffect(() => {
		setMethods({
			...methods,
			logo,
			setLogo
		})
	}, [])
	
	return (
		<div>
			<h1>{logo}</h1>
		</div>
	)
}

export default Header

Footer componentinde şöyle olacak

// components/Footer.js

import {MainContext, useContext} from '../mainContext'

function Footer() {
	
	// footer componentinden headerda oluşturduğumuz `logo` stateini güncelliyoruz
	const {setLogo} = useContext(MainContext)
	const changeLogo = () => {
		setLogo('prototurk.com')
	}

	return (
		<div>
			<button onClick={changeLogo}>Logoyu değiştir</button>
		</div>
	)
}

export default Footer

en basit haliyle böyle componentlere prop geçmeden native context yapısını kullanabilirsin react'in.

kodlar: https://stackblitz.com/edit/react-scu6sr
demo: https://react-scu6sr.stackblitz.io

kesinlikle tailwindi tercih ederim :) customize edip istediğin her projeye uyarlayabiliyorsun.
ek olarak class isimleri uzunsa zaten biliyorsun @apply direktifi ile kısaltıp kullanabilirsin, javascript projesinde ise kısatlamdan component base kullanabilirsin çok daha rahat ve hızlı iş çıkıyor.

layout kurmak için her zaman flex ya da grid kullanmalısın, absolute sadece modal, popup gibi alanlar için onun dışında ihtiyacın yok, inline-block ise neredeyse hiçbir zaman ihtiyacın olmayacak

tam olarak olayın ne olduğunu anlayamamışsın muhtemelen, açıklayalım;

node.js bir back-end dili (php gibi, javascript yazıyorsun), jquery ise bir javascript kütüphanesi.
gerçek zamanlı işlemler istiyorsan socket.io'ya bakabilirsin php ile kullanımları var, sayfa yenilemeden işlem yapmak istiyorsan jquery'deki ajax metodları işini fazlasıyla çözer, php ve nodejs'i bir arada kullanmak içinse bir sebebin yok

bunu elle yapmıyorlar, webpack gibi araçlarla build aldıklarında otomatik sıkıştırıyor daha performanslı olsun diye, geliştirme ortamındaki css dosyaları çok daha düzenli olur, production seviyesine geldiğinde bu şekilde görünürler.