Don
April 6, 2024, 6:37am
51
Just for note FKB Pro - Social theme is contains custom color variables.dark-light-choose()
Here you can follow the pattern.
$dark-theme-fkb-bg: #{$dark_bg};
$light-theme-fkb-bg: #{$light_bg};
$dark-theme-fkb-header-btn: #{$dark_header_btn};
$light-theme-fkb-header-btn: #{$light_header_btn};
$dark-theme-fkb-header-btn-hover: #{$dark_header_btn_hover};
$light-theme-fkb-header-btn-hover: #{$light_header_btn_hover};
$dark-theme-fkb-btn: #{$dark_btn};
$light-theme-fkb-btn: #{$light_btn};
$dark-theme-fkb-btn-hover: #{$dark_btn_hover};
$light-theme-fkb-btn-hover: #{$light_btn_hover};
$fkb-bg: dark-light-choose($light-theme-fkb-bg, $dark-theme-fkb-bg);
$fkb-header-btn: dark-light-choose($light-theme-fkb-header-btn, $dark-theme-fkb-header-btn);
$fkb-header-btn-hover: dark-light-choose($light-theme-fkb-header-btn-hover, $dark-theme-fkb-header-btn-hover);
$fkb-btn: dark-light-choose($light-theme-fkb-btn, $dark-theme-fkb-btn);
$fkb-btn-hover: dark-light-choose($light-theme-fkb-btn-hover, $dark-theme-fkb-btn-hover);
show original
The only difference is, these are connects with theme settings so you can modify it with settings. This is why it use this format #{$setting_name} and not HEX color codes.
But you can add new ones in your fork which uses HEX as you wish.
Add these to after line 14:
$dark-theme-tags-bg: #3a3b3c;
$light-theme-tags-bg: #f0f2f5;
After line 20:
$tags-bg: dark-light-choose($light-theme-tags-bg, $dark-theme-tags-bg);
After line 27:
--tags-bg: #{$tags-bg};
etc…
Then you can change the current background here in your fork:
to
background: var(--tags-bg);
3 Likes
