J
jam4b0Jul 21, 2020
I want to use the dark mode and add the GDPR code but the color are wrong show screen screen pls!
<body class="stretched dark">
GDPR in Dark Mode issue
1 reply·opened Jul 21, 2020
S
SemiColonWebSTAFFJul 22, 2020
Hello,
The GDPR Settings Modal uses Helper Classes to avoid bloating. You will simply need to change a couple of Classes to make this work with Dark Scheme. Consider updating the exiting Modal codes with this:
<!-- GDPR Preferences -->
<div class="mfp-hide" id="gdpr-preferences">
	<div class="block mx-auto bg-dark" style="max-width: 800px;">
		<div class="p-5" style="max-height: 400px; overflow-y: scroll; -webkit-overflow-scrolling: touch;">
			<h4 class="mb-3">Privacy Preferences</h4>
			<p class="mb-5">When you visit any website, it may store or retrieve information through your browser, usually in the form of cookies. Since we respect your right to privacy, you can choose not to permit data collection from certain types of services. However, not allowing these services may impact your experience.</p>
			<ul class="list-group list-group-flush">
				<li class="list-group-item bg-transparent px-0 py-4">
					<div class="row">
						<div class="col">
							<div class="toggle mb-0">
								<div class="toggle-header">
									<div class="toggle-icon">
										<i class="toggle-closed icon-line-plus"></i>
										<i class="toggle-open icon-line-minus"></i>
									</div>
									<div class="toggle-title">
										Privacy Policy
									</div>
								</div>
								<div class="toggle-content pl-4">
									Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.
								</div>
							</div>
						</div>
						<div class="col-auto text-right">
							<small><strong>REQUIRED</strong></small>
						</div>
					</div>
				</li>
				<li class="list-group-item bg-transparent px-0 py-4">
					<div class="row">
						<div class="col">
							<div class="toggle mb-0">
								<div class="toggle-header">
									<div class="toggle-icon">
										<i class="toggle-closed icon-line-plus"></i>
										<i class="toggle-open icon-line-minus"></i>
									</div>
									<div class="toggle-title">
										Content Delivery Network
									</div>
								</div>
								<div class="toggle-content pl-4">
									Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.
								</div>
							</div>
						</div>
						<div class="col-auto text-right">
							<small><strong>REQUIRED</strong></small>
						</div>
					</div>
				</li>
				<li class="list-group-item bg-transparent px-0 py-4">
					<div class="row">
						<div class="col">
							<div class="toggle mb-0">
								<div class="toggle-header">
									<div class="toggle-icon">
										<i class="toggle-closed icon-line-plus"></i>
										<i class="toggle-open icon-line-minus"></i>
									</div>
									<div class="toggle-title">
										Youtube <small>(Hosting Video Platform by Google Inc.)</small>
									</div>
								</div>
								<div class="toggle-content pl-4">
									Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.
								</div>
							</div>
						</div>
						<div class="col-auto text-right">
							<div class="switch d-inline-block">
								<input id="switch-toggle-youtube" class="switch-toggle switch-toggle-flat switch-flat-mini" type="checkbox" checked>
								<label class="m-0" for="switch-toggle-youtube"></label>
							</div>
						</div>
					</div>
				</li>
				<li class="list-group-item bg-transparent px-0 py-4">
					<div class="row">
						<div class="col">
							<div class="toggle mb-0">
								<div class="toggle-header">
									<div class="toggle-icon">
										<i class="toggle-closed icon-line-plus"></i>
										<i class="toggle-open icon-line-minus"></i>
									</div>
									<div class="toggle-title">
										Vimeo <small>(Hosting Video Platform)</small>
									</div>
								</div>
								<div class="toggle-content pl-4">
									Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.
								</div>
							</div>
						</div>
						<div class="col-auto text-right">
							<div class="switch d-inline-block">
								<input id="switch-toggle-vimeo" class="switch-toggle switch-toggle-flat switch-flat-mini" type="checkbox">
								<label class="m-0" for="switch-toggle-vimeo"></label>
							</div>
						</div>
					</div>
				</li>
				<li class="list-group-item bg-transparent px-0 py-4">
					<div class="row">
						<div class="col">
							<div class="toggle mb-0">
								<div class="toggle-header">
									<div class="toggle-icon">
										<i class="toggle-closed icon-line-plus"></i>
										<i class="toggle-open icon-line-minus"></i>
									</div>
									<div class="toggle-title">
										Google Ads <small>(Advertisement Delivery Network)</small>
									</div>
								</div>
								<div class="toggle-content pl-4">
									Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.
								</div>
							</div>
						</div>
						<div class="col-auto text-right">
							<div class="switch d-inline-block">
								<input id="switch-toggle-googleads" class="switch-toggle switch-toggle-flat switch-flat-mini" type="checkbox" checked>
								<label class="m-0" for="switch-toggle-googleads"></label>
							</div>
						</div>
					</div>
				</li>
				<li class="list-group-item bg-transparent px-0 py-4">
					<div class="row">
						<div class="col">
							<div class="toggle mb-0">
								<div class="toggle-header">
									<div class="toggle-icon">
										<i class="toggle-closed icon-line-plus"></i>
										<i class="toggle-open icon-line-minus"></i>
									</div>
									<div class="toggle-title">
										Dailymotion <small>(Hosted Video Platform)</small>
									</div>
								</div>
								<div class="toggle-content pl-4">
									Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.
								</div>
							</div>
						</div>
						<div class="col-auto text-right">
							<div class="switch d-inline-block">
								<input id="switch-toggle-dailymotion" class="switch-toggle switch-toggle-flat switch-flat-mini" type="checkbox">
								<label class="m-0" for="switch-toggle-dailymotion"></label>
							</div>
						</div>
					</div>
				</li>
				<li class="list-group-item bg-transparent px-0 py-4">
					<div class="row">
						<div class="col">
							<div class="toggle mb-0">
								<div class="toggle-header">
									<div class="toggle-icon">
										<i class="toggle-closed icon-line-plus"></i>
										<i class="toggle-open icon-line-minus"></i>
									</div>
									<div class="toggle-title">
										Facebook & Instagram <small>(Social Media)</small>
									</div>
								</div>
								<div class="toggle-content pl-4">
									Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.
								</div>
							</div>
						</div>
						<div class="col-auto text-right">
							<div class="switch d-inline-block">
								<input id="switch-toggle-facebook" class="switch-toggle switch-toggle-flat switch-flat-mini" type="checkbox">
								<label class="m-0" for="switch-toggle-facebook"></label>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="section text-center p-4 m-0 border-top border-default">
			<a href="#" class="btn btn-primary" onClick="$.magnificPopup.close();return false;">Save Preferences</a><br>
			<a href="#" class="btn btn-link text-muted"><small>Privacy Policy</small></a>
		</div>
	</div>
</div>This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard