Contrast na página!

<div class="navbar navbar-inverse" style="border-radius:0px;">
 <div class="container">
 <div class="container-fluid">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 </div>
 <div class="collapse navbar-collapse" id="myNavbar">
 <ul class="nav navbar-nav">
 <li class="active"><a href="{$GET_HOME}"><span class="glyphicon glyphicon-home"></span> Home</a></li>
 <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categorias <b class="caret"></b></a>
 <ul class="dropdown-menu">
 <li><a href="#">Celulares</a></li>
 <li><a href="#">Computadores</a></li>
 <li><a href="#">Acessórios</a></li>
 </ul>
 </li>
 <li><a href="{$PAG_MINHACONTA}"><span class="glyphicon glyphicon-user"></span> Minha Conta</a></li>
 <li><a href="{$PAG_CARRINHO}"><span class="glyphicon glyphicon-shopping-cart"></span> Carrinho</a></li>
 <li><a href="{$PAG_CONTATO}"><span class="glyphicon glyphicon-envelope"></span> Contato</a></li>
 <li><a href="{$PAG_SOBRE}"><span class="glyphicon glyphicon-book"></span> Sobre</a></li>
 </ul>
 <ul class="nav navbar-nav navbar-right">
 <li><a title="Diminuir Fonte" alt="Diminuir" style="font-size:16px;" href="#"><span id="diminuir-fonte" class="glyphicon glyphicon- font"></span>-</a></li>
 <li><a title="Aumentar Fonte" alt="Aumentar" style="font-size:16px;" href="#"><span id="aumentar-fonte" class="glyphicon glyphicon- font"></span>+</a></li>
 <li><a style="font-size:16px;" href="#altocontraste" id="altocontraste" accesskey="3" onclick="window.toggleContrast()" onkeydown="window.toggleContrast"><span class="glyphicon glyphicon-adjust"></span></a></li>
 </ul>
 </div>
 </div>
 </div>
</div>

.contrast .pagination>.active>a,
.contrast .pagination>.active>a:focus,
.contrast .pagination>.active>a:hover,
.contrast .pagination>.active>span,
.contrast .pagination>.active>span:focus,
.contrast .pagination>.active>span:hover {

 background-color: #EEEEEE !important;
 color: #222 !important;
 border-color: white !important;
}

.contrast .pagination a,
.contrast .pagination span {

 background-color: #222 !important;
 color: white !important;
 border-color: white !important;
}

.contrast .pagination a:hover,
.contrast .pagination a:focus,
.contrast .pagination span:hover,
.contrast .pagination span:focus {

	background-color: #6B6B6B !important;
	border-color: white !important;
	color: white !important;
}

.contrast .glyphicon.glyphicon-shopping-cart {

	color: black !important;
}

.contrast a.btn.btn-default {

	color: black !important;
}

.contrast .btn.btn-secondary {

	background-color: white !important;
	color: black !important;
}

.contrast .btn.btn-secondary:hover, .contrast a.btn.btn-default:hover {

	background-color: #A7A7A7 !important;
	border-color: #A7A7A7 !important;
	color: white !important;
}

	Boa tarde pessoal, estou com uma certa dificuldade, quando clico em contrast na minha página, fica escura, ai vou na opção categorias, o texto fica branco, como faço para resolver isso? Como faria essa chamada para poder atingir esse dropdown-menu e poder dar uma outra cor. Obrigado pela atenção.

	 

	 

	![imagem](https://forum.imasters.com.br/monthly_2018_01/exemplo3.jpg.0dd2e987787895dff827d5d8ce7cf407.jpg)