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

Front page light and dark mode #45366

Closed
wants to merge 4 commits into from
Closed

Front page light and dark mode #45366

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4de230c
Front page light and dark mode
Feb 27, 2024
63f1347
Empty commit
Mar 6, 2024
ad2af5e
Update layouts/partials/css.html
Mar 13, 2024
89621a3
Update layouts/partials/navbar.html
Mar 13, 2024
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
41 changes: 41 additions & 0 deletions layouts/partials/css.html
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is the wrong place to make changes; look in assets/scss instead.

Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,49 @@
padding-left: 15px;
padding-right: 15px;
}
}

body.dark {background-color: #000;} /* #292c35*/
#oceanNodes.dark, #features.dark, #talkToUs.dark, #cncf.dark, #kubeweekly.dark {background-color: #000;}
body.dark .content, body.dark .main-section, body.dark h1 {color: #fff;}

.checkbox-dark {
opacity: 0;
position: absolute;
}

.checkbox-label {
background-color: #111;
width: 46px;
height: 22px;
border-radius: 50px;
position: relative;
padding: 5px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}

.fa-moon {color: #f1c40f;}

.fa-sun {color: #f39c12;}

.checkbox-label .ball {
background-color: #fff;
width: 18px;
height: 18px;
position: absolute;
left: 2px;
top: 2px;
border-radius: 50%;
transition: transform 0.2s linear;
}

.checkbox-dark:checked + .checkbox-label .ball {
transform: translateX(24px);
}
tamilselvan1102 marked this conversation as resolved.
Show resolved Hide resolved

</style>
<!--end splitter-->

Expand Down
10 changes: 10 additions & 0 deletions layouts/partials/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,16 @@
{{ partial "navbar-lang-selector.html" . }}
</li>
{{ end }}
<li class="nav-item mr-2 mb-lg-0">
<div id="div-darkmode" style="padding-top:10px;">
<input type="checkbox" class="checkbox-dark" id="checkbox-dark">
<label for="checkbox-dark" class="checkbox-label">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<span class="ball"></span>
</label>
</div>
</li>
tamilselvan1102 marked this conversation as resolved.
Show resolved Hide resolved
</ul>
</div>
<button id="hamburger" onclick="kub.toggleMenu()" data-auto-burger-exclude><div></div></button>
Expand Down
16 changes: 16 additions & 0 deletions layouts/partials/scripts.html
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think any change to this file is needed.

Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,22 @@
}
}

const checkboxDark = document.getElementById("checkbox-dark")
checkboxDark.addEventListener("change", () => {
document.body.classList.toggle("dark")
$("#oceanNodes").toggleClass("dark");
$("#features").toggleClass("dark");
$("#talkToUs").toggleClass("dark");
$("#cncf").toggleClass("dark");
$("#kubeweekly").toggleClass("dark");
})

var pathName=window.location.pathname;
$("#div-darkmode").hide();
if(pathName == "" || pathName == "/"){
$("#div-darkmode").show();
}

const screenWidthMediaQuery = window.matchMedia("(min-width: 768px)");

const eleNav = document.getElementById("sidebarnav");
Expand Down