动态更改'汉堡包'导航取决于BG图像

我正在寻找一种方法，根据浮动在其顶部的图像的颜色动态更改"汉堡包"导航元素的颜色。

我在文本元素上使用Kenneth Cache简洁的"backgroundcheck.js"脚本。这是通过删除图像的颜色，然后应用一个类（分别为.background--light或.background--dark）来实现的，但它似乎对我的汉堡不起作用，可能有两个原因——

• 我正在使用伪类（::before和::after）
• 导航使用background-color，但我不能在我的.background-light或background--dark元素中使用它，因为它会填充我的其他元素，这些元素需要有一个"不可见"的BG

我的汉堡设置如下-

$(document).ready(function() {
	  jQuery('.mobilemenu').click(function(e) {
	    jQuery(this).toggleClass('is-active');
	    jQuery('.mobile-nav').toggleClass('active');
	    var delay = 100;
	    $('.linkitem').each(function(i, e) {
	      setTimeout(function() {
	        $(e).toggleClass('animate');
	      }, i * delay);
	    });
	  });
	});

.mobile-nav {
  width: 100%;
  height: 0%;
  opacity: .0;
  background-color: #000000;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  transition: height .25s ease-in-out, opacity .55s;
  -moz-transition: height .25s ease-in-out, opacity .55s;
  -webkit-transition: height .25s ease-in-out, opacity .55s;
}
.mobile-nav.active {
  display: block;
  visibility: visible;
  opacity: .85;
  height: 100%;
  transition: height .35s ease-in-out, opacity .55s;
  -moz-transition: height .35s ease-in-out, opacity .55s;
  -webkit-transition: height .35s ease-in-out, opacity .55s;
}
.mobile-link-container {
  visibility: inherit;
  display: table;
  height: 100%;
  width: 100%;
}
.mobile-links {
  visibility: inherit;
  display: table-cell;
  vertical-align: middle;
  color: #FFFFFF;
  padding-left: 5%;
  font-size: 3.5em;
  letter-spacing: .1em;
  list-style-type: none;
}
.mobile-links ul {
  list-style-type: none;
  padding-left: 0;
}
.mobilemenu {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 35px;
  height: 50px;
  font-size: 0;
  text-indent: -9999px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
  z-index: 1010;
  background: none;
}
.mobilemenu:focus {
  outline: none;
}
.mobilemenu span {
  display: block;
  position: absolute;
  top: 25px;
  left: 5px;
  right: 5px;
  height: 3px;
  background: #000000;
}
.mobilemenu span::before,
.mobilemenu span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #000000;
  content: "";
}
.mobilemenu span::before {
  top: -8px;
}
.mobilemenu span::after {
  bottom: -8px;
}
.mobilemenu--htx {
  background-color: none;
}
.mobilemenu--htx span {
  transition: background 0s 0.3s;
}
.mobilemenu--htx span::before,
.mobilemenu--htx span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}
.mobilemenu--htx span::before {
  transition-property: top, transform;
}
.mobilemenu--htx span::after {
  transition-property: bottom, transform;
}
/* active state, i.e. menu open */
.mobilemenu--htx.is-active {
  background-color: none;
}
.mobilemenu--htx.is-active span {
  background: none;
}
.mobilemenu--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
  background-color: #FFFFFF;
}
.mobilemenu--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
  background-color: #FFFFFF;
}
.mobilemenu--htx.is-active span::before,
.mobilemenu--htx.is-active span::after {
  transition-delay: 0s, 0.3s;
}
.animate {
  visibility: inherit;
  transform: scale(2, 2) translateX(-100px);
  animation-name: scalenav;
  animation-duration: .50s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobile-nav">
  <div class="mobile-link-container">
    <div class="mobile-links">
      <ul>
        Nav Link 1, Nav link 2, Nav link 3
      </ul>
    </div>
  </div>
</div>
<button class="mobilemenu mobilemenu--htx">
  <span></span>
</button>

background-check.js应用于元素的两个类是：

.background--light {
    color: #000000 !important;
    fill: #000000;
}
.background--dark {
    color: #FFFFFF !important;
    fill: #FFFFFF;
}

我尝试在.mobilemenu元素上使用fill:，也尝试将background-color添加到两个"--light"answers"--dark"类中，但这只会干扰我页面上的所有其他元素，我也在应用它们，而且似乎也不会影响::before和::after菜单类

有没有其他选项可以动态更改汉堡的颜色？

如果有帮助的话，我愿意重写汉堡包并去掉psuedo类——唯一的规定是它必须是纯CSS，我想保留动画。