Customization

Bulma-Social uses a modular SASS architecture for managing provider colors:

• sass/utilities/_providers.scss — Base provider color definitions
• sass/utilities/_derived.scss — Color generation functions (light, dark, inverted variants)
• sass/social-providers/_all.scss — Combines all providers into one stylesheet

Follow these steps to create your own customized stylesheet:

Steps to follow:

1. Download or clone Bulma-Social from Github
2. Open the Bulma-Social folder in your favourite Code Editor
3. Open sass/utilities/_providers.scss to modify provider colors
4. Edit the $providers map — add, remove, or modify colors:

// sass/utilities/_providers.scss
$providers: (
  "apple": hsl(0, 0%, 0%),
  "facebook": hsl(213.9, 89.3%, 52.2%),
  "twitter": hsl(202.8, 89.1%, 53.1%),
  "github": hsl(210, 12.2%, 16.1%),
  // Add or remove providers as needed
) !default;

The _derived.scss file automatically generates light, dark, and inverted color variants:

// sass/utilities/_derived.scss
@use "providers" as p;
@use "functions" as fn;

@function build-provider-colors($provider-list: p.$providers) {
  $colors: ();
  @each $name, $color in $provider-list {
    $colors: map.set($colors, $name, (
      $color,
      fn.findColorInvert($color),
      fn.findLightColor($color),
      fn.findDarkColor($color)
    ));
  }
  @return $colors;
}

$all-provider-colors: build-provider-colors() !default;

5. Save the file
6. Open your console and run npm run build
7. Done! Your files are ready for use in the CSS folder.