Add dark theme (#730)

This commit is contained in:
Zebreus 2024-03-04 23:30:47 +01:00 committed by GitHub
parent 744ec58e08
commit ff62e2b296
Failed to generate hash of commit

View file

@ -1,14 +1,372 @@
:root {
--text-color: #333;
--background-color: #fff;
--terminal-background: #333;
--terminal-color: #fff;
--result-item-show-more-background: #fff;
--result-item-show-more-color: #666;
--search-sidebar-container-border-color: #ccc;
--search-sidebar-link-color: var(--text-color);
--search-sidebar-hovered-link-background: #eee;
--search-sidebar-selected-link-background: #0081c2;
--search-sidebar-selected-link-color: #fff;
/* Divider between search results */
--search-result-divider-line-color: #ccc;
/* Gets overwritten by bootstrap; has no effect */
--search-result-title-color: #08c;
/* Text color for the details in a search result (like name, version, outputs...) */
--search-result-short-details-color: #666;
/* When search results are expanded, they show tabbed help for installing the result. This is the border color for that tabbed thing.
It is only half of the border, the other half is styled by bootstrap. */
--search-result-expanded-tab-border: #ccc;
/* Color of the animation above the `Loading` text that is shown when searching */
--loader-color: #000;
/* Background color of the experimental badge next to the flakes search */
--info-label-background: #007dbb;
/* Text color for links. Probably overwritten by bootstrap */
--link-color: #007dbb;
/* Background color for the small badges with number in the sidebar */
--badge-background: #757575;
}
/* ------------------------------------------------------------------------- */
/* -- Darkmode specific styles --------------------------------------------- */
/* ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
// Define darkmode colors
:root {
--text-color: #ffffff;
--text-color-light: rgba(255, 255, 255, 0.5);
--text-color-warning: #f8e45c;
--background-color: #242424;
--hover-background: #ffffff13;
--button-background: #393939;
--button-hover-background: #454545;
--button-active-background: #656565;
--button-active-hover-background: #707070;
--terminal-background: #353535;
--terminal-color: var(--text-color);
--line-color: #ffffff26; // Color for separating lines
--dark-blue: #5277C3; // Blue background
--light-blue: #7EBAE4; // Blue text
--result-item-show-more-background: var(--background-color);
--result-item-show-more-color: var(--text-color);
--search-sidebar-container-border-color: var(--line-color);
--search-sidebar-link-color: var(--text-color);
--search-sidebar-hovered-link-background: var(--hover-background);
--search-sidebar-selected-link-background: var(--dark-blue); // #0081c2;
--search-sidebar-selected-link-color: var(--text-color);
/* Divider between search results */
--search-result-divider-line-color: var(--line-color);
/* Gets overwritten by bootstrap; has no effect */
--search-result-title-color: var(--text-color); // #08c;
/* Text color for the details in a search result (like name, version, outputs...) */
--search-result-short-details-color: var(--text-color-light); // #666;
/* When search results are expanded, they show tabbed help for installing the result. This is the border color for that tabbed thing.
It is only half of the border, the other half is styled by bootstrap. */
--search-result-expanded-tab-border: var(--line-color);
/* Color of the animation above the `Loading` text that is shown when searching */
--loader-color: var(--text-color);
/* Background color of the experimental badge next to the flakes search */
--info-label-background: var(--dark-blue); // #007dbb;
/* Text color for links. Probably overwritten by bootstrap */
--link-color: var(--light-blue); // #007dbb;
/* Background color for the small badges with number in the sidebar */
--badge-background: var(--button-active-hover-background);
--color-hover-tab: var(--hover-background);
--color-active-tab: #393939;
--color-active-hover-tab: #404040;
/* Headerbar background color */
--headerbar-background-color: var(--background-color);
// --headerbar-background-color: #303030;
}
// Override bootstrap styles for some common things.
code {
background-color: var(--terminal-background);
color: var(--terminal-color);
border: none;
padding: 4px;
}
pre {
color: var(--text-color);
}
* {
transition: background 0.2s;
}
@mixin outline-visible() {
border-radius: 4px !important;
outline-color: var(--light-blue) !important;
outline-style: solid !important;
outline-width: 2px !important;
outline-offset: -2px !important;
}
*:focus {
outline-width: 0 !important;
}
*:focus-visible {
@include outline-visible;
}
a:focus-visible {
outline-offset: 0 !important;
}
.label-warning {
background: transparent;
color: var(--text-color-warning);
text-shadow: none;
}
button.btn.btn {
margin: 0;
border-left: none;
border-right: none;
background: var(--button-background);
box-shadow: none;
text-shadow: none;
border-bottom: none;
color: var(--text-color);
transition: background 0.2s;
font-weight: bold;
&.active {
background: var(--button-active-background);
&:hover {
background: var(--button-active-hover-background);
}
}
&:hover {
background: var(--button-hover-background)
}
&:disabled {
background: var(--button-background);
color: var(--text-color-light);
}
}
// Override bootstrap colors for the sort dropdown
.search-results {
.dropdown {
&.open {
background: var(--button-background);
}
button.btn:hover {
background: var(--hover-background);
}
.caret {
border-top-color: var(--text-color) !important;
}
background: var(--background-color);
transition: background 0.2s;
border-radius: 4px;
button.btn {
&:focus:not(:focus-visible) {
outline: none !important;
}
border-radius: 4px;
background: inherit;
color: var(--text-color);
border: none;
text-shadow: none;
box-shadow: none;
transition: background 0.2s;
}
}
ul.dropdown-menu {
background: var(--button-background);
padding: 0;
margin-top: 4px;
li {
border-radius: 4px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
margin: 4px;
a {
color: var(--text-color);
background: inherit;
transition: background 0.2s;
}
a::before {
content: none !important;
}
overflow: hidden;
}
.header,
.divider {
display: none;
}
li:hover {
a {
background: var(--hover-background);
}
}
li.selected {
background: var(--button-active-background);
}
}
}
// Override bootstrap styles for the search box
.search-input {
>div:first-child:first-child:first-child {
display: flex;
gap: 2rem;
div {
flex-grow: 1;
}
input {
background: var(--button-background);
box-shadow: none;
border: 1px solid transparent;
color: var(--text-color);
&::placeholder {
font-weight: bold;
opacity: 1;
color: var(--text-color-light);
}
}
}
.btn-group {
border: none;
border-radius: 4px;
background: inherit;
button+button {
border-left: 1px solid var(--line-color);
}
}
}
// Override bootstrap styles for the header bar
// Very navbar to boost specificity
.navbar.navbar.navbar.navbar.navbar.navbar {
&>.navbar-inner {
.brand img {
filter: brightness(0) invert(1);
}
background: var(--headerbar-background-color);
border-bottom: none;
li>a {
color: var(--text-color);
background: var(--headerbar-background-color);
transition: background 0.2s;
text-shadow: none;
box-shadow: none;
border-radius: 4px;
margin: 4px;
padding: 6px 12px;
&:hover,
&:focus,
&:focus-visible,
&:active,
&.active {
color: var(--text-color);
}
&:hover {
background: var(--color-hover-tab);
}
}
li.active>a {
background: var(--color-active-tab);
&:hover {
background: var(--color-active-hover-tab);
}
}
}
}
// Style the tabs in expanded package search results
.nav-tabs {
border-bottom: 1px solid var(--line-color);
border-radius: 4px;
li {
background: transparent !important;
border-color: none !important;
&:hover,
&:focus {
background: transparent !important;
border-color: none !important;
}
a {
// border: none;
background: transparent;
color: var(--text-color);
}
a:hover,
a:focus {
border-color: transparent;
background: transparent !important;
color: var(--text-color) !important;
}
&.active {
a,
a:hover,
a:focus {
border: 1px solid var(--line-color);
border-bottom-color: transparent;
background: var(--background-color) !important;
color: var(--text-color);
}
}
}
}
}
/* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */
/* -- Utils ---------------------------------------------------------------- */ /* -- Utils ---------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */
@mixin terminal() { @mixin terminal() {
background: #333; background: var(--terminal-background);
color: #fff; color: var(--terminal-color);
margin: 0; margin: 0;
} }
@mixin search-result-item() { @mixin search-result-item() {
.result-item-show-more-wrapper { .result-item-show-more-wrapper {
text-align: center; text-align: center;
@ -21,8 +379,8 @@
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
line-height: 1.5em; line-height: 1.5em;
color: #666; color: var(--result-item-show-more-color);
background: #FFF; background: var(--result-item-show-more-background);
padding: 0 1em; padding: 0 1em;
position: relative; position: relative;
top: 0.75em; top: 0.75em;
@ -48,6 +406,8 @@
/* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */
body { body {
background: var(--background-color);
color: var(--text-color);
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
overflow-y: auto; overflow-y: auto;
@ -208,7 +568,7 @@ header .navbar.navbar-static-top {
& > li { & > li {
margin-bottom: 1em; margin-bottom: 1em;
border: 1px solid #ccc; border: 1px solid var(--search-sidebar-container-border-color);
padding: 1em; padding: 1em;
border-radius: 4px; border-radius: 4px;
@ -228,14 +588,14 @@ header .navbar.navbar-static-top {
& > a { & > a {
display: grid; display: grid;
grid-template-columns: auto max-content; grid-template-columns: auto max-content;
color: #333; color: var(--search-sidebar-link-color);
padding: 0.5em 0.5em 0.5em 1em; padding: 0.5em 0.5em 0.5em 1em;
text-decoration: none; text-decoration: none;
border-radius: 4px;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background: #eee; background: var(--search-sidebar-hovered-link-background);
border-radius: 4px;
} }
& > span:first-child { & > span:first-child {
@ -247,9 +607,8 @@ header .navbar.navbar-static-top {
} }
&.selected { &.selected {
background: #0081c2; background: var(--search-sidebar-selected-link-background);
color: #FFF; color: var(--search-sidebar-selected-link-color);
border-radius: 4px;
position: relative; position: relative;
& > span:last-child { & > span:last-child {
display: none; display: none;
@ -339,7 +698,7 @@ header .navbar.navbar-static-top {
// Result item // Result item
& > li { & > li {
border-bottom: 1px solid #ccc; border-bottom: 1px solid var(--search-result-divider-line-color);
padding-bottom: 2em; padding-bottom: 2em;
margin-bottom: 2em; margin-bottom: 2em;
@ -352,11 +711,14 @@ header .navbar.navbar-static-top {
background: inherit; background: inherit;
border: 0; border: 0;
padding: 0; padding: 0;
color: #08c; color: var(--search-result-title-color) !important;
font-size: 1.5em; font-size: 1.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
text-align: left; text-align: left;
display: block; display: block;
a {
color: inherit !important;
}
} }
&.package { &.package {
@ -371,7 +733,7 @@ header .navbar.navbar-static-top {
// short details of a pacakge // short details of a pacakge
& > :nth-child(3) { & > :nth-child(3) {
color: #666; color: var(--search-result-short-details-color);
list-style: none; list-style: none;
text-align: left; text-align: left;
margin: 0; margin: 0;
@ -414,8 +776,9 @@ header .navbar.navbar-static-top {
div.tab-content { div.tab-content {
padding: 1em; padding: 1em;
border: 1px solid #ddd; border: 1px solid var(--search-result-expanded-tab-border);
border-top: 0; border-top: 0;
border-radius: 4px 0 4px 4px;
} }
pre { pre {
@ -424,9 +787,9 @@ header .navbar.navbar-static-top {
} }
// programs // // programs
& > :nth-child(3) { // & > :nth-child(3) {
} // }
// maintainers and platforms // maintainers and platforms
& > :nth-child(4) { & > :nth-child(4) {
@ -461,6 +824,7 @@ header .navbar.navbar-static-top {
& > div:nth-child(2n) { & > div:nth-child(2n) {
pre { pre {
background: transparent; background: transparent;
color: var(--text-color);
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
@ -469,8 +833,7 @@ header .navbar.navbar-static-top {
} }
pre code { pre code {
background: #333; @include terminal;
color: #fff;
padding: 0.5em padding: 0.5em
} }
} }
@ -513,7 +876,7 @@ header .navbar.navbar-static-top {
height: 4em; height: 4em;
} }
.loader { .loader {
color: #000000; color: var(--loader-color);
text-indent: -9999em; text-indent: -9999em;
margin: 88px auto; margin: 88px auto;
position: relative; position: relative;
@ -555,11 +918,11 @@ header .navbar.navbar-static-top {
/* -- Accessibility overrides ---------------------------------------------- */ /* -- Accessibility overrides ---------------------------------------------- */
/* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- */
.label-info { .label-info {
background: #007dbb; background: var(--info-label-background);
} }
a { a {
color: #007dbb; color: var(--link-color);
} }
.pager { .pager {
@ -572,5 +935,5 @@ a {
} }
.badge { .badge {
background-color: #757575 background-color: var(--badge-background)
} }