Welcome to the playground!
This page allows you to create a starter config. for CookieConsent v3 and also see it in action.
New Google requirements 🚨
Google AdSense, Ad Manager and AdMob will no longer work with CookieConsent ...
.cc--light-funky {
color-scheme: light;
--cc-bg: #f9faff;
--cc-primary-color: #112954;
--cc-secondary-color: #112954;
--cc-btn-primary-bg: #3859d0;
--cc-btn-primary-color: var(--cc-bg);
--cc-btn-primary-hover-bg: #213657;
--cc-btn-primary-hover-color: #fff;
--cc-btn-secondary-bg: #dfe7f9;
--cc-btn-secondary-color: var(--cc-secondary-color);
--cc-btn-secondary-hover-bg: #c6d1ea;
--cc-btn-secondary-hover-color: #000;
--cc-cookie-category-block-bg: #ebeff9;
--cc-cookie-category-block-border: #ebeff9;
--cc-cookie-category-block-hover-bg: #dbe5f9;
--cc-cookie-category-block-hover-border: #dbe5f9;
--cc-cookie-category-expanded-block-hover-bg: #ebeff9;
--cc-cookie-category-expanded-block-bg: #ebeff9;
--cc-overlay-bg: rgba(219, 232, 255, 0.85)!important;
--cc-toggle-readonly-bg: #cbd8f1;
--cc-toggle-on-knob-bg: var(--cc-bg);
--cc-toggle-off-bg: #8fa8d6;
--cc-toggle-readonly-knob-bg: var(--cc-bg);
--cc-separator-border-color: #f1f3f5;
--cc-footer-border-color: #f1f3f5;
--cc-footer-bg: var(--cc-bg);
--cc-btn-border-radius: 1rem .6rem 1.3rem .5rem / .5rem 1rem;
--cc-modal-border-radius: var(--cc-btn-border-radius);
--cc-pm-toggle-border-radius: var(--cc-btn-border-radius);
}
.cc--light-funky #cc-main .toggle__icon:after {
border-radius: var(--cc-btn-border-radius);
}
.cc--light-funky #cc-main .cm__btn--close {
border-radius: var(--cc-btn-border-radius);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.cc--dark-turquoise {
color-scheme: dark;
--cc-bg: #161a1c;
--cc-primary-color: rgb(239, 244, 246);
--cc-secondary-color: #b1bdc3;
--cc-btn-primary-bg: #60fed2;
--cc-btn-primary-color: #000;
--cc-btn-primary-hover-bg: #4dd4ae;
--cc-btn-primary-hover-color: #000;
--cc-btn-secondary-bg: #242c31;
--cc-btn-secondary-color: var(--cc-primary-color);
--cc-btn-secondary-hover-bg: #d4dae0;
--cc-btn-secondary-hover-color: #000;
--cc-cookie-category-block-bg: #1e2428;
--cc-cookie-category-block-border: #1e2428;
--cc-cookie-category-block-hover-bg: #242c31;
--cc-cookie-category-block-hover-border: #242c31;
--cc-cookie-category-expanded-block-hover-bg: #242c31;
--cc-cookie-category-expanded-block-bg: #1e2428;
--cc-toggle-readonly-bg: #343e45;
--cc-overlay-bg: rgba(4, 6, 8, .85)!important;
--cc-toggle-on-knob-bg: var(--cc-bg);
--cc-toggle-readonly-knob-bg: var( --cc-cookie-category-block-bg);
--cc-separator-border-color: #222a30;
--cc-footer-border-color: #212529;
--cc-footer-bg: #0f1112;
}
.cc--elegant-black {
color-scheme: dark;
--cc-bg: #000;
--cc-primary-color: rgb(239, 244, 246);
--cc-secondary-color: #b1bdc3;
--cc-btn-primary-bg: #ffffff;
--cc-btn-primary-color: #000;
--cc-btn-primary-hover-bg: #ccd4d8;
--cc-btn-primary-hover-color: #000;
--cc-btn-secondary-bg: rgba(255, 255, 255, 0.039);
--cc-btn-secondary-color: var(--cc-primary-color);
--cc-btn-secondary-border-color: #252729;
--cc-btn-secondary-hover-bg: #252729;
--cc-btn-secondary-hover-color: #fff;
--cc-btn-secondary-hover-border-color: #252729;
--cc-cookie-category-block-bg: #101111;
--cc-cookie-category-block-border: #1d1e1f;
--cc-cookie-category-block-hover-bg: #151516;
--cc-cookie-category-block-hover-border: #1d1e1f;
--cc-cookie-category-expanded-block-hover-bg: #1d1e1f;
--cc-cookie-category-expanded-block-bg: #101111;
--cc-toggle-readonly-bg: #2f3132;
--cc-overlay-bg: rgba(0, 0, 0, 0.9)!important;
--cc-toggle-on-knob-bg: var(--cc-bg);
--cc-toggle-readonly-knob-bg: var( --cc-cookie-category-block-bg);
--cc-separator-border-color: #252729;
--cc-footer-border-color: #212529;
--cc-footer-bg: #000;
}
.cc--elegant-black #cc-main .cm,
.cc--elegant-black #cc-main .pm {
border: 1px solid var(--cc-separator-border-color);
}
Download the cookieconsent-config.js
javascript file:
Add the script in the <body>
tag:
<script type="module" src="cookieconsent-config.js"></script>
Add the stylesheet in the <head>
tag:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.1.0/dist/cookieconsent.css">
You can use iframemanager for this task.
Check out the documentation!
If you can't find what you're looking for, feel free to open an issue or a discussion on github.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.