Skip to content

Dark mode for caMicroscope pages #1075

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
chandrikarj wants to merge 19 commits into
base: develop
Choose a base branch
from
Open

Dark mode for caMicroscope pages #1075

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
a86232d
Add 'Skip to Content' link for accessibility in Info, Landing, and Ta…
chandrikarj Dec 29, 2024
6f1a653
Update: Modified file to address all cases
chandrikarj Jan 5, 2025
8fead5b
Modified the styling for table.htmlfor a better UI in mobile view
chandrikarj Jan 6, 2025
00abb3c
Removed unnecessary changes to supporting files.
chandrikarj Jan 6, 2025
232402e
Add darkmode for caMicroscope
chandrikarj Jan 15, 2025
d381c38
restore common.css to default
chandrikarj Jan 15, 2025
592ce19
fix changes to make code look neater
chandrikarj Jan 16, 2025
b107940
Info.html
chandrikarj Jan 16, 2025
7209e32
table.js
chandrikarj Jan 16, 2025
024d9d4
package-lock.json
chandrikarj Jan 16, 2025
43994ed
package.json
chandrikarj Jan 16, 2025
5a9c451
common.css
chandrikarj Jan 16, 2025
9a1a8f9
landing.html
chandrikarj Jan 16, 2025
95fd2b4
signup.html
chandrikarj Jan 16, 2025
dcb5615
table.html
chandrikarj Jan 16, 2025
b558c4c
table.html
chandrikarj Jan 16, 2025
e466fbb
Update table.css
chandrikarj Jan 17, 2025
18895f7
Update workbench.css
chandrikarj Jan 17, 2025
a05b302
Update signup.css
chandrikarj Jan 17, 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
16 changes: 16 additions & 0 deletions apps/Info.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
<link rel="stylesheet" href="./table.css" />
<link rel="stylesheet" href="./info.css" />
<link rel="shortcut icon" type="image/x-icon" href="/apps/landing/favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

<body>
Expand Down Expand Up @@ -65,6 +66,21 @@
<li class="nav-item link" style="font-family: sans-serif;">
<a class="nav-link" href="./signup/signup.html"> <i class="fas fa-user-plus"></i> Signup</a>
</li>

<!-- Darkmode Button as List Item -->
<li class="nav-item link">
<button onclick="darkMode()" class="darkmode-btn">
<i class="fas fa-moon"></i> Darkmode
</button>
</li>
</ul>

<script>
function darkMode() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</ul>
</div>
</div>
Expand Down
94 changes: 94 additions & 0 deletions apps/dev-workbench/workbench.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,97 @@
margin-left: 0 !important;
}
}

/* Dark Mode Options */

.darkmode-btn{
background-color: transparent;
box-shadow: inset 0 0 0 2px rgba(144, 144, 144, 0.25);
color: #4d5968 !important;
letter-spacing: 0.05em;
text-transform: uppercase;
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
border-radius: 5px;
border: 0;
cursor: pointer;
display: inline-block;
font-size: 0.8em;
font-weight: 700;
line-height: 3.35em;
padding: 0 2em;
text-align: center;
text-decoration: none;
white-space: nowrap;


}


/* Dark mode hover effect */
.dark-mode .darkmode-btn:hover {
background-color: transparent !important; /* No background in dark mode hover */
color: #ccc; /* Optional: Light gray text on hover in dark mode */
border-color: #ccc; /* Optional: Adjust border color in dark mode */
transform: scale(1.05); /* Keep the hover scaling effect */
box-shadow: none !important; /* Ensure no shadow in dark mode */
}

/* Dark Mode Styles */
.dark-mode {
background-color: black;
}

.dark-mode ul.stepper li a .circle {
display: inline-block;
width: 1.75rem;
height: 1.75rem;
margin-right: .5rem;
line-height: 1.7rem;
color: #fff !important;
text-align: center;
background: grey !important;
border-radius: 50%;
}

.dark-mode .stepper-vertical li:not(:last-child):after {
background-color: grey !important;
}

.dark-mode .step-content.grey.grey.lighten-3{
color: white !important;
background-color: #212529 !important;
}


.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode span,
.dark-mode a{
color: white !important; /* Force text to be white */
}


@media screen and (max-width: 736px) {
.dark-mode .posts .post .image {
width: 30%;
min-width: 6em;
}

.dark-mode .posts .post .content {
width: 70%;
}
}

@media screen and (max-width: 480px) {
.dark-mode .posts .post .image {
margin-right: 1.5em;
}
}
17 changes: 17 additions & 0 deletions apps/dev-workbench/workbench.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,23 @@
aria-expanded="false"
>Options</a
>

<!-- Darkmode Button as List Item -->
<li class="nav-item link">
<button onclick="darkMode()" class="darkmode-btn">
<i class="fas fa-moon"></i> Darkmode
</button>
</li>


<script>
function darkMode() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</ul>

<div
style="margin-left: -5em;"
class="dropdown-menu dropdown-primary"
Expand Down
78 changes: 78 additions & 0 deletions apps/info.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,3 +100,81 @@ footer{
margin-bottom: 0;
}


/* Dark Mode Option: */
.darkmode-btn{
background-color: transparent;
box-shadow: inset 0 0 0 2px rgba(144, 144, 144, 0.25);
color: #4d5968 !important;
letter-spacing: 0.05em;
text-transform: uppercase;
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
border-radius: 5px;
border: 0;
cursor: pointer;
display: inline-block;
font-size: 0.8em;
font-weight: 700;
line-height: 3.35em;
padding: 0 2em;
text-align: center;
text-decoration: none;
white-space: nowrap;


}

/* Dark mode hover effect */
.dark-mode .darkmode-btn:hover {
background-color: transparent !important; /* No background in dark mode hover */
color: #ccc; /* Optional: Light gray text on hover in dark mode */
border-color: #ccc; /* Optional: Adjust border color in dark mode */
transform: scale(1.05); /* Keep the hover scaling effect */
box-shadow: none !important; /* Ensure no shadow in dark mode */
}


.dark-mode .nav-item.active.link{
color:black !important;
}


/* Dark Mode Styles */
.dark-mode {
background-color: black;
color: white;
}


.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode p,
.dark-mode span{
color: white !important; /* Force text to be white */
}


@media screen and (max-width: 736px) {
.dark-mode .posts .post .image {
width: 30%;
min-width: 6em;
}

.dark-mode .posts .post .content {
width: 70%;
}
}

@media screen and (max-width: 480px) {
.dark-mode .posts .post .image {
margin-right: 1.5em;
}
}
20 changes: 16 additions & 4 deletions apps/landing/landing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<!-- common styling -->
<link rel='stylesheet' type='text/css' media='all' href='../common.css'/>
<link rel="shortcut icon" type="image/x-icon" href="favicon.png">

</head>
<body>

Expand Down Expand Up @@ -49,6 +49,20 @@
<li class="nav-item link" style="font-family: sans-serif;">
<a class="nav-link" target="_blank" href="https://github.com/camicroscope/caMicroscope/issues"> <i class="fas fa-comment"></i> Feedback</a>
</li>

<!-- Darkmode Button as List Item -->
<li class="nav-item link">
<button onclick="darkMode()" class="darkmode-btn">
<i class="fas fa-moon"></i> Darkmode
</button>
</li>

<script>
function darkMode() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</ul>
</div>
</div>
Expand All @@ -69,8 +83,6 @@ <h1>caMicroscope</h1>
</div>

<!-- Content -->


<div role="contentinfo" class="content">
<p>caMicroscope is a tool to view, annotate, and analyze biomedical images.</p>
<a href="#" class="image fit" aria-label="Reload Home Page"><img src="./banner1.jpg" alt="" /></a>
Expand Down Expand Up @@ -130,5 +142,5 @@ <h3>Documentation</h3>
<!-- script to call a footer(layout footer in the common > utils folder) function -->
<script> insertFooterLayout(); </script>
</body>

</html>
Loading