Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Theme Toggler Feature Added on Navbar #977

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Theme Toggler Feature Added on Navbar #977

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion count.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
window.onload = function() {
var toggle_theme = document.getElementById('switch-theme');
window.onload = function () {
let counts = {
'Company': 0,
'Project': 0,
Expand All @@ -21,4 +22,28 @@ window.onload = function() {
document.querySelector('#projectOutput .count').textContent = counts['Project'];
document.querySelector('#foundationOutput .count').textContent = counts['Foundation'];
document.querySelector('#individualOutput .count').textContent = counts['Individual'];
toggle_theme.innerHTML += mode_dark;
};
var mode_light = `<svg width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17q-2.075 0-3.538-1.463T7 12q0-2.075 1.463-3.538T12 7q2.075 0 3.538 1.463T17 12q0 2.075-1.463 3.538T12 17ZM2 13q-.425 0-.713-.288T1 12q0-.425.288-.713T2 11h2q.425 0 .713.288T5 12q0 .425-.288.713T4 13H2Zm18 0q-.425 0-.713-.288T19 12q0-.425.288-.713T20 11h2q.425 0 .713.288T23 12q0 .425-.288.713T22 13h-2Zm-8-8q-.425 0-.713-.288T11 4V2q0-.425.288-.713T12 1q.425 0 .713.288T13 2v2q0 .425-.288.713T12 5Zm0 18q-.425 0-.713-.288T11 22v-2q0-.425.288-.713T12 19q.425 0 .713.288T13 20v2q0 .425-.288.713T12 23ZM5.65 7.05L4.575 6q-.3-.275-.288-.7t.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7t-.275.7q-.275.3-.687.288T5.65 7.05ZM18 19.425l-1.05-1.075q-.275-.3-.275-.713t.275-.687q.275-.3.688-.287t.712.287L19.425 18q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3ZM16.95 7.05q-.3-.275-.288-.687t.288-.713L18 4.575q.275-.3.7-.288t.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275t-.7-.275ZM4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.712-.275t.688.275q.3.275.288.688t-.288.712L6 19.425q-.275.3-.7.288t-.725-.288Z"/></svg>`


var mode_dark = `<svg width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 21a9 9 0 0 0 8.997-9.252a7 7 0 0 1-10.371-8.643A9 9 0 0 0 12 21Z"/></svg>`;

toggle_theme.addEventListener('click', () => {
const bodyElem = document.getElementsByTagName('body');
const tfLogo = document.getElementsByClassName('logo');
console.log('logo :>> ', tfLogo[0]);
if (bodyElem[0].classList.contains('light')) {
toggle_theme.innerHTML = '';
toggle_theme.innerHTML += mode_light;
bodyElem[0].classList.remove('light');
bodyElem[0].classList.add('dark');
tfLogo[0].src = 'images/[email protected]'
} else {
toggle_theme.innerHTML = ''
toggle_theme.innerHTML += mode_dark;
bodyElem[0].classList.remove('dark');
bodyElem[0].classList.add('light');
tfLogo[0].src = 'images/[email protected]'
}
})
8 changes: 6 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,12 @@
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>

<body>
<a href="/announcement" class="purple-banner">[August 25, 2023] OpenTF Announces Fork of Terraform. Read more >> </a>
<body class="light">
<div class="banner">
<a href="announcement.html" class="purple-banner">[August 25, 2023] OpenTF Announces Fork of Terraform. Read more >> </a>
<span class="theme-switch" id="switch-theme"></span>
</div>

<div class="container mx-auto">
<picture>
<source srcset="images/on-dark%402x.png" media="(prefers-color-scheme: dark)">
Expand Down
36 changes: 31 additions & 5 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ html {
/*16px*/

body {
background: white;
color: rgb(75 85 99);

font-family: 'Montserrat', sans-serif;
Expand All @@ -27,7 +26,13 @@ body {
padding-bottom: 2rem;
margin: 0;
}

.light {
background: white;
}
.dark{
background: #000;
color: #fff
}
div.container {
padding: 0 1rem 0 1rem;
}
Expand Down Expand Up @@ -388,7 +393,7 @@ span {
font-style: italic;
}

.purple-banner {
/* .purple-banner {
display: block;
background-color: #8a2be2;
color: white;
Expand All @@ -397,13 +402,34 @@ span {
font-size: 20px;
text-decoration: none;
transition: background-color 0.3s ease;
}
} */

.purple-banner:hover {
.banner:hover {
background-color: purple;
}

img {
max-width: 100%;
height: auto;
}

.banner {
display: flex;
background-color: #8a2be2;
justify-content: center;
align-items: center;
padding: 0.75rem 0.5rem;
font-size: 20px;
text-decoration: none;
transition: background-color 0.3s ease;
position: sticky;
top:0;
.theme-switch,
.purple-banner {
text-align: center;
color: white;
}
.theme-switch{
margin-left: 1rem;
}
}