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.

Sign up for GitHub

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

Jump to bottom

Add color "skins" to the theme #1208

Closed
1 task done
mmistakes opened this issue Aug 29, 2017 · 9 comments
Closed
1 task done

Add color "skins" to the theme #1208

mmistakes opened this issue Aug 29, 2017 · 9 comments
Assignees
@mmistakes
Labels
Type: Enhancement

Comments

@mmistakes
Copy link
Owner

  • 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 Improve color "skinning" of the theme Add color "skins" to the theme Aug 29, 2017
@mmistakes
Copy link
Owner Author

mmistakes commented Sep 1, 2017 •
edited
Loading

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
Copy link
Owner Author

Dirt skin: dirt

mm-dirt-post

mm-dirt-archive

@mmistakes
Copy link
Owner Author

Air skin: air

mm-air-post

mm-air-archive

@mmistakes
Copy link
Owner Author

Mint skin: mint

mm-mint-post

mm-mint-archive

@justinrummel
Copy link
Contributor

These are great! Thanks for the work.

@justinrummel
Copy link
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.

@justinrummel
Copy link
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

@mmistakes
Copy link
Owner Author

@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
Copy link
Contributor

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

@mmistakes mmistakes mentioned this issue Sep 12, 2017
Merged
kkunapuli pushed a commit to kkunapuli/kkunapuli.github.io that referenced this issue May 30, 2019
@mmistakes
Color "skins" (mmistakes#1242)
545ad57 
* Add YIQ Color Contrast mixin
* Remove text underline from `.btn` links
* Move YIQ variables
* Simplify button classes using YIQ color contrast mixin
  - DRY up button CSS using Sass list and YIQ color contrast mixin.
  - Move `color` and `background-color` to new `btn--primary` class instead of assinging on the default class. Removes the need to override them.
* Add `.btn--primary` to buttons that just had `.btn`
* Apply changes to `/docs`
* Add `.btn--primary` class
* Update CHANGELOG and history
* Add sample form
* Abstract colors away into Sass variables for easier themeing
* Add "dark" skin
* Replace hardcoded color with SCSS variable
* Invert Font Awesome icons' colors in author sidebar and footer
* Add Sass changes to `/docs`
* Use primary button type instead of inverse
* Add missing `!default` on `$muted-text-color`
* Add `contrast` and `sunrise` skin colors
* Add `dirt` skin color
* Add `air` skin color option
* Add `mint` skin color
* Add `btn--primary` class to Submit Comment button
* Set skin to `default`
* Document skin color options
* Add note about skin SCSS import

Close mmistakes#1208
sumeetmondal pushed a commit to sumeetmondal/sumeetmondal.github.io that referenced this issue Sep 10, 2019
@mmistakes
Color "skins" (mmistakes#1242)
b6cc8f3 
* Add YIQ Color Contrast mixin
* Remove text underline from `.btn` links
* Move YIQ variables
* Simplify button classes using YIQ color contrast mixin
  - DRY up button CSS using Sass list and YIQ color contrast mixin.
  - Move `color` and `background-color` to new `btn--primary` class instead of assinging on the default class. Removes the need to override them.
* Add `.btn--primary` to buttons that just had `.btn`
* Apply changes to `/docs`
* Add `.btn--primary` class
* Update CHANGELOG and history
* Add sample form
* Abstract colors away into Sass variables for easier themeing
* Add "dark" skin
* Replace hardcoded color with SCSS variable
* Invert Font Awesome icons' colors in author sidebar and footer
* Add Sass changes to `/docs`
* Use primary button type instead of inverse
* Add missing `!default` on `$muted-text-color`
* Add `contrast` and `sunrise` skin colors
* Add `dirt` skin color
* Add `air` skin color option
* Add `mint` skin color
* Add `btn--primary` class to Submit Comment button
* Set skin to `default`
* Document skin color options
* Add note about skin SCSS import

Close mmistakes#1208
@mrufflesmcghie mrufflesmcghie mentioned this issue Nov 1, 2019
Closed
makaroniame added a commit to makaroniame/makaroniame-old.github.io that referenced this issue May 18, 2022
@makaroniame
Color "skins" (mmistakes#1242)
8548ff3 
* Add YIQ Color Contrast mixin
* Remove text underline from `.btn` links
* Move YIQ variables
* Simplify button classes using YIQ color contrast mixin
  - DRY up button CSS using Sass list and YIQ color contrast mixin.
  - Move `color` and `background-color` to new `btn--primary` class instead of assinging on the default class. Removes the need to override them.
* Add `.btn--primary` to buttons that just had `.btn`
* Apply changes to `/docs`
* Add `.btn--primary` class
* Update CHANGELOG and history
* Add sample form
* Abstract colors away into Sass variables for easier themeing
* Add "dark" skin
* Replace hardcoded color with SCSS variable
* Invert Font Awesome icons' colors in author sidebar and footer
* Add Sass changes to `/docs`
* Use primary button type instead of inverse
* Add missing `!default` on `$muted-text-color`
* Add `contrast` and `sunrise` skin colors
* Add `dirt` skin color
* Add `air` skin color option
* Add `mint` skin color
* Add `btn--primary` class to Submit Comment button
* Set skin to `default`
* Document skin color options
* Add note about skin SCSS import

Close mmistakes#1208
jchwenger pushed a commit to jchwenger/jchwenger.github.io that referenced this issue May 5, 2023
@mmistakes
Color "skins" (mmistakes#1242)
0b64105 
* Add YIQ Color Contrast mixin
* Remove text underline from `.btn` links
* Move YIQ variables
* Simplify button classes using YIQ color contrast mixin
  - DRY up button CSS using Sass list and YIQ color contrast mixin.
  - Move `color` and `background-color` to new `btn--primary` class instead of assinging on the default class. Removes the need to override them.
* Add `.btn--primary` to buttons that just had `.btn`
* Apply changes to `/docs`
* Add `.btn--primary` class
* Update CHANGELOG and history
* Add sample form
* Abstract colors away into Sass variables for easier themeing
* Add "dark" skin
* Replace hardcoded color with SCSS variable
* Invert Font Awesome icons' colors in author sidebar and footer
* Add Sass changes to `/docs`
* Use primary button type instead of inverse
* Add missing `!default` on `$muted-text-color`
* Add `contrast` and `sunrise` skin colors
* Add `dirt` skin color
* Add `air` skin color option
* Add `mint` skin color
* Add `btn--primary` class to Submit Comment button
* Set skin to `default`
* Document skin color options
* Add note about skin SCSS import

Close mmistakes#1208
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mmistakes mmistakes

Labels
Type: Enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@justinrummel @mmistakes