/**
* 2010-2026 SwissGeek | Web Developer Freelance
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop or PhenixSuite to newer
* versions in the future. If you wish to customize PrestaShop or PhenixSuite for your
* needs please refer to https://www.prestashop.com or https://www.phenixsuite.com for more information.
*
* @Module SGK Dark Mode
* @Description Switch your PrestaShop to dark mode, on both the Front Office and the Back Office.
* @Version 2.0.1
* @Copyright SwissGeek | Web Developer Freelance
* @support Support Requests
* @Blog Breaking News
* @Addons Developments
*
* @license Valid for 1 website (or project) for each purchase of license International Registered
* Trademark & Property of SwissGeek. More information on
*/
/* Pre-paint safety layer. The boot script adds .sgk-dark on before the
body is painted; without these rules the storefront would still be painted
light (white body) until the engine finishes loading, producing a visible
flash on every page view for dark-mode visitors.
color-scheme also darkens the scrollbars and the native form controls
immediately, before the engine has processed a single stylesheet. */
html.sgk-dark {
color-scheme: dark;
background-color: #181a1b;
}
html.sgk-dark body {
background-color: #181a1b;
color: #e8e6e3;
}
.sgk-fab {
position: fixed;
z-index: 2147483000;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
padding: 0;
margin: 0;
border: 0;
border-radius: 50%;
cursor: pointer;
color: #ffffff;
/* SwissGeek anthracite */
background: #1E1E26;
box-shadow: 0 4px 14px rgba(15, 18, 25, .32), 0 1px 3px rgba(15, 18, 25, .28);
transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
-webkit-tap-highlight-color: transparent;
}
.sgk-fab:hover {
transform: translateY(-2px);
background: #2C2C37;
box-shadow: 0 8px 22px rgba(15, 18, 25, .38), 0 2px 5px rgba(15, 18, 25, .3);
}
.sgk-fab:active {
transform: translateY(0);
}
/* Brand red focus ring, kept visible on any storefront background
thanks to the inner white halo. */
.sgk-fab:focus {
outline: none;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #D41414;
}
.sgk-fab:focus:not(:focus-visible) {
box-shadow: 0 4px 14px rgba(15, 18, 25, .32), 0 1px 3px rgba(15, 18, 25, .28);
}
.sgk-fab:focus-visible {
outline: none;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #D41414;
}
/* Active state (dark mode on) uses the SwissGeek brand red. */
.sgk-fab.sgk-fab--on {
color: #ffffff;
background: #D41414;
}
.sgk-fab.sgk-fab--on:hover {
background: #B30E0E;
}
.sgk-fab svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
/* ------------------------------ Positions ------------------------------- */
.sgk-fab--bottom-right {
bottom: 22px;
inset-inline-end: 22px;
}
.sgk-fab--bottom-left {
bottom: 22px;
inset-inline-start: 22px;
}
.sgk-fab--middle-right {
top: 50%;
inset-inline-end: 0;
transform: translateY(-50%);
border-radius: 50% 0 0 50%;
width: 46px;
}
/* Keep the vertical centring through hover/active so the button never jumps
on press (the base :active rule would otherwise reset translateY). */
.sgk-fab--middle-right:hover {
transform: translateY(-50%) translateX(-2px);
}
.sgk-fab--middle-right:active {
transform: translateY(-50%);
}
[dir="rtl"] .sgk-fab--middle-right {
border-radius: 0 50% 50% 0;
}
[dir="rtl"] .sgk-fab--middle-right:hover {
transform: translateY(-50%) translateX(2px);
}
[dir="rtl"] .sgk-fab--middle-right:active {
transform: translateY(-50%);
}
/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 600px) {
.sgk-fab {
width: 46px;
height: 46px;
}
.sgk-fab svg {
width: 21px;
height: 21px;
}
.sgk-fab--bottom-right,
.sgk-fab--bottom-left {
bottom: 16px;
}
.sgk-fab--bottom-right {
inset-inline-end: 16px;
}
.sgk-fab--bottom-left {
inset-inline-start: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.sgk-fab {
transition: none;
}
}
@media print {
.sgk-fab {
display: none !important;
}
}