lang/tr.php lang/en.php olarak tutup geriye array dönersin.

// lang/en.php

return [
    'Merhaba Dünya' => 'Hello World',
    'Toplam %s İçerik Bulundu' => '%s Content Found'
];

Kullanırkende aslında bir fonksiyondan geçireceksin. Öncelikle mevcut dilin dosyasını yükletmen lazım.

// config.php gibi bir dosyan olduğunu varsayalım

$langKy = $_SESSION['lang'] ?? 'en'; // sessionda dil tanımsız ise varsayılan 'en' olarak ayarladım ben
$lang = file_get_contents(__DIR__ . '/lang/' . $langKey . '.php');

şimdi bir fonksiyon yazalım örneğin adı __() olabilir. Ve global olarak içine $lang değerini alıp gelen text varsa translate halini yoksa textin kendisini döndürelim.

function __($key) {
    global $lang;
    return $lang[$key] ?? $key;
}

artık kullanırkende şöyle kullanacağız.

// view örneği

<p>
    <?=__('Merhaba Dünya')?>
</p>
<p>
    <?=sprintf(__('Toplam %s İçerik Bulundu'), 3)?>
</p>

artık dilin ingilizce ise bu arkadaşları ingilizce görmen gerek. Dosyanın boyutu gözünü korkutmasın yormaz seni o kadar.

container classı yerine container-fluid verebilirsin

@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.