Изменить цвет навигационной панели в Twitter Bootstrap
дал красивый веб-сайт, используя html5, CSS, начальную загрузку. Я хотел узнать, смогу ли я автоматически изменить цвет фона и цвета панели навигации в коде днем (синий) и ночью (тускло-красный). Что я могу сделать, чтобы изменить цвет панели навигации и фона в зависимости от времени пользователя? Вот мой код:
<body>
<nav>
<h1 style="font-family:Helvetica;">
<ul class="nav">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
<li><a class="dropdown" href="#">Menu 2</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
<li><font size="+4", color="white">IBAE</font> <br></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
</ul>
</h1>
</nav>
<br>
<br>
<br>
<br>
<br>
<div class="container-fluid"> <!-- Cards-->
<div class="row">
<!--row one column two-->
<div class="col-sm-3"><div class="cardpop">
<div class="card img-fluid" style="width:600px">
<img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<font color="white">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</font>
</div>
</div></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
Вот CSS
nav h1
{
vertical-align: middle;
background-color: rgb(0, 0, 0);
border: 10px solid rgba(0, 0, 0, 0);
text-align: center;
position: fixed;
position: top;
min-width: 100%;
z-index: 3;
}
.nav ul
{
vertical-align: middle;
-webkit-font-smoothing:antialiased;
text-shadow:0 1px 0 rgba(255, 255, 255, 0);
background: rgb(0, 0, 0);
list-style: none;
margin: 0;
padding: 0;
width: 100%;
z-index: 3;
}
.card-img-wrap img {
transition: transform .25s;
width: 100%;
}
.card-img-wrap:hover img {
transform: scale(1.2);
}
.card-img-wrap:hover:after {
opacity: 1;
}
Это весь мой код. Там нет пользовательских сценариев Java. Пожалуйста, помогите мне с кодом или учебным материалом или ссылками на учебный материал, который я мог бы использовать для реализации логики. Также можно ли добиться того, что я ищу, используя только CSS? Если это невозможно, как мне программировать, используя java-скрипт? Я действительно ценю помощь заранее. Большое спасибо.