Styling Guide

There are several classes that help you to create your custom styles

.sb-moon-theme {
  // share button wrapper
  .sb-wrapper {
    // You can get default button color using the CSS variable
    background-color: var(--button-color);
    // Content wrapper
    .sb-content {
      // Icon wrapper
      .sb-icon {
      }
      // Text wrapper
      .sb-text {
      }
    }

    // For conditional styles
    // E.g. Apply when icon, text are shown
    &.sb-show-icon.sb-show-text {
       // Icon wrapper
      .sb-icon {
      }
      // Text wrapper
      .sb-text {
      }
    }
  }
}

If you use .sb-moon-theme then the theme name will become moon:

<share-buttons theme="moon"></share-buttons>