Skip to main content

Theming

Getting Started with Theming​

The LikeMinds Feed SDK simplifies the process of customizing the theme of the SDK with the help of CSS Variables. You can use and overrides these variables in your own stylesheet to modify the base theme set by the SDK

  • --lm-feed-primary-color: The primary color used throughout the feed components, providing a consistent and recognizable brand identity. Default value: #5046e5

  • --lm-feed-secondary-color: A secondary color that complements the primary color, used for less prominent elements and accents. Default value: #a3a7b3

  • --lm-feed-info-color: The color used for informational messages or neutral actions, often used for prompts or guidance. Default value: #0e7aff

  • --lm-feed-light-color: A light color used as a background or for text on dark backgrounds, creating contrast and readability. Default value: #ffffff

  • --lm-feed-dark-color: A dark color used for text or backgrounds to create depth and contrast with lighter elements. Default value: #484f67

  • --lm-feed-bg-color: The background color used across feed components, providing a neutral and clean base. Default value: #e6ebf5

  • --lm-feed-black-color: A black color primarily used for text, offering the highest contrast and readability. Default value: #000000

  • --lm-feed-base-grey-1: A base grey color used as a foundation for other elements, adding subtle depth to the design. Default value: #222020

  • --lm-feed-tag-text-color: The text color for tags, making them stand out as clickable or categorized items. Default value: #007aff

  • --lm-feed-link-text-color: The color used for links, indicating interactive text that can navigate users to different content. Default value: #007aff

  • --font-family-base: Specifies the base font family, with "Roboto" as the preferred font, and fallbacks to Arial, Helvetica, and sans-serif if "Roboto" isn't available.
  • --font-size-x-small: Sets the font size for extra small text (0.75rem).
  • --font-size-small: Sets the font size for small text (0.875rem).
  • --font-size-base: Sets the base font size for standard text (1rem).
  • --font-size-large: Sets the font size for large text (1.25rem).
  • --font-size-x-large: Sets the font size for extra large text (1.5rem).
  • --font-weight-bold-light: Sets a lighter bold font weight (400).
  • --font-weight-bold-heavy: Sets a heavier bold font weight (500).
  • --breakpoint-sm: Small devices (e.g., smartphones in portrait mode). Default value: 576px
  • --breakpoint-md: Medium devices (e.g., tablets). Default value: 768px
  • --breakpoint-lg: Large devices (e.g., tablets in landscape mode or small desktops). Default value: 992px
  • --breakpoint-xl: Extra large devices (e.g., large desktops). Default value: 1200px

Overriding CSS Variables.​

To override any of the CSS Properties, you just need to re-declare that property in your own stylesheet.

For instance, If you want to change the primary color of the SDK to red, you need to reassign that variable to #ff0000. See the example below.

:root {
  --lm-feed-primary-color: #ff0000;
}

Refresh your application and you've changed the primary color of your application successfully.