Assistance with Lepton Lite Theme Colors

[joao-pedro-de-oliveira-souza]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

No response

Describe the solution you'd like

I’m working on a project using the Lepton Lite theme with Angular and need guidance on how to customize the theme colors. So far, I’ve identified the following CSS properties:

--lpx-brand
--lpx-logo-icon
--lpx-logo
However, I’d like to know if there is a file or documentation that includes all theme properties, or even a full theme file, to help with the customization process.

Any help or additional resources would be greatly appreciated.

Additional context

No response

[armgnunlu]

Hi @joao-pedro-de-oliveira-souza

After replacing the variables in this file with your own custom variables, you can overwrite the parameters in this file with a css file you created. (The file path I gave contains the dark theme variables, other themes have their own css files.)

dark.css

:root {
  --lpx-content-text-rgb: 156,165,180;
  --lpx-content-bg-rgb: 18,18,18;
  --lpx-primary-rgb: 53,93,255;
  --lpx-secondary-rgb: 108,93,211;
  --lpx-brand-rgb: 247,37,133;
  --lpx-success-rgb: 79,191,103;
  --lpx-info-rgb: 67,138,167;
  --lpx-warning-rgb: 255,159,56;
  --lpx-danger-rgb: 192,13,73;
  --lpx-light-rgb: 21,21,21;
  --lpx-dark-rgb: 238,238,238;
  --lpx-navbar-color-rgb: 22,22,22;
  --lpx-navbar-text-color-rgb: 119,125,135;
  --lpx-navbar-active-text-color-rgb: 255,255,255;
  --lpx-text-white-rgb: 255,255,255;
  --lpx-logo-reverse: var(--logo-reverse);
  --lpx-primary: #355dff;
  --lpx-secondary: #6c5dd3;
  --lpx-success: #4fbf67;
  --lpx-info: #438aa7;
  --lpx-warning: #ff9f38;
  --lpx-danger: #c00d49;
  --lpx-brand: #f72585;
  --lpx-brand-text: #fff;
  --lpx-container-active-text: #fff;
  --lpx-text-white: #fff;
  --lpx-radius: 0.5rem;
  --lpx-logo-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMCAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQ4NF8xODYwNikiPgo8cGF0aCBkPSJNMTQuODMxNCAyLjM4MjUzZS0wNkMxMy43Mzc2IC0wLjAwMDg4NTcxNSAxMi42NTc5IDAuMjQ2NTE5IDExLjY3MzcgMC43MjM1NzJDMTAuNjg5NCAxLjIwMDYzIDkuODI2MTkgMS44OTQ4OCA5LjE0OTE3IDIuNzU0MDNDMTAuMzg3OCAzLjAyMzUgMTEuNTU2NCAzLjU0OTEzIDEyLjU3OTkgNC4yOTcxNkMxMy42MDMzIDUuMDQ1MTggMTQuNDU5IDUuOTk5MDQgMTUuMDkxOSA3LjA5NzQ2QzE1LjcyNDggOC4xOTU4OSAxNi4xMjA5IDkuNDE0NTcgMTYuMjU0OCAxMC42NzUyQzE2LjM4ODggMTEuOTM1OSAxNi4yNTc1IDEzLjIxMDYgMTUuODY5NSAxNC40MTc1QzE3LjY4MjIgMTQuMTU1MSAxOS4zMjgyIDEzLjIxNTggMjAuNDc2NSAxMS43ODg4QzIxLjYyNDcgMTAuMzYxNyAyMi4xODk5IDguNTUyNjYgMjIuMDU4NCA2LjcyNTY3QzIxLjkyNjggNC44OTg2NyAyMS4xMDgzIDMuMTg5MjkgMTkuNzY3NCAxLjk0MTQ2QzE4LjQyNjYgMC42OTM2MzUgMTYuNjYzIC00LjIzMjYxZS0wNSAxNC44MzE0IDIuMzgyNTNlLTA2VjIuMzgyNTNlLTA2WiIgZmlsbD0iI0I1MTc5RSIvPgo8cGF0aCBkPSJNMjguNzAzMiA3LjkzMzgyQzI4LjE1MDcgNi45ODkxMiAyNy4zOTEgNi4xODIxIDI2LjQ4MTUgNS41NzM1MUMyNS41NzE5IDQuOTY0OTMgMjQuNTM2MSA0LjU3MDY0IDIzLjQ1MjIgNC40MjAzNUMyMy44NDU2IDUuNjI1MjkgMjMuOTgyNyA2Ljg5OTIyIDIzLjg1NDcgOC4xNjAzMUMyMy43MjY2IDkuNDIxMzkgMjMuMzM2MiAxMC42NDE3IDIyLjcwODYgMTEuNzQzQzIyLjA4MSAxMi44NDQyIDIxLjIyOTkgMTMuODAyIDIwLjIxMDIgMTQuNTU0OEMxOS4xOTA0IDE1LjMwNzYgMTguMDI0NSAxNS44Mzg3IDE2Ljc4NzQgMTYuMTE0MUMxNy45Mjk5IDE3LjU0NTEgMTkuNTcxOCAxOC40OTA1IDIxLjM4MyAxOC43NkMyMy4xOTQxIDE5LjAyOTUgMjUuMDQwMiAxOC42MDMyIDI2LjU0OTggMTcuNTY2OUMyOC4wNTk1IDE2LjUzMDUgMjkuMTIwOCAxNC45NjA5IDI5LjUyMDMgMTMuMTczOEMyOS45MTk4IDExLjM4NjYgMjkuNjI3OCA5LjUxNDQ2IDI4LjcwMzIgNy45MzM4MloiIGZpbGw9IiM3MjA5QjciLz4KPHBhdGggZD0iTTI4LjY4OTIgMjQuMDI1N0MyOS4yMzk5IDIzLjA4MDcgMjkuNTY5IDIyLjAyMyAyOS42NTE3IDIwLjkzMjJDMjkuNzM0NSAxOS44NDE1IDI5LjU2ODcgMTguNzQ2MyAyOS4xNjY4IDE3LjcyODlDMjguMzExIDE4LjY2NDIgMjcuMjY5MSAxOS40MSAyNi4xMDggMTkuOTE4NkMyNC45NDY4IDIwLjQyNzIgMjMuNjkyMiAyMC42ODcyIDIyLjQyNDYgMjAuNjgyQzIxLjE1NyAyMC42NzY3IDE5LjkwNDUgMjAuNDA2NCAxOC43NDc2IDE5Ljg4ODJDMTcuNTkwNyAxOS4zNzAxIDE2LjU1NDkgMTguNjE1NyAxNS43MDY5IDE3LjY3MzRDMTUuMDIzNiAxOS4zNzIgMTUuMDA4NiAyMS4yNjYzIDE1LjY2NDkgMjIuOTc1NUMxNi4zMjEyIDI0LjY4NDYgMTcuNjAwMSAyNi4wODIgMTkuMjQ0NiAyNi44ODY3QzIwLjg4OSAyNy42OTEzIDIyLjc3NyAyNy44NDM1IDI0LjUyOTEgMjcuMzEyOEMyNi4yODEzIDI2Ljc4MjEgMjcuNzY3NSAyNS42MDc3IDI4LjY4OTIgMjQuMDI1N1YyNC4wMjU3WiIgZmlsbD0iIzQzNjFFRSIvPgo8cGF0aCBkPSJNNi43MTQzOSAyMC42OTYxQzQuMzMwMDMgMjAuNTYxNSAyLjA5NTM2IDE5LjQ5MDMgMC40OTY5MyAxNy43MTU4QzAuMTAxNzI3IDE4LjcyNyAtMC4wNjExMDM4IDE5LjgxNDIgMC4wMjA0ODA2IDIwLjg5NjhDMC4xMDIwNjUgMjEuOTc5NSAwLjQyNTk3OCAyMy4wMyAwLjk2ODI2IDIzLjk3MDVDMS41MTA1NCAyNC45MTExIDIuMjU3MzIgMjUuNzE3NyAzLjE1MzM2IDI2LjMzMDdDNC4wNDk0IDI2Ljk0MzcgNS4wNzE3NyAyNy4zNDc0IDYuMTQ0ODUgMjcuNTExOUM1LjQ0MDEgMjUuMjUyNSA1LjY0NDQzIDIyLjgwNzIgNi43MTQzOSAyMC42OTYxVjIwLjY5NjFaIiBmaWxsPSIjNENDOUYwIi8+CjxwYXRoIGQ9Ik03LjI0OTYxIDE4Ljg1NzFDMTEuMjUxMiAxOC44NTcxIDE0LjQ5NTEgMTUuNjEyOSAxNC40OTUxIDExLjYxMUMxNC40OTUxIDcuNjA5MDYgMTEuMjUxMiA0LjM2NDg3IDcuMjQ5NjEgNC4zNjQ4N0MzLjI0ODA1IDQuMzY0ODcgMC4wMDQxNTAzOSA3LjYwOTA2IDAuMDA0MTUwMzkgMTEuNjExQzAuMDA0MTUwMzkgMTUuNjEyOSAzLjI0ODA1IDE4Ljg1NzEgNy4yNDk2MSAxOC44NTcxWiIgZmlsbD0iI0Y3MjU4NSIvPgo8cGF0aCBkPSJNMTMuMzY2MyAyMC4zNjA4QzEzLjM3MTYgMTkuNTY5MSAxMy40ODAyIDE4Ljc4MTQgMTMuNjg5NCAxOC4wMTc4QzEyLjM5MTUgMTkuMzMxOSAxMC43MjMzIDIwLjIxOCA4LjkwNzkyIDIwLjU1NzdDNy43ODc2MSAyMi4wOTMxIDcuMzE1NTYgMjQuMDA3MyA3LjU5MzU3IDI1Ljg4NzZDNy44NzE1OCAyNy43Njc5IDguODc3MzggMjkuNDYzNSAxMC4zOTQxIDMwLjYwODlDMTEuOTEwOCAzMS43NTQzIDEzLjgxNjggMzIuMjU3NyAxNS43MDEyIDMyLjAxMDVDMTcuNTg1NiAzMS43NjMzIDE5LjI5NzMgMzAuNzg1MyAyMC40NjczIDI5LjI4NzRDMTguNDQyMSAyOC44MzQ3IDE2LjYzMjkgMjcuNzAyMSAxNS4zNDA5IDI2LjA3NzlDMTQuMDQ4OSAyNC40NTM4IDEzLjM1MjEgMjIuNDM2MiAxMy4zNjYzIDIwLjM2MDhWMjAuMzYwOFoiIGZpbGw9IiM0ODk1RUYiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF80ODRfMTg2MDYiPgo8cmVjdCB3aWR0aD0iMjkuNjk2OCIgaGVpZ2h0PSIzMiIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K");
  --lpx-light: #151515;
  --lpx-dark: #eee;
  --lpx-breadcrumb-text-color: #777d87;
  --lpx-breadcrumb-active-text-color: #fff;
  --lpx-navbar-color: #161616;
  --lpx-navbar-text-color: #777d87;
  --lpx-navbar-active-text-color: #fff;
  --lpx-navbar-active-bg-color: #222;
  --lpx-card-bg: #1b1b1b;
  --lpx-card-title-text-color: #eee;
  --lpx-content-bg: #121212;
  --lpx-content-text: #9ca5b4;
  --lpx-border-color: #23262a;
  --lpx-shadow: 0 0 20px 0 rgba(76, 87, 125, 0.02);
}

[joao-pedro-de-oliveira-souza]

Sure, thx

[joao-pedro-de-oliveira-souza]

Hi @joao-pedro-de-oliveira-souza

After replacing the variables in this file with your own custom variables, you can overwrite the parameters in this file with a css file you created. (The file path I gave contains the dark theme variables, other themes have their own css files.)

dark.css

:root {
--lpx-content-text-rgb: 156,165,180;
--lpx-content-bg-rgb: 18,18,18;
--lpx-primary-rgb: 53,93,255;
--lpx-secondary-rgb: 108,93,211;
--lpx-brand-rgb: 247,37,133;
--lpx-success-rgb: 79,191,103;
--lpx-info-rgb: 67,138,167;
--lpx-warning-rgb: 255,159,56;
--lpx-danger-rgb: 192,13,73;
--lpx-light-rgb: 21,21,21;
--lpx-dark-rgb: 238,238,238;
--lpx-navbar-color-rgb: 22,22,22;
--lpx-navbar-text-color-rgb: 119,125,135;
--lpx-navbar-active-text-color-rgb: 255,255,255;
--lpx-text-white-rgb: 255,255,255;
--lpx-logo-reverse: var(--logo-reverse);
--lpx-primary: #355dff;
--lpx-secondary: #6c5dd3;
--lpx-success: #4fbf67;
--lpx-info: #438aa7;
--lpx-warning: #ff9f38;
--lpx-danger: #c00d49;
--lpx-brand: #f72585;
--lpx-brand-text: #fff;
--lpx-container-active-text: #fff;
--lpx-text-white: #fff;
--lpx-radius: 0.5rem;
--lpx-logo-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMCAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQ4NF8xODYwNikiPgo8cGF0aCBkPSJNMTQuODMxNCAyLjM4MjUzZS0wNkMxMy43Mzc2IC0wLjAwMDg4NTcxNSAxMi42NTc5IDAuMjQ2NTE5IDExLjY3MzcgMC43MjM1NzJDMTAuNjg5NCAxLjIwMDYzIDkuODI2MTkgMS44OTQ4OCA5LjE0OTE3IDIuNzU0MDNDMTAuMzg3OCAzLjAyMzUgMTEuNTU2NCAzLjU0OTEzIDEyLjU3OTkgNC4yOTcxNkMxMy42MDMzIDUuMDQ1MTggMTQuNDU5IDUuOTk5MDQgMTUuMDkxOSA3LjA5NzQ2QzE1LjcyNDggOC4xOTU4OSAxNi4xMjA5IDkuNDE0NTcgMTYuMjU0OCAxMC42NzUyQzE2LjM4ODggMTEuOTM1OSAxNi4yNTc1IDEzLjIxMDYgMTUuODY5NSAxNC40MTc1QzE3LjY4MjIgMTQuMTU1MSAxOS4zMjgyIDEzLjIxNTggMjAuNDc2NSAxMS43ODg4QzIxLjYyNDcgMTAuMzYxNyAyMi4xODk5IDguNTUyNjYgMjIuMDU4NCA2LjcyNTY3QzIxLjkyNjggNC44OTg2NyAyMS4xMDgzIDMuMTg5MjkgMTkuNzY3NCAxLjk0MTQ2QzE4LjQyNjYgMC42OTM2MzUgMTYuNjYzIC00LjIzMjYxZS0wNSAxNC44MzE0IDIuMzgyNTNlLTA2VjIuMzgyNTNlLTA2WiIgZmlsbD0iI0I1MTc5RSIvPgo8cGF0aCBkPSJNMjguNzAzMiA3LjkzMzgyQzI4LjE1MDcgNi45ODkxMiAyNy4zOTEgNi4xODIxIDI2LjQ4MTUgNS41NzM1MUMyNS41NzE5IDQuOTY0OTMgMjQuNTM2MSA0LjU3MDY0IDIzLjQ1MjIgNC40MjAzNUMyMy44NDU2IDUuNjI1MjkgMjMuOTgyNyA2Ljg5OTIyIDIzLjg1NDcgOC4xNjAzMUMyMy43MjY2IDkuNDIxMzkgMjMuMzM2MiAxMC42NDE3IDIyLjcwODYgMTEuNzQzQzIyLjA4MSAxMi44NDQyIDIxLjIyOTkgMTMuODAyIDIwLjIxMDIgMTQuNTU0OEMxOS4xOTA0IDE1LjMwNzYgMTguMDI0NSAxNS44Mzg3IDE2Ljc4NzQgMTYuMTE0MUMxNy45Mjk5IDE3LjU0NTEgMTkuNTcxOCAxOC40OTA1IDIxLjM4MyAxOC43NkMyMy4xOTQxIDE5LjAyOTUgMjUuMDQwMiAxOC42MDMyIDI2LjU0OTggMTcuNTY2OUMyOC4wNTk1IDE2LjUzMDUgMjkuMTIwOCAxNC45NjA5IDI5LjUyMDMgMTMuMTczOEMyOS45MTk4IDExLjM4NjYgMjkuNjI3OCA5LjUxNDQ2IDI4LjcwMzIgNy45MzM4MloiIGZpbGw9IiM3MjA5QjciLz4KPHBhdGggZD0iTTI4LjY4OTIgMjQuMDI1N0MyOS4yMzk5IDIzLjA4MDcgMjkuNTY5IDIyLjAyMyAyOS42NTE3IDIwLjkzMjJDMjkuNzM0NSAxOS44NDE1IDI5LjU2ODcgMTguNzQ2MyAyOS4xNjY4IDE3LjcyODlDMjguMzExIDE4LjY2NDIgMjcuMjY5MSAxOS40MSAyNi4xMDggMTkuOTE4NkMyNC45NDY4IDIwLjQyNzIgMjMuNjkyMiAyMC42ODcyIDIyLjQyNDYgMjAuNjgyQzIxLjE1NyAyMC42NzY3IDE5LjkwNDUgMjAuNDA2NCAxOC43NDc2IDE5Ljg4ODJDMTcuNTkwNyAxOS4zNzAxIDE2LjU1NDkgMTguNjE1NyAxNS43MDY5IDE3LjY3MzRDMTUuMDIzNiAxOS4zNzIgMTUuMDA4NiAyMS4yNjYzIDE1LjY2NDkgMjIuOTc1NUMxNi4zMjEyIDI0LjY4NDYgMTcuNjAwMSAyNi4wODIgMTkuMjQ0NiAyNi44ODY3QzIwLjg4OSAyNy42OTEzIDIyLjc3NyAyNy44NDM1IDI0LjUyOTEgMjcuMzEyOEMyNi4yODEzIDI2Ljc4MjEgMjcuNzY3NSAyNS42MDc3IDI4LjY4OTIgMjQuMDI1N1YyNC4wMjU3WiIgZmlsbD0iIzQzNjFFRSIvPgo8cGF0aCBkPSJNNi43MTQzOSAyMC42OTYxQzQuMzMwMDMgMjAuNTYxNSAyLjA5NTM2IDE5LjQ5MDMgMC40OTY5MyAxNy43MTU4QzAuMTAxNzI3IDE4LjcyNyAtMC4wNjExMDM4IDE5LjgxNDIgMC4wMjA0ODA2IDIwLjg5NjhDMC4xMDIwNjUgMjEuOTc5NSAwLjQyNTk3OCAyMy4wMyAwLjk2ODI2IDIzLjk3MDVDMS41MTA1NCAyNC45MTExIDIuMjU3MzIgMjUuNzE3NyAzLjE1MzM2IDI2LjMzMDdDNC4wNDk0IDI2Ljk0MzcgNS4wNzE3NyAyNy4zNDc0IDYuMTQ0ODUgMjcuNTExOUM1LjQ0MDEgMjUuMjUyNSA1LjY0NDQzIDIyLjgwNzIgNi43MTQzOSAyMC42OTYxVjIwLjY5NjFaIiBmaWxsPSIjNENDOUYwIi8+CjxwYXRoIGQ9Ik03LjI0OTYxIDE4Ljg1NzFDMTEuMjUxMiAxOC44NTcxIDE0LjQ5NTEgMTUuNjEyOSAxNC40OTUxIDExLjYxMUMxNC40OTUxIDcuNjA5MDYgMTEuMjUxMiA0LjM2NDg3IDcuMjQ5NjEgNC4zNjQ4N0MzLjI0ODA1IDQuMzY0ODcgMC4wMDQxNTAzOSA3LjYwOTA2IDAuMDA0MTUwMzkgMTEuNjExQzAuMDA0MTUwMzkgMTUuNjEyOSAzLjI0ODA1IDE4Ljg1NzEgNy4yNDk2MSAxOC44NTcxWiIgZmlsbD0iI0Y3MjU4NSIvPgo8cGF0aCBkPSJNMTMuMzY2MyAyMC4zNjA4QzEzLjM3MTYgMTkuNTY5MSAxMy40ODAyIDE4Ljc4MTQgMTMuNjg5NCAxOC4wMTc4QzEyLjM5MTUgMTkuMzMxOSAxMC43MjMzIDIwLjIxOCA4LjkwNzkyIDIwLjU1NzdDNy43ODc2MSAyMi4wOTMxIDcuMzE1NTYgMjQuMDA3MyA3LjU5MzU3IDI1Ljg4NzZDNy44NzE1OCAyNy43Njc5IDguODc3MzggMjkuNDYzNSAxMC4zOTQxIDMwLjYwODlDMTEuOTEwOCAzMS43NTQzIDEzLjgxNjggMzIuMjU3NyAxNS43MDEyIDMyLjAxMDVDMTcuNTg1NiAzMS43NjMzIDE5LjI5NzMgMzAuNzg1MyAyMC40NjczIDI5LjI4NzRDMTguNDQyMSAyOC44MzQ3IDE2LjYzMjkgMjcuNzAyMSAxNS4zNDA5IDI2LjA3NzlDMTQuMDQ4OSAyNC40NTM4IDEzLjM1MjEgMjIuNDM2MiAxMy4zNjYzIDIwLjM2MDhWMjAuMzYwOFoiIGZpbGw9IiM0ODk1RUYiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF80ODRfMTg2MDYiPgo8cmVjdCB3aWR0aD0iMjkuNjk2OCIgaGVpZ2h0PSIzMiIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K");
--lpx-light: #151515;
--lpx-dark: #eee;
--lpx-breadcrumb-text-color: #777d87;
--lpx-breadcrumb-active-text-color: #fff;
--lpx-navbar-color: #161616;
--lpx-navbar-text-color: #777d87;
--lpx-navbar-active-text-color: #fff;
--lpx-navbar-active-bg-color: #222;
--lpx-card-bg: #1b1b1b;
--lpx-card-title-text-color: #eee;
--lpx-content-bg: #121212;
--lpx-content-text: #9ca5b4;
--lpx-border-color: #23262a;
--lpx-shadow: 0 0 20px 0 rgba(76, 87, 125, 0.02);
}

Do all these properties work on LeptonX Lite, or are they exclusive to the premium version?