array-in-a-matrix/arrayinamatrix.xyz
array-in-a-matrix/arrayinamatrix.xyz
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Activity

darkmode

Browse source
This commit is contained in:
array-in-a-matrix 2021-06-09 13:50:12 -04:00
parent 7417504464
commit 5d1e7253ea
3 changed files with 60 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
index.html
View file

@ -13,8 +13,9 @@
<header class="page-header">
<h1 class="project-name">Array in a Matrix</h1>
<h2 class="project-tagline"> Welcome!</h2>
<button class="btn" onclick="darkmode()">Toggle dark mode</button>
<a href="https://github.com/array-in-a-matrix" class="btn"><i class="fa fa-github"></i> GitHub</a>
<a href="https://www.instagram.com/array.in.a.matrix/" class="btn"><i class="fa fa-inst"></i> Instagram</a>
<a href="https://www.instagram.com/array.in.a.matrix/" class="btn"><i class="fa fa-instagram"></i> Instagram</a>
</header>
<main class="main-content">

78
script.js
View file

@ -1,30 +1,60 @@
let randomthemes = [
["#ff8008", "#ffc837"],
["#4A00E0", "#8E2DE2"],
["#FF512F", "#F09819"],
["#FF5F6D", "#FFC371"],
["#FF416C", "#FF4B2B"],
["#ee0979", "#ff6a00"],
["#ec008c", "#fc6767"],
["#f857a6", "#ff5858"],
["#00c3ff", "#ffff1c"],
["#e1eec3", "#f05053"],
["#a8ff78", "#78ffd6"],
["#B3FFAB", "#12FFF7"],
["#AAFFA9", "#11FFBD"],
["#5433FF", "#20BDFF"],
["#00c6ff", "#0072ff"],
["#4e54c8", "#8f94fb"],
["#396afc", "#2948ff"],
["#673AB7", "#512DA8"],
["#4776E6", "#8E54E9"],
["#DA22FF", "#9733EE"],
let random_light_theme = [
// ["#ff8008", "#ffc837"], //orange
// ["#4A00E0", "#8E2DE2"], //purple
// ["#FF512F", "#F09819"], //orange
// ["#FF5F6D", "#FFC371"], //pink
// ["#FF416C", "#FF4B2B"], //pink-orange
// ["#ee0979", "#ff6a00"], //pink-orange
// ["#ec008c", "#fc6767"], //pink
// ["#f857a6", "#ff5858"], //pink
// ["#00c3ff", "#ffff1c"], //blue-lime
// ["#e1eec3", "#f05053"], // white-pink
// ["#5433FF", "#20BDFF"], //ugly blue
["#00c6ff", "#0072ff"], //light blue
["#4e54c8", "#8f94fb"], //purple
["#396afc", "#2948ff"], // blue
// ["#673AB7", "#512DA8"], //dark purple
// ["#4776E6", "#8E54E9"], //purple
// ["#DA22FF", "#9733EE"], // violet
// ["#c31432", "#240b36"], // red
// ["#ad5389", "#3c1053"], // purple
];
let random_dark_theme = [
// ["#ff8008", "#ffc837"], //orange
// ["#4A00E0", "#8E2DE2"], //purple
// ["#FF512F", "#F09819"], //orange
// ["#FF5F6D", "#FFC371"], //pink
// ["#FF416C", "#FF4B2B"], //pink-orange
// ["#ee0979", "#ff6a00"], //pink-orange
// ["#ec008c", "#fc6767"], //pink
// ["#f857a6", "#ff5858"], //pink
// ["#00c3ff", "#ffff1c"], //blue-lime
// ["#e1eec3", "#f05053"], // white-pink
// ["#5433FF", "#20BDFF"], //ugly blue
// ["#00c6ff", "#0072ff"], //light blue
// ["#4e54c8", "#8f94fb"], //purple
// ["#396afc", "#2948ff"], // blue
// ["#673AB7", "#512DA8"], //dark purple
// ["#4776E6", "#8E54E9"], //purple
// ["#DA22FF", "#9733EE"], // violet
["#c31432", "#240b36"], // red
["#ad5389", "#3c1053"], // purple
];
function rand(items) {
return items[~~(items.length * Math.random())];
}
let randcolor = rand(randomthemes);
document.documentElement.style.setProperty("--left", randcolor[0]);
document.documentElement.style.setProperty("--right", randcolor[1]);
let chosen_color = rand(random_light_theme);
function assign_color(random_color){
document.documentElement.style.setProperty("--left", random_color[0])
document.documentElement.style.setProperty("--right", random_color[1])
}
assign_color(chosen_color)
function darkmode() {
var element = document.body;
element.classList.toggle("dark-mode");
}

4
style.css
View file

@ -706,3 +706,7 @@ a:hover {
.site-footer-credits {
color:#819198
}
.dark-mode {
background-color: black;
color: white;
}