How to create light or dark color themes #34

heshimang · 2023-02-07T09:13:28Z

heshimang
Feb 7, 2023

how to create light or dark color themes with webpixels/css?

Feb 7, 2023

Hey @heshimang - I am working on an update for that. Right now I am preparing the documentation. The easiest way is to create new themes, including light/dark mode using the CSS variables Bootstrap provides in their docs. For each component, you will find a set of CSS variables that can be used in your theme file.

For example, I made a new theme mixin like this:

@mixin blue {
  color-scheme: light;

  --x-primary: var(--x-blue-500);
  --x-primary-rgb: #{to-rgb($blue-500)};
  --x-secondary: var(--x-yellow-500);
  --x-secondary-rgb: #{to-rgb($yellow-500)};
  --x-dark: var(--x-gray-800);
  --x-dark-rgb: #{to-rgb($gray-800)};

  --x-link-color: var(--x-blue-500);
  --x-link-hover-color: var(-…

View full answer

extrabright · 2023-02-07T09:20:58Z

extrabright
Feb 7, 2023
Maintainer

Hey @heshimang - I am working on an update for that. Right now I am preparing the documentation. The easiest way is to create new themes, including light/dark mode using the CSS variables Bootstrap provides in their docs. For each component, you will find a set of CSS variables that can be used in your theme file.

For example, I made a new theme mixin like this:

@mixin blue {
  color-scheme: light;

  --x-primary: var(--x-blue-500);
  --x-primary-rgb: #{to-rgb($blue-500)};
  --x-secondary: var(--x-yellow-500);
  --x-secondary-rgb: #{to-rgb($yellow-500)};
  --x-dark: var(--x-gray-800);
  --x-dark-rgb: #{to-rgb($gray-800)};

  --x-link-color: var(--x-blue-500);
  --x-link-hover-color: var(--x-blue-600);
  
  .btn-primary {
    --x-btn-bg: var(--x-primary);
    --x-btn-color: var(--x-white);
    --x-btn-border-color: var(--x-primary);
    --x-btn-hover-bg: var(--x-blue-600);
    --x-btn-hover-color: var(--x-white);
    --x-btn-hover-border-color: var(--x-blue-600);
    --x-btn-active-bg: var(--x-blue-700);
    --x-btn-active-color: var(--x-white);
    --x-btn-active-border-color: var(--x-blue-700);
  }

  ...

}

Then, in the main sass file, you import the theme like this:

// Webpixels Functions
@import "@webpixels/css/core/functions";

// Theme mixins
@import './themes/blue'; 

// Webpixels Core
@import "@webpixels/css/core/variables";
@import "@webpixels/css/core/maps";
@import "@webpixels/css/core/mixins";

// Webpixels Elements
@import "@webpixels/css/base";
@import "@webpixels/css/forms";
@import "@webpixels/css/components";

// Themes
[data-bs-theme="blue"] {
  @include blue;
}

I created a color variation in my case, but you can make the dark mode this way. Of course, you'll need to adapt the components you need and for that, you can use the Bootstrap docs, until I finish the implementation.

6 replies

heshimang Feb 7, 2023
Author

[data-bs-theme="blue"] {
@include blue;
}

First thank you!
but not work for me,
How can I modify it?

extrabright Feb 7, 2023
Maintainer

Make sure you compile the Sass file
Don't forget to add the data-bs-theme="blue" attribute on the <html> tag:

<html lang="en" data-bs-theme="blue">
   <body>
      ...
   </body>
</html>

heshimang Feb 7, 2023
Author

I got it!
I forget to add the data-bs-theme="blue" attribute on the tag.
Thank you!

extrabright Feb 7, 2023
Maintainer

Nice!
Please, don't forget to give Webpixels CSS a star if you wanna help us 🙏

heshimang Feb 7, 2023
Author

of course

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webpixels

How to create light or dark color themes #34

{{title}}

Replies: 1 comment 6 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Webpixels

How to create light or dark color themes #34

heshimang Feb 7, 2023

Replies: 1 comment · 6 replies

extrabright Feb 7, 2023 Maintainer

heshimang Feb 7, 2023 Author

[data-bs-theme="blue"] { @include blue; }

extrabright Feb 7, 2023 Maintainer

heshimang Feb 7, 2023 Author

extrabright Feb 7, 2023 Maintainer

heshimang Feb 7, 2023 Author

heshimang
Feb 7, 2023

Replies: 1 comment 6 replies

extrabright
Feb 7, 2023
Maintainer

heshimang Feb 7, 2023
Author

[data-bs-theme="blue"] {
@include blue;
}

extrabright Feb 7, 2023
Maintainer

heshimang Feb 7, 2023
Author

extrabright Feb 7, 2023
Maintainer

heshimang Feb 7, 2023
Author