Skip to content

Commit

Permalink
Merge pull request #1173 from Concordium/feature-DarkMode-WIP
Browse files Browse the repository at this point in the history 
Added dark mode toggle and adapted css, WIP
  • Loading branch information
@dragosgd
dragosgd authored Dec 10, 2024
2 parents e9fed98 + b03c62c commit 2d19f75
Show file tree
Hide file tree
Showing 5 changed files with 126 additions and 40 deletions.
54 changes: 51 additions & 3 deletions source/_static/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,8 @@ html {

/* Tutorial page styling */
.tutorial-section {
background-color: #edf2f7; /* Slightly darker background */
background-color: var(--pst-color-on-background);
border-color: var(--pst-color-border);
padding: 25px 25px 25px 40px !important; /* top right bottom left - more padding on left */
margin: 20px 0;
border-radius: 8px;
Expand Down Expand Up @@ -160,6 +161,28 @@ html {
background-color: #fefce8 !important; /* Light yellow */
border: 1px solid #fef9c3 !important;
}

/* Dark mode variants */
html[data-theme="dark"] .tutorial-section-blue {
background-color: #1e2937 !important; /* Dark blue */
border: 1px solid #2d3748 !important;
}

html[data-theme="dark"] .tutorial-section-green {
background-color: #1a2e1a !important; /* Dark green */
border: 1px solid #2d482d !important;
}

html[data-theme="dark"] .tutorial-section-purple {
background-color: #2d1a2e !important; /* Dark purple */
border: 1px solid #482d48 !important;
}

html[data-theme="dark"] .tutorial-section-yellow {
background-color: #2e2d1a !important; /* Dark yellow */
border: 1px solid #48482d !important;
}

/* Main layout fixes - these were working well */
.bd-container__inner.bd-page-width {
max-width: none;
Expand Down Expand Up @@ -203,16 +226,34 @@ html {
left: 0;
padding-left: 1rem;
z-index: 1; /* Reduced z-index */
background: white;
background: var(--pst-color-on-background);
max-width: 167px; /* Match logo's natural width*/
}

/* Dark mode switching */
html[data-theme="dark"] .light-logo {
display: none;
}

html[data-theme="dark"] .dark-logo {
display: block;
}

/* Menu positioning */
.navbar-header-items:not(.navbar-header-items__start) {
margin-left: 200px;
position: relative;
z-index: 2; /* Higher than logo */
background: white;
background: var(--pst-color-on-background);
}

/* Logo handling for dark/light mode */
.light-logo {
display: block;
}

.dark-logo {
display: none;
}

img.logo {
Expand All @@ -225,10 +266,17 @@ img.logo {
.navbar-header-items__start{
max-width: 120px; /* Smaller width on mobile */
margin-left: 3rem; /* Make space for menu button */
background: var(--pst-color-on-background); /* Single background property */
}

img.logo{
width: 100%;
height: auto;
}
}

/* Dark mode specific adjustments if needed */
html[data-theme="dark"] .navbar-header-items__start,
html[data-theme="dark"] .navbar-header-items:not(.navbar-header-items__start) {
background: var(--pst-color-on-background); /* Ensures correct dark mode background */
}
101 changes: 69 additions & 32 deletions source/_static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,10 @@
--pst-font-family-base: var(--pst-font-family-base-system);
--pst-font-family-heading: var(--pst-font-family-base);
--pst-font-family-monospace: var(--pst-font-family-monospace-system);
}

/* Light theme (default) - keeping previous values*/
html[data-theme="light"] {
/*****************************************************************************
* Colors
**/
Expand All @@ -31,20 +34,21 @@
--heading-color: #333333;
}

html {
--pst-color-primary: #48A2AE;
--pst-color-primary-text: #333333;
--pst-color-secondary: #052535;
--pst-color-link: #48A2AE;
--pst-color-link-hover: #48A2AE;
--pst-color-inline-code: 178, 34, 34;
--pst-color-sidebar-link-hover: #48A2AE;
--pst-color-toc-link-hover: #48A2AE;
--pst-color-toc-link-active: #48A2AE;
--pst-color-headerlink: #48A2AE;
--pst-color-headerlink-hover: #48A2AE;
--bg-color: #ffffff;
--heading-color: #333333;
/* Dark theme */
html[data-theme="dark"] {
--pst-color-primary: #5CBFCC;
--pst-color-primary-text: #ffffff;
--pst-color-secondary: #7FB9C2;
--pst-color-link: #5CBFCC;
--pst-color-link-hover: #7FB9C2;
--pst-color-inline-code: rgb(255, 99, 99);
--pst-color-sidebar-link-hover: #5CBFCC;
--pst-color-toc-link-hover: #5CBFCC;
--pst-color-toc-link-active: #5CBFCC;
--pst-color-headerlink: #5CBFCC;
--pst-color-headerlink-hover: #5CBFCC;
--bg-color: #1a1a1a;
--heading-color: #ffffff;
}

html {
Expand All @@ -56,49 +60,48 @@ html {
body{
font-family: var(--pst-font-family-base-system);
background-color: var(--bg-color);
color: #333333;
;
color: var(--pst-color-primary-text);
}

/* Text styling */
p{
line-height: 1.7em;
font-size: 16px;
color: #333333;
color: var(--pst-color-primary-text);
font-family: var(--pst-font-family-base-system);
}

h1{
font-family: var(--pst-font-family-base-system);
color: #333333;
color: var(--pst-color-on-background);
margin-bottom: 34px;
}

h2{
font-family: var(--pst-font-family-base-system);
color: #333333;
color: var(--pst-color-on-background);
margin-bottom: 28px;
}

h3{
font-family: var(--pst-font-family-base-system);
color: #333333;
color: var(--pst-color-on-background);
margin-bottom: 24px;
}

h4{
font-family: var(--pst-font-family-base-system);
color: #333333;
color: var(--pst-color-on-background);
}

h5{
font-family: var(--pst-font-family-base-system);
color: #333333;
color: var(--pst-color-on-background);
}

h6{
font-family: var(--pst-font-family-base-system);
color: #333333;
color: var(--pst-color-on-background);
}

a{
Expand Down Expand Up @@ -148,6 +151,10 @@ p.prev-next-title:hover{
--pst-color-accent: #48A2AE;
}

html[data-theme="dark"] .bd-search input {
--pst-color-accent: #5CBFCC;
}

.toc-entry a.nav-link.active {
box-shadow: none;
}
Expand All @@ -163,6 +170,20 @@ p.prev-next-title:hover{
padding-right: 0.5em;
}

/* Dark mode styles for code */
html[data-theme="dark"] .highlight .hll {
background-color: #1e3d1e;
}

html[data-theme="dark"] pre {
background-color: var(--pst-color-on-background);
color: var(--pst-color-primary-text);
}

html[data-theme="dark"] .highlight {
background-color: var(--pst-color-on-background);
}

/*Video handling*/

iframe {
Expand All @@ -178,16 +199,26 @@ iframe {
padding: 0;
display: flex;
align-items: center;
background-color: var(--pst-color-on-background);
background: var(--pst-color-background);
}

.nav-item{
--pst-color-link-hover: #48A2AE;
}

html[data-theme="dark"] .nav-item {
--pst-color-link-hover: #5CBFCC;
}

.search-button__button{
--pst-color-link-hover: #48A2AE;
}

html[data-theme="dark"] .search-button__button {
--pst-color-link-hover: #5CBFCC;
}

.navbar-end{
width: 33%;
}
Expand All @@ -206,7 +237,7 @@ iframe {
}

.fa-chevron-down:before {
color: #888888;
color: var(--pst-color-text-muted, #888888); /* Add variable with fallback */
}

.bd-sidebar label {
Expand Down Expand Up @@ -270,7 +301,7 @@ ul.list-caption li.selected > label i:before {

.bd-sidebar .nav li>a {
padding: 4px 0 0 22px;
color: #888888;
color: var(--pst-color-text-muted, #888888); /* Add variable with fallback */
}

.bd-sidebar .nav li.has-children>a {
Expand All @@ -286,7 +317,7 @@ nav.bd-links p.caption {
text-transform: unset;
font-weight: unset;
font-size: 14px;
color: #888888;
color: var(--pst-color-text-muted, #888888); /* Add variable with fallback */
}

nav.bd-links .current>a {
Expand All @@ -300,9 +331,15 @@ nav.bd-links .current>a {

.bd-search input {
border-radius: 16px;
border: 1px solid #e7e7e7;
border: 1px solid var(--pst-color-border, #e7e7e7);
padding: 24px 24px 24px 50px;
font-size: 15px;
background-color: var(--pst-color-background);
color: var(--pst-color-text);
}

html[data-theme="dark"] .bd-search input {
border-color: var(--pst-color-border, #404040);
}

.rst-versions.shift-up {
Expand Down Expand Up @@ -346,7 +383,7 @@ div.admonition {
}

.admonition.warning {
background: #ffffff;
background: var(--pst-color-on-background);
border-color: #F6DB9A;
border: 1px solid;
}
Expand All @@ -356,7 +393,7 @@ div.admonition {
}

.admonition.note {
background: #ffffff;
background: var(--pst-color-on-background);
border-color: #acceed;
border: 1px solid;
}
Expand Down Expand Up @@ -469,7 +506,7 @@ div.admonition {
.row .bd-sidebar .sidebar-start-items {
width: 100vw;
height: 100vh;
background-color: #ededed;
background-color: var(--pst-color-background);
margin-left: -15px;
padding: 0 15px;
}
Expand All @@ -485,11 +522,12 @@ div.admonition {

.bd-search .icon {
left: 22px;
color: var(--pst-color-text-muted);
}

.bd-links {
background-color: #ededed;
padding-left: 15px;
background-color: var(--pst-color-background);
}

.bd-search {
Expand All @@ -506,7 +544,6 @@ div.admonition {
position: absolute;
top: calc(100vh - 65px);
width: 100%;
background-color: #dbdbdb;
}

.bd-toc-item.active {
Expand Down
4 changes: 2 additions & 2 deletions source/_static/css/tippy.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.tippy-box {
background-color: #e5e5e5;
color:var(--pst-font-color);
background-color: var(--pst-color-on-background);
color: var(--pst-color-on-surface);
}
3 changes: 2 additions & 1 deletion source/_templates/navbar-logo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

<div>
<a href="https://developer.concordium.software/">
<img class="logo" src="{{pathto('_static/concordium-logo-dark.svg', 1)}}" />
<img class="logo light-logo" src="{{pathto('_static/concordium-logo-dark.svg', 1)}}" />
<img class="logo dark-logo" src="{{pathto('_static/concordium-logo.svg', 1)}}" />
</a>
</div>
4 changes: 2 additions & 2 deletions source/mainnet/conf.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@
"navigation_depth": 5,
"navbar_start": ["navbar-logo"],
"navbar_center": ["navbar-nav"],
"navbar_end": ["navbar-icon-links"],
"navbar_end": ["navbar-icon-links", "theme-switcher"],
"secondary_sidebar_items": ["page-toc", "edit-this-page"],
"article_footer_items": ["footer-article"],
"show_prev_next": True,
Expand Down Expand Up @@ -256,7 +256,7 @@
"github_version": "main",
"doc_path": "source/mainnet",
"conf_py_path": "/source/",
"default_mode": "light",
"default_mode": "auto",
}

# Add any paths that contain custom static files (such as style sheets) here,
Expand Down

0 comments on commit 2d19f75

Please sign in to comment.