Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Combined dark/light CSS files without duplicated code #51

Merged

Conversation

Carl-Hugo
Copy link
Member

@Carl-Hugo Carl-Hugo commented Jun 4, 2021

1.2.0 (preview)

This is a prerelease version that could contain bugs.

  • Add bootstrap-dark-prefers-light.css which default to Bootstrap dark and display the light colors if the user's prefers-color-scheme: light.
  • Add bootstrap-light-prefers-dark.css which default to Bootstrap and display the dark colors if the user's prefers-color-scheme: dark.
  • Add bootstrap-prefers-dark-color-only.css which is only the colors of bootstrap-prefers-dark.css. This is autogenerated by clean_non_color_attr.js.
  • Add bootstrap-prefers-light-color-only.css which is only the colors of bootstrap-prefers-light.css. This is autogenerated by clean_non_color_attr.js.
  • Add clean_non_color_attr.js gulp plugin (based on gulp-css-remove-attributes).
  • Update .NET/Razor Pages sample to use these new CSS files.

Completed state

  • default: light - prefers: light (bootstrap-light-prefers-dark.css)
  • default: light - prefers: dark (bootstrap-light-prefers-dark.css)
  • default: dark - prefers: light (bootstrap-dark-prefers-light.css)
  • default: dark - prefers: dark (bootstrap-dark-prefers-light.css)

Known issues

  • Color bugs in the dark/light theme are caused by color variables being set to null in Bootstrap and overridden in Bootstrap-dark.

-[x] default: light | prefers: light
-[x] default: light | prefers: dark
-[ ] default: dark | prefers: light
-[x] default: dark | prefers: dark

Bugs dark/light are caused by color variables being null in Bootstrap
and overridden in Bootstrap-dark.
@Carl-Hugo
Copy link
Member Author

This PR should address #17, #20, #49

@Carl-Hugo Carl-Hugo added this to To do in Bootstrap Dark via automation Jun 4, 2021
@Carl-Hugo Carl-Hugo added this to the 1.2.0 milestone Jun 4, 2021
Not overriding $card-color fixes the toggling between light and dark.
This reverts to Bootstrap default behaviors.
@Carl-Hugo Carl-Hugo merged commit 6acb739 into master Dec 8, 2021
Bootstrap Dark automation moved this from To do to Done Dec 8, 2021
@Carl-Hugo Carl-Hugo deleted the experiments/creating-my-own-plugin-to-remove-duplicates branch December 8, 2021 17:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

Successfully merging this pull request may close these issues.

Reboot classes included in both themes Dark and light theme - double css code Merged toggle stylesheet
1 participant