Provides methods which expands you regular SASS in rails into themed one using & operator and other cool SASS features.
Add this to your Gemfile
gem "themizer"
and run
bundle install
Put
Themizer.init(themes: ["dark", "contrast"])
somewhere in you initializers (e.g. config/initializers/assets.rb).
Add classname to your body or html
<html class="dark">
Put <% Themizer.themize do %> and <% end %> around block in your .scss.erb you wish to apply themes to and add ~ after name of customizing variables.
Make SASS map out of definition of that variable.
Steps 3-4 would looks like changing this
$main-text-color: #333;
.someclass {
color: $main-text-color~;
}
into this
$main-text-color: (
"": #333,
dark: #ccc,
contrast: black,
);
<% Themizer.themize do %>
.someclass {
color: $main-text-color~;
}
<% end %>
Now modified .css.erb would be compiled into .scss
.someclass {
color: if(map-has-key($main-text-color, ""), map-get($main-text-color, ""), map-get($main-text-color, ""));
}
@each $theme in dark, contrast {
.#{$theme} { &
.someclass {
color: if(map-has-key($main-text-color, $theme), map-get($main-text-color, $theme), map-get($main-text-color, ""));
}
}
}
which would be compiled into final .css
.someclass {
color: #333;
}
.dark .someclass {
color: #ccc;
}
.contrast .someclass {
color: black;
}
Now, changing class of <html> will change color in .someclass block. Neat!
If some theme in initializer is undefined in map, Themizer will apply empty theme ("")
$main-text-color: (
"": #333,
dark: #ccc,
);
<% Themizer.themize do %>
.someclass {
color: $main-text-color~;
}
<% end %
=>
.someclass {
color: #333;
}
.dark .someclass {
color: #ccc;
}
.contrast .someclass {
color: #333;
}
You can use transitive SASS variables definitions
$border-thickness: 1px;
$border-color: (
"": white,
dark: black,
contrast: gray,
);
<% Themizer.themize do %>
$border: $border-thickness solid $border-color~;
.someclass {
border: $border~;
}
<% end %>
=>
.someclass {
border: 1px solid white;
}
.dark .someclass {
border: 1px solid black;
}
.contrast .someclass {
border: 1px solid gray;
}
You can undo theming for specific blocks
$white-white: (
"": white,
dark: black,
contrast: gray,
);
<% Themizer.unthemize("dark") do %>
.someclass {
color: $white-white~ !important;
}
<% end %>
=>
.someclass {
color: black !important;
}
(unthemize uses "" theme if none specified).
You can undo transitive definitions
$someclass-color: (
"": white,
dark: black,
contrast: gray,
);
<% Themizer.unthemize do %>
$proxy: $someclass-color~;
.someclass {
color: $proxy !important;
}
<% end %>
=>
.someclass {
color: white !important;
}
Approach used in this gem does work only for childs of DOM tree related to node where theme class was applied, therefore *.scss.erb
$body-bgcolor: (
"": white,
dark: gray,
contrast: black,
);
<% Themizer.themize do %>
body {
background-color: $body-bgcolor~;
}
<% end %>
will be compiled into
body {
background-color: white;
}
.dark body {
background-color: gray;
}
.contrast body {
background-color: black;
}
and
<body class="dark">
won't be unable to change body itself.
Workaround 1: apply theme class to <html>.
Workaround 2: theme body separately without themize().
<% Themizer.themize do %> and corresponding <% end %> should be placed in separate lines alone in order to parse properly.
Sometimes rails is facing an error which is inability to process *css.erb and raising error
Invalid CSS after "...r:#{sass_var_name}": expected ";", was "~;"
Workaround 1: chmod 644 filename.css.erb.
Workaround 2: remove and create anew problem files.
Ssometimes, when under development env, spring don't correctly do Themizer.init(), which leads to lack of @themes variable and Themizer.themize() fails.
Workaround: restart rails.
Initializing with debug: true
Themizer.init(themes: ["dark", "contrast"], debug: true)
will output processing block and resulting SASS to console.
git clonebundle installrspecorrspec --tag spec00
- auto inverted-colors theme
- Haml support
- figure out spec16
Themizer is distributed under the MIT-LICENSE.