Skip to content

Commit

Permalink
Merge pull request #5434 from nextcloud/ernolf/darkmode-fix
Browse files Browse the repository at this point in the history
aio-interface: fix dark-mode
  • Loading branch information
szaimen authored Oct 18, 2024
2 parents 2d78730 + 9da4094 commit 327c91d
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 24 deletions.
17 changes: 13 additions & 4 deletions php/public/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
--color-info: #0071ad;
--color-info-hover: #00aaef;
--color-border-maxcontrast: #7d7d7d;
--color-loader: #f3f3f3;
--border: .5px;
--border-hover: 2px;
--border-radius: 7px;
Expand All @@ -35,6 +36,7 @@
--color-error-text: #ff8080;
--color-info: #00aeff;
--color-info-hover: #33beff;
--color-loader: var(--color-border-maxcontrast);
--border-hover: var(--border);
}

Expand Down Expand Up @@ -235,6 +237,7 @@ select:hover {
textarea {
border-radius: var(--border-radius);
border: .5px solid var(--color-main-border);
max-width: 100%;
}

input[type="text"]:focus,
Expand Down Expand Up @@ -279,7 +282,7 @@ html[data-theme="dark"] ::-webkit-scrollbar-track {
background-color: var(--color-main-background);
border-radius: var(--border-radius-large);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-height: calc(100dvh - 40px);
max-height: calc(100dvh - 50px);
overflow: hidden;
}

Expand Down Expand Up @@ -385,7 +388,7 @@ label {
}

.loader {
border: 16px solid #f3f3f3;
border: 16px solid var(--color-loader);
border-radius: 50%;
border-top: 16px solid var(--color-nextcloud-blue);
width: 120px;
Expand Down Expand Up @@ -418,6 +421,7 @@ label {
font-size: 36px; /* Adjust font size */
cursor: pointer; /* Change cursor to pointer */
outline: none;
z-index: 9999; /* Ensures the icon is on top of every layer */
}

/* Icon styling: default state */
Expand Down Expand Up @@ -449,7 +453,6 @@ label {
position: relative; /* Ensures stacking order */
filter: grayscale(0%); /* Restore full color */
opacity: 1; /* Fully visible on hover */
z-index: 1; /* Ensures the icon is on top of the shadow */
}

/* Inner glow when hovered */
Expand All @@ -461,4 +464,10 @@ label {
/* Remove hover effects when not hovering */
#theme-toggle:not(:hover) #theme-icon {
opacity: 0.6; /* Slightly transparent */
}
}

@media only screen and (max-width: 800px) {
.container {
margin: 50px auto 0px auto;
}
}
18 changes: 9 additions & 9 deletions php/public/toggle-dark-mode.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Function to toggle theme
function toggleTheme() {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = (currentTheme === 'dark') ? 'light' : 'dark';
const newTheme = (currentTheme === 'dark') ? '' : 'dark'; // Toggle between no theme and dark theme
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);

Expand All @@ -13,14 +13,14 @@ function toggleTheme() {
// Function to apply saved theme from localStorage
function applySavedTheme() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.documentElement.setAttribute('data-theme', savedTheme);

// Ensure the icon is set correctly based on the saved theme
const themeIcon = document.getElementById('theme-icon');
themeIcon.textContent = savedTheme === 'dark' ? '☀️' : '🌙';
if (savedTheme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
document.getElementById('theme-icon').textContent = '☀️'; // Sun icon for dark mode
} else {
document.documentElement.removeAttribute('data-theme'); // Default to light theme (no data-theme)
document.getElementById('theme-icon').textContent = '🌙'; // Moon icon for light mode
}
}

// Apply theme when the page loads
document.addEventListener('DOMContentLoaded', applySavedTheme);
// Immediately apply the saved theme
applySavedTheme();
5 changes: 1 addition & 4 deletions php/templates/containers.twig
Original file line number Diff line number Diff line change
Expand Up @@ -683,7 +683,4 @@

</main>
</div>
<div id="overlay">
<div class="loader"></div>
</div>
{% endblock %}
{% endblock %}
11 changes: 8 additions & 3 deletions php/templates/layout.twig
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,18 @@
<link rel="stylesheet" href="/style.css?v3" media="all" />
<link rel="icon" href="/img/favicon.png">
<script type="text/javascript" src="forms.js"></script>
<script type="text/javascript" src="toggle-dark-mode.js"></script>
</head>

<body>
<div class="wrapper">
{% block body %}{% endblock %}
</div>
<button id="theme-toggle" onclick="toggleTheme()"><span id="theme-icon"/></button>
<script type="text/javascript" src="toggle-dark-mode.js"></script>
<div id="overlay">
<div class="loader"></div>
</div>
<button id="theme-toggle" onclick="toggleTheme()">
<span id="theme-icon">🌙</span>
</button>
</body>
</html>
</html>
5 changes: 1 addition & 4 deletions php/templates/login.twig
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,4 @@
{% endif %}
</div>
<script type="text/javascript" src="before-unload.js"></script>
<div id="overlay">
<div class="loader"></div>
</div>
{% endblock %}
{% endblock %}

0 comments on commit 327c91d

Please sign in to comment.