<%@ Page Title="Dark Mode" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Dark Mode - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Dark Mode</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Dark Mode Toggle</div> <div class="demo-card-body"> <p class="demo-description"> Toggle between light and dark themes by switching a CSS class.
 The uploader respects CSS variable overrides scoped to the dark class.
 </p> <div class="demo-expect"><strong>What you should see:</strong> the dark palette applied to the whole control, with contrast maintained rather than simply inverted.</div> <style> .dark-mode-container {
 padding: 1.5rem;
 border-radius: 0.5rem;
 border: 1px solid #e5e7eb;
 transition: background-color 0.3s, color 0.3s;
 }
 .dark-mode-container.cu-dark {
 --cu-primary: #6366f1;
 --cu-primary-hover: #818cf8;
 --cu-primary-text: #ffffff;
 --cu-bg: #1f2937;
 --cu-text: #f3f4f6;
 --cu-border-color: #374151;
 --cu-progress-bg: #374151;
 --cu-progress-fill: #6366f1;
 background-color: #111827;
 color: #f3f4f6;
 }
 .dark-mode-container:not(.cu-dark) {
 background-color: #ffffff;
 }
 #darkToggle { margin-bottom: 1rem; }
 </style> <button type="button" id="darkToggle" class="btn btn-outline-secondary btn-sm">Toggle Dark Mode</button> <div id="darkContainer" class="dark-mode-container"> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 ButtonText="Upload Files"
 ShowProgress="true" /> </div> <div class="code-panel"> <pre><code>.cu-dark {
 --cu-primary: #6366f1;
 --cu-bg: #1f2937;
 --cu-text: #f3f4f6;
 --cu-border-color: #374151;
 background-color: #111827;
 color: #f3f4f6;
}

&lt;button type="button" id="darkToggle"&gt;
 Toggle Dark Mode
&lt;/button&gt;
&lt;div id="container"&gt;
 &lt;au:AjaxFileUpload ID="Uploader1" runat="server" /&gt;
&lt;/div&gt;

var toggle = document.getElementById('darkToggle');
var container = document.getElementById('container');
if (toggle && container) {
 toggle.addEventListener('click', function () {
  container.classList.toggle('cu-dark');
 });
}</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> (function () {
 var toggle = document.getElementById('darkToggle');
 var container = document.getElementById('darkContainer');
 if (!toggle || !container) return;
 function setDarkMode(enabled) {
 container.classList.toggle('cu-dark', enabled);
 toggle.textContent = enabled ? 'Switch to Light' : 'Toggle Dark Mode';
 toggle.setAttribute('aria-pressed', String(enabled));
 }
 toggle.setAttribute('aria-pressed', 'false');
 toggle.addEventListener('click', function () {
 setDarkMode(!container.classList.contains('cu-dark'));
 });
 })();
</script>
</asp:Content>
