Skip to content

feat: adding dark theme #18

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
joaomoraski wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: adding dark theme #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
182 changes: 167 additions & 15 deletions _static/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,10 @@ legend{border:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]{-webkit-appearance:textfield;appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
Expand All @@ -44,6 +44,49 @@ table{border-collapse:collapse;border-spacing:0}
/* Skyfield custom styles */
/* Colors darkened and lightened with http://gka.github.io/chroma.js/ */

/* CSS Variables for theming */
:root {
/* Light theme colors */
--bg-color: #ffffff;
--text-color: #000000;
--heading-color: #002664;
--link-color: #0000ee;
--link-hover-color: #0000cc;
--code-bg: #FDF6E3;
--code-border: #e3dcca;
--code-hover-border: #827c6b;
--pre-border: #93A1A1;
--table-border: #eee;
--admonition-bg: #eee;
--admonition-warning-bg: #edd;
--admonition-border: white;
--motto-border: black;
--dt-color: #790000;
--viewcode-color: #888;
--copyright-opacity: 0.5;
}

/* Dark theme colors */
.dark-mode {
--bg-color: #1a1a1a;
--text-color: #e0e0e0;
--heading-color: #4a9eff;
--link-color: #66b3ff;
--link-hover-color: #99ccff;
--code-bg: #2d2d2d;
--code-border: #555555;
--code-hover-border: #777777;
--pre-border: #666666;
--table-border: #444444;
--admonition-bg: #2a2a2a;
--admonition-warning-bg: #3d2a2a;
--admonition-border: #1a1a1a;
--motto-border: #e0e0e0;
--dt-color: #ff6b6b;
--viewcode-color: #aaaaaa;
--copyright-opacity: 0.7;
}

@font-face {
font-family: 'Gentium Basic';
font-style: normal;
Expand All @@ -59,6 +102,33 @@ table{border-collapse:collapse;border-spacing:0}
url('gentium-basic-v11-latin-italic.woff') format('woff');
}

/* Theme toggle button */
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
}

#theme-toggle {
background: var(--code-bg);
border: 1px solid var(--code-border);
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: all 0.3s ease;
}

#theme-toggle:hover {
border-color: var(--code-hover-border);
transform: scale(1.1);
}

body, body > img {
display: block;
margin-left: auto;
Expand All @@ -69,12 +139,14 @@ body {
line-height: 1.4em;
font-family: "Gentium Basic", sans-serif, serif;
max-width: 36em;
background-color: var(--bg-color);
color: var(--text-color);
}
img {
max-width: 100%;
}
h1, h2 {
color: #002664;
color: var(--heading-color);
}
#skyfield h1 {
margin-bottom: 0;
Expand All @@ -98,12 +170,12 @@ h1, h2 {
color: #ddd;
}
.admonition {
border: 1em solid white;
border: 1em solid var(--admonition-border);
padding: 0em 2em;
background-color: #eee;
background-color: var(--admonition-bg);
}
.admonition-warning {
background-color: #edd;
background-color: var(--admonition-warning-bg);
}
.admonition-title {
text-align: center;
Expand All @@ -115,17 +187,17 @@ h1, h2 {
}
.motto em {
padding-bottom: 0.75em;
border-bottom: 1px solid black;
border-bottom: 1px solid var(--motto-border);
}
code, pre, tt, dt {
font-family: "Ubuntu Mono Custom", monospace, serif;
}
code, pre, tt {
background-color: #FDF6E3;
background-color: var(--code-bg);
}
code, tt {
border-radius: 3px;
border: 1px solid #e3dcca;
border: 1px solid var(--code-border);
padding: 1px 2px 2px;
font-size: 0.8em;
}
Expand All @@ -135,7 +207,7 @@ code {
line-height: 0px;
}
a code:hover, a tt:hover {
border-color: #827c6b;
border-color: var(--code-hover-border);
}
code.py-obj {
border: none;
Expand All @@ -147,7 +219,7 @@ dt {
display: inline-block;
padding-left: 4em;
text-indent: -4em;
color: #790000
color: var(--dt-color);
}
dt em {
font-style: normal;
Expand All @@ -162,7 +234,7 @@ li {
margin-bottom: 0.3em;
}
pre {
border: 1px dashed #93A1A1;
border: 1px dashed var(--pre-border);
padding: 0.5em 0.8em;
line-height: 1.25;
font-size: 0.8em;
Expand All @@ -180,7 +252,7 @@ table[border="1"] {
}
td {
border: none;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--table-border);
padding: 0.2em 0.5em 0.2em 0;
}
tr:last-child td {
Expand All @@ -189,11 +261,11 @@ tr:last-child td {
.viewcode-link {
float: right;
margin-left: 1em;
color: #888;
color: var(--viewcode-color);
}
.copyright {
text-align: center;
opacity: 0.5;
opacity: var(--copyright-opacity);
}
@media screen and (min-width: 480px) {body {font-size: 1.125em;}}
@media screen and (min-width: 640px) {body {max-width: 42em;}}
Expand Down Expand Up @@ -271,3 +343,83 @@ tr:last-child td {
.vg { color: #268bd2 } /* Name.Variable.Global */
.vi { color: #268bd2 } /* Name.Variable.Instance */
.il { color: #2aa198 } /* Literal.Number.Integer.Long */

/* Dark mode syntax highlighting */
.dark-mode .hll { background-color: #333333 }
.dark-mode .c { color: #6c757d; font-style: italic } /* Comment */
.dark-mode .err { color: #ff6b6b } /* Error */
.dark-mode .g { color: #adb5bd } /* Generic */
.dark-mode .k { color: #20c997 } /* Keyword */
.dark-mode .l { color: #adb5bd } /* Literal */
.dark-mode .n { color: #e9ecef } /* Name */
.dark-mode .o { color: #adb5bd } /* Operator */
.dark-mode .x { color: #adb5bd } /* Other */
.dark-mode .p { color: #adb5bd } /* Punctuation */
.dark-mode .cm { color: #6c757d; font-style: italic } /* Comment.Multiline */
.dark-mode .cp { color: #6c757d; font-style: italic } /* Comment.Preproc */
.dark-mode .c1 { color: #6c757d; font-style: italic } /* Comment.Single */
.dark-mode .cs { color: #6c757d; font-style: italic } /* Comment.Special */
.dark-mode .gd { color: #adb5bd } /* Generic.Deleted */
.dark-mode .ge { color: #adb5bd } /* Generic.Emph */
.dark-mode .gr { color: #adb5bd } /* Generic.Error */
.dark-mode .gh { color: #adb5bd } /* Generic.Heading */
.dark-mode .gi { color: #adb5bd } /* Generic.Inserted */
.dark-mode .go { color: #ffffff } /* Generic.Output */
.dark-mode .gp { color: #fd7e14 } /* Generic.Prompt */
.dark-mode .gs { color: #adb5bd } /* Generic.Strong */
.dark-mode .gu { color: #adb5bd } /* Generic.Subheading */
.dark-mode .gt { color: #adb5bd } /* Generic.Traceback */
.dark-mode .kc { color: #20c997 } /* Keyword.Constant */
.dark-mode .kd { color: #20c997 } /* Keyword.Declaration */
.dark-mode .kn { color: #fd7e14 } /* Keyword.Namespace */
.dark-mode .kp { color: #fd7e14 } /* Keyword.Pseudo */
.dark-mode .kr { color: #20c997 } /* Keyword.Reserved */
.dark-mode .kt { color: #20c997 } /* Keyword.Type */
.dark-mode .ld { color: #adb5bd } /* Literal.Date */
.dark-mode .m { color: #20c997 } /* Literal.Number */
.dark-mode .s { color: #20c997 } /* Literal.String */
.dark-mode .na { color: #adb5bd } /* Name.Attribute */
.dark-mode .nb { color: #0dcaf0 } /* Name.Builtin */
.dark-mode .nc { color: #0dcaf0 } /* Name.Class */
.dark-mode .no { color: #ffc107 } /* Name.Constant */
.dark-mode .nd { color: #fd7e14 } /* Name.Decorator */
.dark-mode .ni { color: #fd7e14 } /* Name.Entity */
.dark-mode .ne { color: #fd7e14 } /* Name.Exception */
.dark-mode .nf { color: #0dcaf0 } /* Name.Function */
.dark-mode .nl { color: #adb5bd } /* Name.Label */
.dark-mode .nn { color: #ffc107 } /* Name.Namespace */
.dark-mode .nx { color: #adb5bd } /* Name.Other */
.dark-mode .py { color: #0dcaf0 } /* Name.Property */
.dark-mode .nt { color: #20c997 } /* Name.Tag */
.dark-mode .nv { color: #fd7e14 } /* Name.Variable */
.dark-mode .ow { color: #20c997 } /* Operator.Word */
.dark-mode .w { color: #1a1a1a } /* Text.Whitespace */
.dark-mode .mf { color: #20c997 } /* Literal.Number.Float */
.dark-mode .mh { color: #20c997 } /* Literal.Number.Hex */
.dark-mode .mi { color: #20c997 } /* Literal.Number.Integer */
.dark-mode .mo { color: #20c997 } /* Literal.Number.Oct */
.dark-mode .sb { color: #20c997 } /* Literal.String.Backtick */
.dark-mode .sc { color: #20c997 } /* Literal.String.Char */
.dark-mode .sd { color: #20c997 } /* Literal.String.Doc */
.dark-mode .s2 { color: #20c997 } /* Literal.String.Double */
.dark-mode .se { color: #fd7e14 } /* Literal.String.Escape */
.dark-mode .sh { color: #20c997 } /* Literal.String.Heredoc */
.dark-mode .si { color: #fd7e14 } /* Literal.String.Interpol */
.dark-mode .sx { color: #20c997 } /* Literal.String.Other */
.dark-mode .sr { color: #20c997 } /* Literal.String.Regex */
.dark-mode .s1 { color: #20c997 } /* Literal.String.Single */
.dark-mode .ss { color: #20c997 } /* Literal.String.Symbol */
.dark-mode .bp { color: #0dcaf0; font-weight: bold } /* Name.Builtin.Pseudo */
.dark-mode .vc { color: #0dcaf0 } /* Name.Variable.Class */
.dark-mode .vg { color: #0dcaf0 } /* Name.Variable.Global */
.dark-mode .vi { color: #0dcaf0 } /* Name.Variable.Instance */
.dark-mode .il { color: #20c997 } /* Literal.Number.Integer.Long */

/* Dark mode link colors */
.dark-mode a {
color: var(--link-color);
}

.dark-mode a:hover {
color: var(--link-hover-color);
}
48 changes: 47 additions & 1 deletion _templates/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,25 @@
<title>{{ title|striptags|e }}</title>
<link rel="stylesheet" type="text/css"
href="{{ pathto('_static/style.css', true) }}">
<script>
// Dark mode initialization
(function() {
const savedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const shouldUseDark = savedTheme === 'dark' || (!savedTheme && prefersDark);

if (shouldUseDark) {
document.documentElement.classList.add('dark-mode');
}
})();
</script>
</head>
<body>
<div class="theme-toggle">
<button id="theme-toggle" aria-label="Toggle dark mode">
<span class="theme-icon">🌙</span>
</button>
</div>
{% if title != 'Python Design Patterns' %}
<p class="motto">
•
Expand All @@ -20,7 +37,36 @@
</article>
<hr>
<p class="copyright">
© 2018–2020 <a href="http://rhodesmill.org/brandon/">Brandon Rhodes</a>
© 2018–2020 <a href="http://rhodesmill.org/brandon/">Brandon Rhodes</a>
</p>
<script>
// Dark mode toggle functionality
(function() {
const themeToggle = document.getElementById('theme-toggle');
const themeIcon = document.querySelector('.theme-icon');

function updateThemeIcon() {
const isDark = document.documentElement.classList.contains('dark-mode');
themeIcon.textContent = isDark ? '☀️' : '🌙';
}

function toggleTheme() {
const isDark = document.documentElement.classList.contains('dark-mode');

if (isDark) {
document.documentElement.classList.remove('dark-mode');
localStorage.setItem('theme', 'light');
} else {
document.documentElement.classList.add('dark-mode');
localStorage.setItem('theme', 'dark');
}

updateThemeIcon();
}

themeToggle.addEventListener('click', toggleTheme);
updateThemeIcon(); // Set initial icon
})();
</script>
</body>
</html>
Empty file removed docs/.nojekyll
View file
Open in desktop
Empty file.
1 change: 0 additions & 1 deletion docs/CNAME
View file
Open in desktop

This file was deleted.

Loading