Skip to content

Commit

Permalink
Add dark mode theme
Browse files Browse the repository at this point in the history 
#199
  • Loading branch information
@Regenhardt
Regenhardt committed Jan 4, 2025
1 parent 08e7af9 commit 25f64f0
Showing 1 changed file with 185 additions and 92 deletions.
277 changes: 185 additions & 92 deletions src/BaGetter.Web/wwwroot/css/site.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,84 @@
/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
:root {
/* Layout */
--body-bg-color: #fff;
--footer-bg-color: #d3d3d3;
--footer-text-color: rgb(51, 51, 51);
--text-color: #333;
/* Navigation */
--navbar-bg-color: #004880;
--navbar-border-color: #002b4d;
--navbar-text-color: #e3ebf1;
--navbar-active-text-color: #fff;
/* Search */
--search-button-bg-color: #d87e00;
--search-button-border-color: #bf6f00;
--search-button-hover-bg-color: #a56000;
--search-button-hover-border-color: #814b00;
/* Alerts */
--alert-warning-bg-color: #fff4ce;
--alert-warning-border-color: #fff4ce;
--alert-warning-text-color: #000;
/* Tabbed Instructions */
--tabbed-info-bg-color: #eaeaea;
--tabbed-info-active-bg-color: #002440;
--tabbed-info-active-text-color: #fff;
--tabbed-info-inactive-text-color: #000;
--tabbed-info-script-bg-color: #002440;
--tabbed-info-script-text-color: #fff;
--copy-button-bg-color: #d87e00;
--copy-button-border-color: #bf6f00;
--copy-button-hover-bg-color: #a56000;
--copy-button-hover-border-color: #814b00;
/* Package Page */
--link-button-color: #337ab7;
--package-details-tag-bg-color: #eff9ff;
--package-used-by-border-color: #d3d3d3;
--versions-table-bg-color-current: #d9edf7;
--versions-table-bg-color: --body-bg-color;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
:root {
/* Layout */
--body-bg-color: #121212;
--footer-bg-color: #333;
--footer-text-color: #fff;
--text-color: #ccc;
/* Navigation */
--navbar-bg-color: #1a1a1a;
--navbar-border-color: #333;
--navbar-text-color: #bbb;
--navbar-active-text-color: #fff;
/* Search */
--search-button-bg-color: #ff9800;
--search-button-border-color: #e68900;
--search-button-hover-bg-color: #cc7a00;
--search-button-hover-border-color: #b36b00;
/* Alerts */
--alert-warning-bg-color: #333;
--alert-warning-border-color: #333;
--alert-warning-text-color: #fff;
/* Tabbed Instructions */
--tabbed-info-bg-color: #444;
--tabbed-info-active-bg-color: #1a1a1a;
--tabbed-info-active-text-color: #fff;
--tabbed-info-inactive-text-color: #999;
--tabbed-info-script-bg-color: #1a1a1a;
--tabbed-info-script-text-color: #fff;
--copy-button-bg-color: #ff9800;
--copy-button-border-color: #e68900;
--copy-button-hover-bg-color: #cc7a00;
--copy-button-hover-border-color: #b36b00;
/* Package Page */
--link-button-color: #337ab7;
--package-details-tag-bg-color: #444;
--package-used-by-border-color: #555;
--versions-table-bg-color-current: #333;
--versions-table-bg-color: --body-bg-color;
}
}


/* Layout
-------------------------------------------------- */
Expand All @@ -16,6 +95,8 @@ body {
font-size: 16px;
display: flex;
flex-direction: column;
background-color: var(--body-bg-color);
color: var(--text-color);
}

main {
Expand All @@ -24,7 +105,8 @@ main {

.footer {
flex-shrink: 0;
background-color: #d3d3d3;
background-color: var(--footer-bg-color);
color: var(--footer-text-color)
}

.footer p {
Expand Down Expand Up @@ -92,9 +174,9 @@ h4 {
}

.alert-warning {
color: #000;
background-color: #fff4ce;
border-color: #fff4ce;
color: var(--alert-warning-text-color);
background-color: var(--alert-warning-bg-color);
border-color: var(--alert-warning-border-color);
}

/* Navigation
Expand All @@ -104,8 +186,8 @@ h4 {
}

.navbar-inverse {
background-color: #004880;
border-color: #002b4d;
background-color: var(--navbar-bg-color);
border-color: var(--navbar-border-color);
}

.navbar {
Expand All @@ -114,15 +196,15 @@ h4 {

.navbar-inverse .navbar-nav > li > a {
font-weight: 100;
color: #e3ebf1;
color: var(--navbar-text-color);
}

.navbar-nav > li > a {
line-height: 22px;
}

.navbar-inverse .navbar-nav a.active {
color: #e3ebf1;
color: var(--navbar-active-text-color);
}

.navbar-inverse .navbar-nav a.active,
Expand Down Expand Up @@ -160,42 +242,24 @@ h4 {
border-radius: 0;
}

.search-container button {
height: 34px;
color: #fff;
background-color: #d87e00;
border-color: #bf6f00;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.search-container button:active,
.search-container button:active:focus,
.search-container button:active:hover,
.search-container button:focus,
.search-container button:hover {
background-color: #a56000;
border-color: #814b00;
color: #fff;
}

.link-button {
background-color: transparent;
border: none;
cursor: pointer;
text-decoration: none;
display: inline;
margin: 0;
padding: 0;
color: #337ab7;
}
.search-container button {
height: 34px;
color: #fff;
background-color: var(--search-button-bg-color);
border-color: var(--search-button-border-color);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.link-button:hover,
.link-button:focus {
outline: none;
text-decoration: underline;
color: #23527c;
}
.search-container button:active,
.search-container button:active:focus,
.search-container button:active:hover,
.search-container button:focus,
.search-container button:hover {
background-color: var(--search-button-hover-bg-color);
border-color: var(--search-button-hover-border-color);
color: #fff;
}

/* Index page
-------------------------------------------------- */
Expand Down Expand Up @@ -301,42 +365,43 @@ h4 {
display: block;
}

.tabbed-info li a {
padding: 5px 10px;
margin: 0;
color: #000;
background-color: #eaeaea;
border: 0;
position: relative;
display: block;
text-decoration: none;
}
.tabbed-info li a {
padding: 5px 10px;
margin: 0;
color: #000;
background-color: var(--tabbed-info-bg-color);
color: var(--tabbed-info-inactive);
border: 0;
position: relative;
display: block;
text-decoration: none;
}

.tabbed-info li.active a {
font-weight: 600;
color: #fff;
text-decoration: underline;
background-color: #002440;
}
.tabbed-info li.active a {
font-weight: 600;
color: var(--tabbed-info-active-text-color);
text-decoration: underline;
background-color: var(--tabbed-info-active-bg-color);
}

.tabbed-info .content {
display: table;
height: 1px;
}

.tabbed-info .content .script {
display: table-cell;
width: 100%;
max-width: 1px;
padding: 0 10px 8px 10px;
font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
line-height: 1.5;
color: #fff;
background-color: #002440;
border-color: #002440;
border-style: solid;
border-width: 1px 0 1px 1px;
}
.tabbed-info .content .script {
display: table-cell;
width: 100%;
max-width: 1px;
padding: 0 10px 8px 10px;
font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
line-height: 1.5;
color: var(--tabbed-info-script-text-color);
background-color: var(--tabbed-info-script-bg-color);
border-color: #002440;
border-style: solid;
border-width: 1px 0 1px 1px;
}

.tabbed-info .content .script .script-line:before {
content: "> ";
Expand All @@ -355,21 +420,21 @@ h4 {

.copy-button button {
color: #fff;
background-color: #d87e00;
border-color: #bf6f00;
background-color: var(--copy-button-bg-color);
border-color: var(--copy-button-border-color);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.copy-button button:active,
.copy-button button:active:focus,
.copy-button button:active:hover,
.copy-button button:focus,
.copy-button button:hover {
background-color: #a56000;
border-color: #814b00;
color: #fff;
}
.copy-button button:active,
.copy-button button:active:focus,
.copy-button button:active:hover,
.copy-button button:focus,
.copy-button button:hover {
background-color: var(--copy-button-hover-bg-color);
border-color: var(--copy-button-hover-border-color);
color: #fff;
}

/* Package page
-------------------------------------------------- */
Expand Down Expand Up @@ -428,15 +493,15 @@ h4 {
margin-top: 3px;
}

.package-details-info .tag {
background-color: #eff9ff;
padding: 2px 10px;
line-height: 2em;
margin: 0 2px;
}
.package-details-info .tag {
background-color: var(--package-details-tag-bg-color);
padding: 2px 10px;
line-height: 2em;
margin: 0 2px;
}

.display-package .expandable-section h2 button {
color: #000;
color: var(--text-color);
text-decoration: none;
}

Expand All @@ -454,10 +519,12 @@ h4 {

.display-package .package-used-by thead tr {
border-bottom: 2px solid #d3d3d3;
border-color: var(--package-used-by-border-color);
}

.display-package .package-used-by tbody tr {
border-bottom: 1px solid #d3d3d3;
border-color: var(--package-used-by-border-color);
}

.display-package .package-used-by td div {
Expand Down Expand Up @@ -486,3 +553,29 @@ h4 {
top: 2px;
margin-right: 5px;
}

.display-package .version-list tbody {
background-color: var(--versions-table-bg-color);
}

.display-package .version-list tbody .bg-info {
background-color: var(--versions-table-bg-color-current);
}

.link-button {
background-color: transparent;
border: none;
cursor: pointer;
text-decoration: none;
display: inline;
margin: 0;
padding: 0;
color: var(--link-button-color);
}

.link-button:hover,
.link-button:focus {
outline: none;
text-decoration: underline;
color: #23527c;
}

0 comments on commit 25f64f0

Please sign in to comment.