Theme utility

Table of Contents

• applyStyleSheet(styleSheet)
• transformStylesToCSS(styles)
• applyTheme(country, theme)
• useTheme(country, theme)

applyStyleSheet(styleSheet)

Description

This function creates a style element containing the provided CSS styles and applies it to the document's body. It also removes any existing style sheets with the data attribute data-theme to ensure a clean slate.

Parameters

• styleSheet: A string containing CSS styles to be applied.

Example

import { applyStyleSheet } from `@tryg/ui-library`;

const customStyles = `
  body {
    background-color: #f0f0f0;
    color: #333;
  }
`;

applyStyleSheet(customStyles);

transformStylesToCSS(styles)

Description

This function transforms a JavaScript object representing styles into a CSS variable format within a :root block.

Parameters

• styles: An object containing key-value pairs of style properties and values.

Example

import { transformStylesToCSS } from `@tryg/ui-library`;

const themeStyles = {
  "ActionbarFlexDirection": "column",
  "BmExtraSmall": "16px",
  "BmSmall": "32px",
  ...
};

const cssString = transformStylesToCSS(themeStyles);
console.log(cssString);

/* OUTPUT
:root {
    --actionbar-flex-direction: column;
    --bm-extra-small: 16px;
    --bm-small: 32px;
    ...
}
*/

applyTheme(country, theme)

Description

This asynchronous function loads a theme stylesheet based on the provided country and theme names, and then applies it using applyStyleSheet and transformStylesToCSS.

Parameters

• country: A string representing the country for the theme.
• theme: A string representing the name of the theme.

Example

import { applyTheme } from `@tryg/ui-library`;

const country = `dk`;
const theme = `tjm`;

applyTheme(country, theme);

useTheme(country, theme)

Description

This function returns an object with information about the currently applied theme and a function to set a new theme. It is particularly useful for React hooks or other state management systems.

Parameters

• country: A string representing the country for the theme.
• theme: A string representing the name of the theme.

Example

import { useTheme } from `@tryg/ui-library`;

const { getThemeName, getThemeCountry, setTheme } = useTheme(`dk`, `tjm`);

// Change theme
setTheme(`dk`, `ida`);
console.log(getThemeName()), getThemeCountry());

This documentation provides a guide on using the provided functions for managing styles and themes in your project. Ensure you have the correct paths and dependencies set up according to your project structure.