Modify inline code color in `_base.scss` not working

[secsilm]

First of all, Thanks for your great theme!

Description

I tried to modify inline code styles and successfully modified some of them. I followed the instructions in https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak/issues/10#issuecomment-102610892.

But I cannot make it through modifying tranquilpeak\source\_css\base\_base.scss as follows:

// inline code
code {
    font-size:        85%;  // map-get($font-size, medium)
    // display:          inline-block;
    font-family:      map-get($font-families, 'code');
    font-weight:      400;
    background-color: rgba(175,184,193,0.2);   // <-- THIS is not working
    padding:          0.2em 0.4em;
    margin: 0;
    border-radius: 6px;
}

Chrome dev tools:

You can see it's crossed out. Also you can view the screenshot page here.

Expected behavior

Change the inline code background color to rgba(175,184,193,0.2):

Steps to reproduce the bug

Environment

• Operating system with version : Windows 10
• Node version: v13.14.0
• Hexo version: 3.4.4
• Hexo-cli version: 4.2.0
• Tranquilpeak version: 4.1.3
• Site configuration file:
• Theme configuration file:
• Hexo plugin:

Additional information

• [ ] I can fix this bug

[LouisBarranqueiro]

👋 @secsilm, it works, it's just that this property is overridden by another one:

[secsilm]

@LouisBarranqueiro Then how do I keep it from being overridden?

[LouisBarranqueiro]

I can't really tell because you modified the code of the theme. You need to search in the different files where the property background-color:#f7f8f8; is set and remove it.

[secsilm]

OK, I finally get it worked. Here are the steps:

1. Modifying the inline code color as above.
2. Comment out background in _variables.scss as following:

   // Highlight code
   $highlight: (
       // 'background':  #f7f8f8,  // <-- COMMENT OUT HERE
       'font-size':   1.4rem,
       'border':      1px solid,
       'line-height': 1.3em
   );

3. The above code will result in losing backround color of the pre code, so we have to specify the background color in _code.scss:

   // Reset for tag `pre` and  for class `.gutter`, `.code`, `.tag`
       pre,
       .gutter,
       .code,
       .tag {
           background-color: #f7f8f8;  // <-- MODIFY COLOR HERE
           font-family:      #{map-get($font-families, 'highlight')};
           border:           none;
           padding:          0;
           margin:           0;
           // To override cursor attribute of `.tag` components
           cursor:           text;
       }

4. npm run prod