Skip to content

Add dark/light theme support #130

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add dark/light theme support #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3f93e84
Added theme-dark and theme-light CSS files
MDJAVEED7 Apr 5, 2025
d99a2b4
Add dark/light theme toggle with styles
MDJAVEED7 Apr 5, 2025
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
138 changes: 63 additions & 75 deletions _includes/topnav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,69 @@
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container topnavlinks">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{site.baseurl}}/"><img src="{{site.baseurl}}/images/sun-small.png" alt="Google Summer of Code Logo"><span class="projectTitle"> {{site.topnav_title}}</span></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<!-- toggle sidebar button -->
<li><a id="tg-sb-link" href="#"><i id="tg-sb-icon" class="fa fa-toggle-on"></i> Nav</a></li>
<!-- entries without drop-downs appear here -->

{% assign topnav = site.data[page.topnav] %}
{% assign topnav_dropdowns = site.data[page.topnav].topnav_dropdowns %}

{% for entry in topnav.topnav %}
{% for item in entry.items %}
{% if item.external_url %}
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{site.baseurl}}/">
<img src="{{site.baseurl}}/images/sun-small.png" alt="Google Summer of Code Logo">
<span class="projectTitle">{{site.topnav_title}}</span>
</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a id="tg-sb-link" href="#"><i id="tg-sb-icon" class="fa fa-toggle-on"></i> Nav</a></li>

<!-- Theme Toggle Button -->
<li>
<a href="#" id="theme-toggle">
<i class="fa fa-adjust"></i> Theme
</a>
</li>

{% assign topnav = site.data[page.topnav] %}
{% assign topnav_dropdowns = site.data[page.topnav].topnav_dropdowns %}

{% for entry in topnav.topnav %}
{% for item in entry.items %}
{% if item.external_url %}
<li><a href="{{item.external_url}}" target="_blank">{{item.title}}</a></li>
{% elsif page.url contains item.url %}
{% elsif page.url contains item.url %}
<li class="active"><a href="{{item.url | remove: "/"}}">{{item.title}}</a></li>
{% else %}
{% else %}
<li><a href="{{item.url | remove: "/"}}">{{item.title}}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
<!-- entries with drop-downs appear here -->
<!-- conditional logic to control which topnav appears for the audience defined in the configuration file.-->
{% for entry in topnav_dropdowns %}
{% for folder in entry.folders %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ folder.title }}<b class="caret"></b></a>
<ul class="dropdown-menu">
{% for folderitem in folder.folderitems %}
{% if folderitem.external_url %}
<li><a href="{{folderitem.external_url}}" target="_blank">{{folderitem.title}}</a></li>
{% elsif page.url contains folderitem.url %}
<li class="dropdownActive"><a href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
{% else %}
<li><a href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endfor %}
{% endfor %}
{% if site.feedback_disable == null or site.feedback_disable == false %}
{% include feedback.html %}
{% endif %}
<!--comment out this block if you want to hide search-->
<!--
<li>
<div id="search-demo-container">
<input type="text" id="search-input" placeholder="{{site.data.strings.search_placeholder_text}}">
<ul id="results-container"></ul>
</div>
<script src="{{ "/third_party/js/jekyll-search.js"}}" type="text/javascript"></script>
<script type="text/javascript">
SimpleJekyllSearch.init({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
dataSource: '{{ "/search.json" }}',
searchResultTemplate: '<li><a href="{url}" title="{{page.title | replace: "\'", "\"}}">{title}</a></li>',
noResultsText: '{{site.data.strings.search_no_results_text}}',
limit: 10,
fuzzy: true,
})
</script>
</li>
-->
</ul>
</div>
</div>
<!-- /.container -->
</nav>
{% endif %}
{% endfor %}
{% endfor %}

{% for entry in topnav_dropdowns %}
{% for folder in entry.folders %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ folder.title }}<b class="caret"></b></a>
<ul class="dropdown-menu">
{% for folderitem in folder.folderitems %}
{% if folderitem.external_url %}
<li><a href="{{folderitem.external_url}}" target="_blank">{{folderitem.title}}</a></li>
{% elsif page.url contains folderitem.url %}
<li class="dropdownActive"><a href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
{% else %}
<li><a href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endfor %}
{% endfor %}

{% if site.feedback_disable == null or site.feedback_disable == false %}
{% include feedback.html %}
{% endif %}
</ul>
</div>
</div>
</nav>

130 changes: 67 additions & 63 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,37 @@
<html>
<head>
{% include head.html %}

<!-- Theme stylesheet -->
<link id="theme-stylesheet" rel="stylesheet" href="{{ '/css/theme-dark.css' | relative_url }}">

<script>
// Load saved theme from localStorage
document.addEventListener("DOMContentLoaded", function () {
const themeLink = document.getElementById("theme-stylesheet");
const savedTheme = localStorage.getItem("theme") || "dark";
themeLink.href = "/css/theme-" + savedTheme + ".css";
});
</script>

<script>
$(document).ready(function() {
$(document).ready(function () {
// Theme toggle logic
$("#theme-toggle").click(function (e) {
e.preventDefault();
const themeLink = $("#theme-stylesheet");
const currentHref = themeLink.attr("href");
const newTheme = currentHref.includes("dark") ? "light" : "dark";
themeLink.attr("href", "/css/theme-" + newTheme + ".css");
localStorage.setItem("theme", newTheme);
});

// Initialize navgoco with default options
$("#mysidebar").navgoco({
caretHtml: '',
accordion: true,
openClass: 'active', // open
save: false, // leave false or nav highlighting doesn't work right
openClass: 'active',
save: false,
cookie: {
name: 'navgoco',
expires: false,
Expand All @@ -21,86 +44,67 @@
}
});

$("#collapseAll").click(function(e) {
$("#collapseAll").click(function (e) {
e.preventDefault();
$("#mysidebar").navgoco('toggle', false);
});

$("#expandAll").click(function(e) {
$("#expandAll").click(function (e) {
e.preventDefault();
$("#mysidebar").navgoco('toggle', true);
});

});
$('[data-toggle="tooltip"]').tooltip();

</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<script>
$(document).ready(function() {
$("#tg-sb-link").click(function() {
$("#tg-sb-link").click(function () {
$("#tg-sb-sidebar").toggle();
$("#tg-sb-content").toggleClass('col-md-9');
$("#tg-sb-content").toggleClass('col-md-12');
$("#tg-sb-icon").toggleClass('fa-toggle-on');
$("#tg-sb-icon").toggleClass('fa-toggle-off');
$("#tg-sb-content").toggleClass('col-md-9 col-md-12');
$("#tg-sb-icon").toggleClass('fa-toggle-on fa-toggle-off');
});
});
</script>

{% if page.datatable == true %}
<!-- Include the standard DataTables bits -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<!-- First, this walks through the tables that occur between ...-begin
and ...-end and add the "datatable" class to them.
Then it invokes DataTable's standard initializer
Credit here: http://www.beardedhacker.com/blog/2015/08/28/add-class-attribute-to-markdown-table/
-->
<script>
$(document).ready(function(){
$('div.datatable-begin').nextUntil('div.datatable-end', 'table').addClass('display');
$('table.display').DataTable( {
paging: true,
stateSave: true,
searching: true
});
});
</script>
<!-- DataTables setup -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<script type="text/javascript" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function () {
$('div.datatable-begin').nextUntil('div.datatable-end', 'table').addClass('display');
$('table.display').DataTable({
paging: true,
stateSave: true,
searching: true
});
});
</script>
{% endif %}

</head>
<body>
{% include topnav.html %}
<!-- Page Content -->
<div class="container">
<div id="main">
<!-- Content Row -->
<div class="row">
{% assign content_col_size = "col-md-12" %}
{% unless page.hide_sidebar %}
<!-- Sidebar Column -->
<div class="col-md-3" id="tg-sb-sidebar">
{% include sidebar.html %}
</div>
{% assign content_col_size = "col-md-9" %}
{% endunless %}

<!-- Content Column -->
<div class="{{content_col_size}}" id="tg-sb-content">
{{content}}
{% include topnav.html %}

<!-- Page Content -->
<div class="container">
<div id="main">
<div class="row">
{% assign content_col_size = "col-md-12" %}
{% unless page.hide_sidebar %}
<div class="col-md-3" id="tg-sb-sidebar">
{% include sidebar.html %}
</div>
{% assign content_col_size = "col-md-9" %}
{% endunless %}

<div class="{{ content_col_size }}" id="tg-sb-content">
{{ content }}
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /#main -->
</div>

{% if site.google_analytics %}
{% include google_analytics.html %}
{% endif %}
</body>
{% if site.google_analytics %}
{% include google_analytics.html %}
{% endif %}
</html>
28 changes: 28 additions & 0 deletions css/theme-dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/* theme-dark.css */

body {
background-color: #121212;
color: #f1f1f1;
}

a {
color: #90caf9;
}

.navbar {
background-color: #1f1f1f;
}

#tg-sb-sidebar {
background-color: #1e1e1e;
border-right: 1px solid #333;
}

#tg-sb-content {
background-color: #1a1a1a;
}

pre, code {
background-color: #2c2c2c;
color: #e0e0e0;
}
28 changes: 28 additions & 0 deletions css/theme-light.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/* theme-light.css */

body {
background-color: #ffffff;
color: #000000;
}

a {
color: #1a0dab;
}

.navbar {
background-color: #f8f9fa;
}

#tg-sb-sidebar {
background-color: #f1f1f1;
border-right: 1px solid #ccc;
}

#tg-sb-content {
background-color: #ffffff;
}

pre, code {
background-color: #f5f5f5;
color: #333333;
}