demand

The recently made public module needs to be provided to different platforms, and the theme color adaptation can be realized through the transfer of parameters. Currently, one-key skin change and custom skin change are supported.

Implementation scheme

The skin scheme is mainly implemented based on CSS custom variables and SASS dynamic modification of the data-theme.

The template in the skin

First, provide several sets of theme color templates and place them in the theme folder.

Blue.scss (default theme)

$blue: (// font font_color:#00a5e5// Button background_color:#00a5e5// mouse over background_hover_color:#0094CE// Disable background_disable_color:#CCEDFA// The border color is border_color:#00a5e5.)Copy the code

Your.scss (Your topic)

$ucode-website: (//#7284fb// Button background_color:#7284fb// mouse over background_hover_color:#6676E1// Disable background_disable_color:#E6EAFF// The border color is border_color:#7284fb.)Copy the code

Adapt-theme. SCSS (theme adapter)

@import './theme.scss';
@import './themes/default.scss'; // Walk through the theme@mixin themeify {
  @each$theme-name, $theme-map in $themes { // ! $theme-map: $theme-map! global;[data-theme="#{$theme-name}"] & {
        @content; }}} // Get the color based on the Key value@function themed($key) {
    @returnmap-get($theme-map, $key); } // Get the font color@mixin font_color($color) {
    @include themeify{
        color: themed($color); }} // Get the border color@mixin border_color($color) {
    @include themeify{
        border-color: themed($color); }} // Get the background color@mixin background_color($color) {
    @include themeify{
        background-color: themed($color); }} // Mouse over@mixin background_hover_color($color) {
    @include themeify{
        background-color: themed($color); }} // Disable@mixin background_disable_color($color) {
    @include themeify{
        background-color: themed($color); }}Copy the code

Calling topic Templates

When a third party calls, the theme parameter is passed to the public module and the data-theme of the top-level element is written to automatically adapt the template.

<div data-theme={this.context.theme} > < /div>
Copy the code

Adapting common Components

@import ".. /.. /.. /styles/adapt-theme.scss";
button {
    @include background_color("background_color");
}
Copy the code

Custom color peels

Define initial CSS variables that are mounted on the root element and can be used globally.

:root{ --fontColor: initial; //initialIs null --backgroundColor: initial; --backgroundHoverColor: initial; --backgroundDisableColor: initial; --borderColor: initial; }Copy the code

After a third party calls and passes parameters, JS dynamically modifies CSS variables.

const body = document.getElementsByTagName('body') [0];
const { themeStyles } = this.context;
for (const style in themeStyles) {
     if (themeStyles[style]) {
          body.style.setProperty(`--${style}`, themeStyles[style]); }}Copy the code

Finally, modify the theme adapter, using CSS invalid variables, you can achieve a custom variable overwrite template, when there is no custom variable, and will not affect the template rendering. That’s the key.

// Get the font color@mixin font_color($color) {
    @include themeify{
        color: var(--fontColor, themed($color)); }}Copy the code