dashboard-core/theme/dbd-soft-ui/views/partials/theme.ejs

<div class="fixed-plugin">
	<a id="themeButton" class="fixed-plugin-button text-dark position-fixed px-3 py-2">
		<i class="fa fa-cog py-2"> </i>
	</a>
	<div class="card shadow-lg ">
		<div class="card-header pb-0 pt-3 ">
			<div class="float-start">
				<h5 class="mt-3 mb-0"><%- req?.locales?.partials?.settings?.title || "Site Configuration" %></h5>
				<p><%- req?.locales?.partials?.settings?.description || "Configurable Viewing Options" %></p>
			</div>
			<div class="float-end mt-4">
				<button aria-label="Close Panel" class="btn btn-link text-dark p-0 fixed-plugin-close-button">
					<i class="fa fa-close"></i>
				</button>
			</div>
			<!-- End Toggle Button -->
		</div>
		<hr class="horizontal dark my-1">
		<div class="card-body pt-sm-3 pt-0">
			<!-- Sidebar Backgrounds -->
			<!-- Sidenav Type -->
			<div class="mt-3">
				<h6 class="mb-0"><%- req?.locales?.partials?.settings?.theme?.title || "Site Theme" %></h6>
				<p class="text-sm"><%- req?.locales?.partials?.settings?.theme?.description || "Make the site more appealing for your eyes!" %></p>
			</div>
			<div class="d-flex">
				<button data-theme="auto"
						class="theme btn bg-gradient-primary w-100 px-3 mb-2 ms-2 <% if (req.cookies?.selectedTheme == "auto") { %>active<% } %>"
						data-class="bg-white">
					Auto
				</button>
				<button data-theme="light"
						class="theme btn bg-gradient-primary w-100 mb-2 ms-2 <% if (req.cookies?.selectedTheme == "light") { %>active<% } %>"
						data-class="bg-transparent">
					Light
				</button>
				<button data-theme="dark"
						class="theme btn bg-gradient-primary w-100 px-3 mb-2 ms-2 <% if (req.cookies?.selectedTheme == "dark") { %>active<% } %>"
						data-class="bg-white">
					Dark
				</button>

			</div>
			<div class="mt-5">
				<h6 class="mb-0"><%- req?.locales?.partials?.settings?.language?.title || "Site Language" %></h6>
				<p class="text-sm"><%- req?.locales?.partials?.settings?.language?.description || "Select your preferred language!" %></p>
			</div>
			<div class="d-flex">
				<select name="languages" id="lang" class="form-control">
					<%
						let locales = {};
						locales = (themeConfig.locales) ? themeConfig.locales : themeConfig.defaultLocales;
						Object.keys(locales).forEach((lang) => { %>
						<option value="<%= lang %>" <%= lang === req?.lang ? 'selected' : '' %>><%= locales[lang].name %></option>
					<% }) %>
				</select>
			</div>
			<p class="text-sm d-xl-none d-block mt-2">You can change the sidenav type just on desktop view.</p>
		</div>
	</div>
</div>
<script>
	$("#lang").change(function () {
		var lang = $(this).val();
		setCookie('lang', lang, 365);

		location.reload()
	});

</script>
<script src="./js/configMenu.js"></script>