{"id":20941073,"url":"https://github.com/alma-oss/cookie-consent-manager","last_synced_at":"2026-01-12T02:21:52.725Z","repository":{"id":37877627,"uuid":"411982901","full_name":"alma-oss/cookie-consent-manager","owner":"alma-oss","description":"Alma Career Cookie Consent Manager","archived":false,"fork":false,"pushed_at":"2025-05-07T08:32:28.000Z","size":2974,"stargazers_count":14,"open_issues_count":7,"forks_count":3,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-05-07T09:35:21.029Z","etag":null,"topics":["consent","consent-manager","cookie","cookie-policy","gdpr"],"latest_commit_sha":null,"homepage":"https://alma-oss.github.io/cookie-consent-manager/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alma-oss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-09-30T08:25:23.000Z","updated_at":"2025-04-10T09:53:48.000Z","dependencies_parsed_at":"2022-07-14T10:21:39.118Z","dependency_job_id":"6c381cc3-f9fd-4213-8897-388fe7a5b96e","html_url":"https://github.com/alma-oss/cookie-consent-manager","commit_stats":{"total_commits":380,"total_committers":8,"mean_commits":47.5,"dds":0.6052631578947368,"last_synced_commit":"eeaa4151e55530eb6d5d607bd364a2a748769fad"},"previous_names":["alma-oss/cookie-consent-manager","lmc-eu/cookie-consent-manager"],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alma-oss%2Fcookie-consent-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alma-oss%2Fcookie-consent-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alma-oss%2Fcookie-consent-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alma-oss%2Fcookie-consent-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alma-oss","download_url":"https://codeload.github.com/alma-oss/cookie-consent-manager/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254043216,"owners_count":22004912,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["consent","consent-manager","cookie","cookie-policy","gdpr"],"created_at":"2024-11-18T23:12:50.260Z","updated_at":"2025-10-12T16:13:08.691Z","avatar_url":"https://github.com/alma-oss.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://img.shields.io/npm/v/@almacareer/cookie-consent-manager.svg)](https://www.npmjs.com/package/@almacareer/cookie-consent-manager)\n[![CI](https://github.com/alma-oss/cookie-consent-manager/actions/workflows/test.yaml/badge.svg?branch=main)](https://github.com/alma-oss/cookie-consent-manager/actions)\n\n# Alma Career Cookie Consent Manager\n\nProvide configurable cookie consent plugin for Alma Career (formerly LMC) products.\nThe package contains predefined Alma Career settings, translations and UI based on [Spirit Design System].\n\nThe package is a wrapper around [Cookie Consent] by [Orest Bida].\n\n## Table of contents\n\n1. [Upgrade to version 3.x](#upgrade-to-version-30)\n1. [Basic usage](#basic-usage)\n1. [Loading the plugin](#loading-the-plugin)\n1. [Manage features depending on the given consent](#manage-features-depending-on-the-given-consent)\n1. [Configuration](#configuration)\n1. [Configuration options](#configuration-options)\n1. [Theming](#theming)\n1. [Development and contributing](#development-and-contributing)\n\n## Upgrade to version 3.0\n\nSee [upgrade guide](UPGRADE-3.0.md) for upgrade guidance from version 2.x to version 3.0.\nFor complete list of changes see [changelog](CHANGELOG.md).\n\n## Basic usage\n\nMake assets load faster by placing pre-connect headers right after `\u003cmeta charset\u003e` in your `\u003chead\u003e`:\n\n```html\n\u003clink rel=\"preconnect\" href=\"https://cdn.jsdelivr.net\"\u003e\n\u003clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\"\u003e\n\u003clink rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin\u003e\n```\n\nLoad default CSS along with your styles in `\u003chead\u003e`:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700\u0026display=swap\"\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@almacareer/cookie-consent-manager@3/CookieConsentManager.min.css\"\u003e\n```\n\nIf you use an older version of Alma Career's [Spirit Design System] (version 2 or lower) or if you don't use the Spirit Design System at all, you need to load the themes CSS file:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@almacareer/cookie-consent-manager@3/CookieConsentManagerThemes.min.css\"\u003e\n```\n\nLoad the script and initialize the plugin right before ending `\u003c/body\u003e` tag:\n\n```html\n\u003cscript defer src=\"https://cdn.jsdelivr.net/npm/@almacareer/cookie-consent-manager@3/init.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nwindow.addEventListener('DOMContentLoaded', function () {\n  initCookieConsentManager('demo.example'); // use the name of your service, like jobs.cz, seduo.pl etc.\n});\n\u003c/script\u003e\n```\n\nThis will load the plugin from CDN and initialize the plugin with default settings.\n\nAs a next step, add a link to open cookie preferences after the consent was previously given. This link should be placed\nsomewhere in the page footer, usually near \"Terms of use\" and \"Privacy policy\" links. Please note it is legally required\nto provide the user such link to change cookie preferences even after the first consent is given.\n\n```html\n\u003ca href=\"\" data-cc=\"show-preferencesModal\"\u003eOpen cookie preferences\u003c/a\u003e\n```\n\n[👀 See demo page with example][examples].\n\n## Loading the plugin\n\n### Via CDN or static file\n\nYou can load the plugin from a CDN, as in the basic example above.\n\n```html\n\u003c!-- Note we use version \"cookie-consent-manager@3\", which points to the latest version of this series (including feature and bugfix releases) --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700\u0026display=swap\"\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@almacareer/cookie-consent-manager@3/CookieConsentManager.min.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@almacareer/cookie-consent-manager@3/CookieConsentManagerThemes.min.css\"\u003e\u003c!-- Only if you do NOT use Spirit Design System (or you use Spirit Design System version 2 or lower) --\u003e\n\u003cscript defer src=\"https://cdn.jsdelivr.net/npm/@almacareer/cookie-consent-manager@3/init.js\"\u003e\u003c/script\u003e\n```\n\nAlternatively, you can also download the latest version from the [Releases page](https://github.com/alma-oss/cookie-consent-manager/releases).\n\nLoading the plugin from CDN or static file is recommended mostly **for static sites without their own build process**.\n\nOnce the plugin is loaded, you need to initialize it using `initCookieConsentManager()` method, optionally providing\n[configuration parameters](#configuration).\n\n### Via npm\n\nFor projects with their own build process for JavaScript, it is recommended to use the plugin\nvia npm package [@almacareer/cookie-consent-manager](https://www.npmjs.com/package/@almacareer/cookie-consent-manager).\n\n1. Add the plugin to your dependencies:\n    ```sh\n    yarn add @almacareer/cookie-consent-manager\n    ```\n    or\n    ```sh\n    npm install --save @almacareer/cookie-consent-manager\n    ```\n\n2. Import the module in your javascript:\n    ```js\n    import CookieConsentManager from '@almacareer/cookie-consent-manager';\n\n    window.addEventListener('DOMContentLoaded', function () {\n      CookieConsentManager('demo.example'/* , optional plugin configuration */);\n    });\n    ```\n\n   See below for [configuration options](#configuration).\n\n   You can also look at the [example with EcmaScript module syntax][examples-integration-esm].\n\n3. Include default CSS in your HTML:\n   ```html\n   \u003clink rel=\"stylesheet\" href=\"node_modules/@almacareer/cookie-consent-manager/CookieConsentManager.min.css\"\u003e\n   \u003clink rel=\"stylesheet\" href=\"node_modules/@almacareer/cookie-consent-manager/CookieConsentManagerThemes.min.css\"\u003e\u003c!-- Only if you do NOT use Spirit Design System (or you use Spirit Design System version 2 or lower) --\u003e\n   ```\n   or in your Sass stylesheet:\n   ```scss\n   @use \"node_modules/@almacareer/cookie-consent-manager/CookieConsentManager.css\";\n   @use \"node_modules/@almacareer/cookie-consent-manager/CookieConsentManagerThemes.css\"; // Only if you do NOT use Spirit Design System (or you use Spirit Design System version 2 or lower)\n   ```\n\n   Please mind the `.css` extension used in the Sass example. Using the provided `.scss` stylesheet is\n   recommended only for projects that are built\n   [with Alma Career's Spirit Design System](#with-spirit-design-system).\n\n   Also, the themes CSS is optional and should be included only if you do **NOT** use Alma Career's [Spirit Design System] (or you use Spirit Design System version 2 or lower).\n   For projects built with Spirit Design System version 3 and newer, the themes are already included in the CSS.\n\n   See below for [theme customization options](#theming).\n\n4. For projects that are **NOT** built with Alma Career's [Spirit Design System] or use Spirit Design System version 2 or lower:\n\n   1. Include default font in your HTML:\n      ```html\n      \u003clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\"\u003e\n      \u003clink rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin\u003e\n      \u003clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700\u0026display=swap\"\u003e\n      ```\n      or in your Sass stylesheet:\n      ```scss\n      @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700\u0026display=swap\");\n      ```\n\n   2. Or [switch to custom font](#custom-font) that matches the design of your project.\n\n## Manage features depending on the given consent\n\nFor cookies within \"necessary\" category it is not needed to check whether a user has given any consent.\n\nHowever, for all other purposes, it must be explicitly checked whether user has given the appropriate\nconsent category. This must be done *before* the respective cookie is set.\n\nIn case user rejects some (or all) optional consent categories, **you must implement logic to remove current cookies\n(as well as localStorage) in your product yourself**, this library does not manipulate with the cookies by default.\n(However you can use `autoClearCookies` config option.)\n\n### Consent categories\n\n| Category          | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |\n|-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `necessary`       | Strictly necessary cookies are essential for user to browse the website and use its features, such as accessing secure areas of the site. These cookies are first-party cookies.\u003cbr\u003eSome examples of strictly necessary cookies: Session cookies, Cookie consent cookies, Load balancing cookies, CSFR tokens, Language selection cookies, Region/country cookies, Performance cookies, Application firewall cookies and JavaScript check cookies.\u003cbr\u003eFor these cookies you **don't need to check** whether user actually has this category. |\n| `ad`              | For cookies related to advertising                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |\n| `analytics`       | For analysis and statistics                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |\n| `functionality`   | For extended functionality (not covered by `necessary` category)                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |\n| `personalization` | For personalization based on user profiling (recommendation, etc.)                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |\n\n### GTM (Google Tag Manager) scripts\n\nIf you manage GTM script outside of Alma Career Central, you must set proper GTM consent mode properties to dataLayer. See this [example][cookie consent gtm example] (or you can use `onFirstConsent()` and `onChange()` callbacks).\n\nIf GTM of the product is managed by Alma Career Central, after implementing this library, you don't need to worry about conditions when to run them. However, keep in mind you still need to **take care (i.e. delete) of already existing cookies**, even of those created by GTM scripts.\n\n### Custom methods\n\nTo execute custom code which depends on cookie consent use callbacks:\n\n```js\n// ...\ninitCookieConsentManager(\n  'demo.example',\n  {\n    onConsent: ({ cookieConsent, cookie }) =\u003e {\n      if (cookieConsent.acceptedCategory('functionality')) {\n        startOptionalFeature();\n      }\n    },\n  }\n);\n// ...\n```\n\n### Third party scripts loaded via `\u003cscript\u003e`\n\nTo automatically load external scripts after a specific consent category is given by the user, modify the `\u003cscript\u003e` tag:\nset `type` to `type=\"text/plain\"` and add `data-category` attribute with required consent category.\n\n```html\n\u003cscript src=\"personalization.js\" type=\"text/plain\" data-category=\"personalization\" defer\u003e\u003c/script\u003e\n\n\u003cscript type=\"text/plain\" data-category=\"functionality\"\u003e\n   console.log('functionality consent given');\n\u003c/script\u003e\n```\n\n[👀 This feature is also shown in examples][examples].\nSee also [full documentation][cookie consent third party] for this feature.\n\nThis feature is enabled by default. If you'd like to disable it, you can do so by overriding `manageScriptTags` value in\n`config` option:\n\n```js\ninitCookieConsentManager(\n  'demo.example',\n  {\n    config: {\n      manageScriptTags: false\n    }\n  }\n);\n```\n\n## Configuration\n\nOptional config parameters could be provided on plugin initialization as the second parameter,\nencapsulated in the configuration object.\n\n```js\ninitCookieConsentManager( // when loaded as a module, these options are passed to `CookieConsentManager()` instead\n  'demo.example', // provide the name of your service, like jobs.cz, seduo.pl etc.\n  {\n    defaultLang: 'cs',\n    autodetectLang: false,\n    onConsent: ({ cookieConsent, cookie }) =\u003e {\n      // custom code\n    },\n    translationOverrides: { // overrides of the default translation for specified languages\n      cs: { consentTitle: 'Vlastní nadpis', descriptionIntro: 'Vlastní úvodní text popisu souhlasu' },\n      en: { consentTitle: 'Custom title' },\n    },\n    cookieTable: { // cookie table for specified languages, shown in preferences modal\n      cs: {\n        necessary: [\n          { name: 'almacareer_ccm', description: 'Cookie je nezbytná k uložení vašich preference týkající se povolených kategorií cookies', expiration: '1 rok' },\n          { name: 'PHPSESSID', description: 'Cookie nezbytná ke správnému fungování webu', expiration: 'do konce relace' },\n        ],\n        // ad: [ ... ],\n        analytics: [\n          { name: '_ga', description: 'Nástrojem Google Analytics zjišťujeme, kolik lidí náš web navštěvuje a jak ho používá', expiration: '2 roky' },\n          { name: '_utm', description: 'Nástrojem Google Analytics zjišťujeme, kolik lidí náš web navštěvuje a jak ho používá', expiration: '2 roky' },\n        ],\n        // functionality: [ ... ],\n        // personalization: [ ... ]\n      },\n      en: {\n        analytics: [\n          { name: '_ga', description: 'With Google Analytics we determine how many people visit our website and how they use it', expiration: '2 years' },\n          // ...\n        ],\n      }\n    },\n    config: {\n      // overrides of the internal config of the underlying library, see https://cookieconsent.orestbida.com/reference/configuration-reference.html\n    },\n  }\n);\n```\n\n[👀 See extended configuration example][examples-configuration]\n\n## Configuration options\n\n| Option                   | Type                                | Default value                                               | Description                                                                                                                                                                                                   |\n|--------------------------|-------------------------------------|-------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `autodetectLang`         | boolean                             | `true`                                                      | Autodetect language based on the value of `\u003chtml lang=\"...\"\u003e`. If autodetect fails or if unsupported language is detected, fallback to `defaultLang`.\u003cbr\u003eWhen disabled, force language to `defaultLang`.      |\n| `defaultLang`            | string                              | `'cs'`                                                      | Default language. One of `cs`, `de`, `en`, `hu`, `pl`, `ru`, `sk`, `uk`. This language will be used when autodetect is disabled or when it fails.                                                             |\n| `companyNames`           | array                               | `['Alma Career']`                                           | Array of strings with company names. Adjust only when the consent needs to be given to multiple companies. Value \"Alma Career\" is replaced with translated legal name. [See example][examples-configuration]. |\n| `consentCollectorApiUrl` | ?string                             | `'https://consents.almacareer.tech/acl-lda/(...)'`          | URL of the API where user consent information is sent. Null to disable sending data to the API.                                                                                                               |\n| `config`                 | Object                              | `{}`                                                        | Override internal config of the underlying library. For all parameters see [config reference of the original library][cookie consent options].                                                                |\n| `displayMode`            | DisplayMode (string)                | `DisplayMode.FORCE` (`force`)                               | `force` (default) to show consent in a centered modal box and to block page until user action. `soft` to show consent banner on the bottom of the page and do not block the page before user action.          |\n| `on*` callbacks          | function                            | `(cookieConsent) =\u003e {}`                                     | See below for configurable callbacks.                                                                                                                                                                         |\n| `translationOverrides`   | Record\u003cstring, TranslationOverride\u003e | `{}`                                                        | Override default translation for specified languages. `consentTitle`, `descriptionIntro` and `preferencesModalMoreInfo` could be overridden.\u003cbr\u003e[See example][examples-configuration]                         |\n| `cookieTable`            | CookieTable                         | `{}`                                                        | Define a cookie table (shown in the preferences modal) for specified languages and specified categories.\u003cbr\u003e[See above for example configuration](#configuration)                                             |\n\n### Supported languages\n\nTranslation of the user interface is provided in the following languages:\n- Bosnian (`bs`)\n- Croatian (`hr`)\n- Czech (`cs`)\n- English (`en`)\n- Estonian (`et`)\n- French (`fr`)\n- German (`de`)\n- Hungarian (`hu`)\n- Latvian (`lv`)\n- Lithuanian (`lt`)\n- Macedonian (`mk`)\n- Polish (`pl`)\n- Portuguese (`pt`)\n- Romanian (`ro`)\n- Russian (`ru`)\n- Serbian (latin) (`sr`)\n- Slovak (`sk`)\n- Slovenian (`sl`)\n- Spanish (`es`)\n- Ukrainian (`uk`)\n\n[👀 See example of each language version][examples-languages]\n\n### Callbacks\n\nThe library can trigger configured callbacks in various events. They can be used to execute custom functionality,\nfor example, to enable some feature after user has given consent.\n\nEach configured callback receives `cookieConsent` as part of the options object. This is instance of the underlying [cookie consent] library,\nthat can be used to call [its methods][cookie consent api] or retrieve data from the cookie. `cookie` parameter contains value of the consent cookie.\n`onChange()` callback also receiver `categories` object, containing array of `accepted`, `rejected`, and `changed` consent categories.\n\n| Callback                                          | Trigger event                                                                                                                                                          |\n|---------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `onFirstConsent({ cookieConsent, cookie })`       | This function will be executed only once, when the user takes the first action (accept all/only selected/only necessary categories).                                   |\n| `onConsent({ cookieConsent, cookie })`            | Any consent is detected (either given now or after page load if it was already saved previously)                                                                       |\n| `onChange({ cookieConsent, cookie, categories })` | Right after the user changes cookie preferences. The callback receives also `categories` object containing arrays of `accepted`, `rejected`, and `changed` categories. |\n\n[👀 See callbacks example][examples-callbacks]\n\n## Theming\n\n### With Spirit Design System\n\nIf your project uses [Spirit Design System] version 3 and newer, you are almost done!\n\nAll you need to do is to add this plugin's SCSS to your Sass pipeline and use it **instead** of the default CSS:\n\n```scss\n// my-project.scss\n\n// Add this line anywhere you import other third-party CSS, possibly somewhere close\n// to the end of your stylesheet as it contains CSS selectors with high specificity.\n@use '@almacareer/cookie-consent-manager/CookieConsentManager';\n```\n\nThat's it!\n\n\u003cdetails\u003e\n\u003csummary\u003eMake sure you have \u003ccode\u003enode_modules\u003c/code\u003e and path to your design tokens in your Sass load paths.\u003c/summary\u003e\n\nSet up [Sass load path] so the Sass compiler can find stylesheets located in the `node_modules` directory\n(you will already have a path to your design tokens there, as required by [Spirit Web]):\n\n```sh\n# CLI command (possibly used in your npm scripts)\n\nsass --load-path=node_modules --load-path=path/to/my/design-tokens my-project.scss my-project.css\n```\n\nOr with webpack:\n\n```js\n// webpack.config.js\n\n{\n  loader: 'sass-loader',\n  options: {\n    sassOptions: {\n      loadPaths: [\n        path.resolve(\n          __dirname,\n          'node_modules',\n          'path/to/my/design-tokens',\n        ),\n      ],\n    },\n  },\n},\n```\n\n\u003c/details\u003e\n\n**Note:** `sass` v1.23 or higher is required to be able to compile the new Sass modules syntax. You may need to migrate\nto [`sass`][sass] since all other Sass compilers (and the old `@import` rule) are now [deprecated][sass modules].\n\n### With Spirit Design System version 2 or lower\n\nPlease follow the steps below for users who do not use Spirit Design System.\n\n### Without Spirit Design System\n\nA handful of CSS custom properties are available for you to customize the UI to make it match the design of your site.\nFor example, to change the text color of cookie consent UI, load the [default CSS](#basic-usage) and add the following code\nanywhere in your stylesheet (the order of which is not important):\n\n```css\n:root {\n  --cc-primary-color: #333;\n}\n```\n\n[👀 See theming example][examples-theming]\n\n\u003cdetails\u003e\n\u003csummary\u003eFull list of available CSS custom properties:\u003c/summary\u003e\n\n| Category          | CSS custom property                            | Description                                              |\n|-------------------|------------------------------------------------|----------------------------------------------------------|\n| Common            | `--cc-font-family`                             | Base font family                                         |\n|                   | `--cc-bg`                                      | Common background color                                  |\n|                   | `--cc-primary-color`                           | Common primary text color                                |\n|                   | `--cc-secondary-color`                         | Common secondary text color                              |\n| Links             | `--cc-link-color`                              | Link text color                                          |\n| Buttons           | `--cc-btn-border-radius`                       | Button border radius                                     |\n|                   | `--cc-btn-primary-bg`                          | Primary button background color                          |\n|                   | `--cc-btn-primary-color`                       | Primary button text color                                |\n|                   | `--cc-btn-primary-border-color`                | Primary button border color                              |\n|                   | `--cc-btn-primary-hover-bg`                    | Primary button background color on hover                 |\n|                   | `--cc-btn-primary-hover-color`                 | Primary button text color on hover                       |\n|                   | `--cc-btn-primary-hover-border-color`          | Primary button border color on hover                     |\n|                   | `--cc-btn-secondary-bg`                        | Secondary button background color                        |\n|                   | `--cc-btn-secondary-color`                     | Secondary button text color                              |\n|                   | `--cc-btn-secondary-border-color`              | Secondary button border color                            |\n|                   | `--cc-btn-secondary-hover-bg`                  | Secondary button background color on hover               |\n|                   | `--cc-btn-secondary-hover-color`               | Secondary button text color on hover                     |\n|                   | `--cc-btn-secondary-hover-border-color`        | Secondary button border color on hover                   |\n| Toggles           | `--cc-pm-toggle-border-radius`                 | Toggle border radius                                     |\n|                   | `--cc-toggle-on-bg`                            | Toggle background color in selected state                |\n|                   | `--cc-toggle-off-bg`                           | Toggle background color in unselected state              |\n|                   | `--cc-toggle-on-knob-bg`                       | Toggle knob color in selected state                      |\n|                   | `--cc-toggle-off-knob-bg`                      | Toggle knob color in unselected state                    |\n|                   | `--cc-toggle-readonly-bg`                      | Toggle background color in readonly state                |\n|                   | `--cc-toggle-readonly-knob-bg`                 | Toggle knob color in readonly state                      |\n|                   | `--cc-toggle-readonly-knob-icon-color`         | Toggle knob icon color in readonly state                 |\n| Cookie categories | `--cc-cookie-category-block-bg`                | Cookie category block background color                   |\n|                   | `--cc-cookie-category-block-border`            | Cookie category block border color                       |\n|                   | `--cc-cookie-category-block-hover-bg`          | Cookie category block background color on hover          |\n|                   | `--cc-cookie-category-block-hover-border`      | Cookie category block border color on hover              |\n|                   | `--cc-cookie-category-expanded-block-bg`       | Expanded cookie category block background color          |\n|                   | `--cc-cookie-category-expanded-block-hover-bg` | Expanded cookie category block background color on hover |\n| Separators        | `--cc-separator-border-color`                  | Separator border color                                   |\n| Backdrop          | `--cc-overlay-bg`                              | Backdrop background color                                |\n| Modal             | `--cc-modal-margin`                            | Modal margin                                             |\n|                   | `--cc-modal-border-radius`                     | Modal border radius                                      |\n|                   | `--cc-modal-transition-duration`               | Modal transition duration                                |\n| Footer            | `--cc-footer-bg`                               | Footer background color                                  |\n|                   | `--cc-footer-color`                            | Footer text color                                        |\n|                   | `--cc-footer-border-color`                     | Footer border color                                      |\n\n\u003c/details\u003e\n\n### Color themes\n\nStarting from version 3, the Cookie Consent Manager supports color themes.\n\n#### Spirit color themes\n\nThe themes are based on the [Spirit Design Tokens][spirit design tokens], version 3.\n\nFor Spirit Design System users, the themes are already included in the CSS.\n\nFor projects that are **NOT** built with Spirit Design System (or use Spirit Design System version 2 or lower), you need to [load the themes CSS file](#basic-usage) first.\n\nHaving the themes loaded, you can switch between the modes by applying the CSS classes like `.theme-light-default ` or `.theme-light-on-brand`\nto any element of your application.\n\n#### Dark mode\n\nWhile the Spirit Design System does not yet provide a dark mode, you can easily create one by overriding the CSS custom properties:\n\n```css\n@media (prefers-color-scheme: dark) {\n  :root {\n    --cc-bg: #333;\n    --cc-primary-color: #fff;\n    --cc-secondary-color: #ccc;\n    /* … */\n  }\n}\n```\n\n### Custom font\n\nDefault cookie consent design uses Inter font loaded via Google Fonts as shown in the [basic](#basic-usage) example.\nIf you are not using cookie consent with the default design, additional steps may be necessary for you:\n\n- If your project is built with Spirit Design System, you already have the correct font linked in your HTML or CSS.\n- If your project is _not_ built with Spirit Design System, you can switch to any font of your choice:\n  ```css\n  :root {\n    --cc-font-family: \"Open Sans\", arial, sans-serif;\n  }\n  ```\n\nIf you use a custom font like this, make sure you don't load the default Inter font and that you use\n`\u003clink rel=\"preconnect\" ...\u003e` only to actually needed domains.\n\n## Development and contributing\n\n### Local development\n\nInstall package dependencies:\n\n```sh\nyarn install\n```\n\nStart local development server:\n\n```sh\nyarn start\n```\n\nThis will make the development server accessible http://localhost:5173/ .\n\n* The library with init function is served on: http://localhost:5173/dist/init.js\n* Javascript module: http://localhost:5173/dist/CookieConsentManager.js\n* CSS: http://localhost:5173/dist/CookieConsentManager.css\n\n### Contributing\n\nFor commit messages follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification with\n[Alma Career rules](https://github.com/lmc-eu/code-quality-tools/blob/main/packages/commitlint-config/index.js).\nThe commit message will also be automatically checked as pre-commit hook.\n\nTo ensure the code passes linting and code style test run:\n\n```sh\nyarn test\n```\n\nTo fix code style according to Prettier rules run:\n\n```sh\nyarn format:fix\n```\n\n#### Publishing package\n\nPrepare release using `yarn release` on a local machine. Check the generated changelog and the bumped `package.json`.\nThen push to origin. GitHub [publish action](./.github/workflows/publish.yaml) is then taking care of publishing\npackage to [npmjs.com](https://npmjs.com/).\n\n## License\n\nDistributed under the MIT License. See [LICENSE](LICENSE.md) for more information.\n\n[cookie consent]: https://github.com/orestbida/cookieconsent\n[cookie consent api]: https://cookieconsent.orestbida.com/reference/api-reference.html\n[cookie consent third party]: https://cookieconsent.orestbida.com/advanced/manage-scripts.html\n[cookie consent options]: https://cookieconsent.orestbida.com/reference/configuration-reference.html\n[cookie consent gtm example]: https://github.com/orestbida/cookieconsent/blob/master/demo/demo_gtm/index.html\n[orest bida]: https://github.com/orestbida\n[spirit design system]: https://github.com/lmc-eu/spirit-design-system\n[spirit design tokens]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens\n[spirit web]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web\n[sass]: https://www.npmjs.com/package/sass\n[sass load path]: https://sass-lang.com/documentation/cli/dart-sass#load-path\n[sass modules]: https://sass-lang.com/blog/the-module-system-is-launched\n[examples]: https://alma-oss.github.io/cookie-consent-manager/examples/\n[examples-callbacks]: https://alma-oss.github.io/cookie-consent-manager/examples/callbacks.html\n[examples-configuration]: https://alma-oss.github.io/cookie-consent-manager/examples/configuration.html\n[examples-theming]: https://alma-oss.github.io/cookie-consent-manager/examples/theming.html\n[examples-languages]: https://alma-oss.github.io/cookie-consent-manager/examples/languages.html\n[examples-integration-esm]: https://github.com/alma-oss/cookie-consent-manager/tree/main/examples/webpack-with-esm/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falma-oss%2Fcookie-consent-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falma-oss%2Fcookie-consent-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falma-oss%2Fcookie-consent-manager/lists"}