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@/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.