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

Add color "skins" to the theme #1208

Closed
mmistakes opened this Issue Aug 29, 2017 · 9 comments

Comments

Projects
None yet
2 participants
@mmistakes
Owner

mmistakes commented Aug 29, 2017

  • This is a feature request.

Strip out hard-coded color values in SCSS and replace with variables to allow for more "skinning" opportunities ala Basically Basic.

@mmistakes mmistakes self-assigned this Aug 29, 2017

@mmistakes mmistakes changed the title from Improve color "skinning" of the theme to Add color "skins" to the theme Aug 29, 2017

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 1, 2017

Owner

SCSS has been refactored to better hand "skinning". If anyone wants to play around with it and provide feedback, the changes can be found in the color-skins branch.

Probably the easiest way to enable it is by using the pre-release theme gem, add the following to your Gemfile:

gem 'minimal-mistakes-jekyll', :git => 'https://github.com/mmistakes/minimal-mistakes.git', :branch => 'color-skins'

And then set which skin you'd like to use with minimal_mistakes_skin: in your _config.yml file.

Dark skin: dark

mm-dark-post

mm-dark-archive

Contrast skin: contrast

mm-contrast-post

mm-contrast-archive

Sunrise skin: sunrise

mm-sunrise-post

mm-sunrise-archive

Owner

mmistakes commented Sep 1, 2017

SCSS has been refactored to better hand "skinning". If anyone wants to play around with it and provide feedback, the changes can be found in the color-skins branch.

Probably the easiest way to enable it is by using the pre-release theme gem, add the following to your Gemfile:

gem 'minimal-mistakes-jekyll', :git => 'https://github.com/mmistakes/minimal-mistakes.git', :branch => 'color-skins'

And then set which skin you'd like to use with minimal_mistakes_skin: in your _config.yml file.

Dark skin: dark

mm-dark-post

mm-dark-archive

Contrast skin: contrast

mm-contrast-post

mm-contrast-archive

Sunrise skin: sunrise

mm-sunrise-post

mm-sunrise-archive

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 6, 2017

Owner

Dirt skin: dirt

mm-dirt-post

mm-dirt-archive

Owner

mmistakes commented Sep 6, 2017

Dirt skin: dirt

mm-dirt-post

mm-dirt-archive

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 6, 2017

Owner

Air skin: air

mm-air-post

mm-air-archive

Owner

mmistakes commented Sep 6, 2017

Air skin: air

mm-air-post

mm-air-archive

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 6, 2017

Owner

Mint skin: mint

mm-mint-post

mm-mint-archive

Owner

mmistakes commented Sep 6, 2017

Mint skin: mint

mm-mint-post

mm-mint-archive

@justinrummel

This comment has been minimized.

Show comment
Hide comment
@justinrummel

justinrummel Sep 6, 2017

Contributor

These are great! Thanks for the work.

Contributor

justinrummel commented Sep 6, 2017

These are great! Thanks for the work.

@justinrummel

This comment has been minimized.

Show comment
Hide comment
@justinrummel

justinrummel Sep 6, 2017

Contributor

I noticed that none of your examples include a comments section. I would expect the color options to be reversed vs. dark text field with light border area.

Contributor

justinrummel commented Sep 6, 2017

I noticed that none of your examples include a comments section. I would expect the color options to be reversed vs. dark text field with light border area.

@justinrummel

This comment has been minimized.

Show comment
Hide comment
@justinrummel

justinrummel Sep 6, 2017

Contributor

Last note for documentation, if you have already made CSS changes be sure to update your /assets/css/main.scss to include

@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
Contributor

justinrummel commented Sep 6, 2017

Last note for documentation, if you have already made CSS changes be sure to update your /assets/css/main.scss to include

@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 6, 2017

Owner

@justinrummel I'm guessing you have an outdated _sass/_forms.scss file or one of the comments includes.

form should have background-color: $form-background-color; which will fill it in with a darker color like this:

image

Owner

mmistakes commented Sep 6, 2017

@justinrummel I'm guessing you have an outdated _sass/_forms.scss file or one of the comments includes.

form should have background-color: $form-background-color; which will fill it in with a darker color like this:

image

@justinrummel

This comment has been minimized.

Show comment
Hide comment
@justinrummel

justinrummel Sep 6, 2017

Contributor

Thanks, I must have an override somewhere on /assets/css/main.scss somewhere...

Contributor

justinrummel commented Sep 6, 2017

Thanks, I must have an override somewhere on /assets/css/main.scss somewhere...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment