source.scss

@import "icons-default";
@import "icons-server";
@import "icons-powercord";
@import "icons-plugin";

/* this code was inspired by https://github.com/xcruxiex, we re-wrote the code completely and made it powercord friendly*/

/*Variables*/
.theme-dark {
  --settings-icon-color: white;

  --settings-subscriptions: #7289da;
  --settings-hypesquad: #fbb848;
  --settings-logout: #f04747;

  --settings-alt-focused: white;

  --settings-guild-premium: #7289da;
  --settings-guild-delete: #f04747;
}
.theme-light {
  --settings-icon-color: #4f5660;

  --settings-subscriptions: #7289da;
  --settings-hypesquad: #fbb848;
  --settings-logout: #f04747;

  --settings-alt-focused: white;

  --settings-guild-premium: #7289da;
  --settings-guild-delete: #f04747;
}

/* Layout */
.side-8zPYf6 > .item-PXvHYJ:not(.role-3wi9Tf),
.sidebar-CFHs9e .ui-tab-bar-item {
  display: flex;
  align-items: center;

  &::before {
    content: "";
    width: 22px;
    height: 22px;
    left: 15px;
    margin-right: 6px;
    margin-top: -2px;
    background: var(--settings-icon-color);
    -webkit-mask: var(--icon) center/contain no-repeat;
    mask: var(--icon) center/contain no-repeat;
    --icon: #{svg("./icons/plugin/default.svg")};
    flex-shrink: 0;
  }
}