Skip to content
GitLab
Commit af636ff3 authored by hlavsa's avatar hlavsa
Browse files

js for dark theme

parent b5bef296
Pipeline #4 failed with stage
Hide whitespace changes
Inline Side-by-side
_includes/footer.html
View file @ af636ff3
<footer class="footer" role="contentinfo">
<a href="https://code.gov.cz/">Domů na code.gov.cz</a>
<div class="theme-switcher">
<label class="theme-switcher__button">
<input type="checkbox" id="themer">
Tmavý režim<span aria-hidden="true"></span>
</label>
</div>
</footer>
\ No newline at end of file
_includes/head.html
View file @ af636ff3
......@@ -15,6 +15,8 @@
<link rel="stylesheet" href="{{ "/css/main.css" | relative_url }}">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | relative_url }}">
<script src="{{ "/javascripts/themeSwitcher.js" | relative_url }}" type="text/javascript" charset="utf-8"></script>
{% if site.prevent_indexing %}
<meta name="robots" content="noindex">
{% endif %}
......
_layouts/default.html
View file @ af636ff3
......@@ -4,6 +4,17 @@
{% include head.html %}
<body>
<style id="inverter" media="none">
html {
background-color: #2a2a2a; filter: invert(100%);
}
* {
background-color: inherit;
}
img:not([src*=".png"]), [style*="url("] {
filter: invert(100%);
}
</style>
<div class="body-wrapper">
<div class="body-wrapper__header">
......@@ -37,7 +48,5 @@
</div>
</div>
</div>
</body>
</html>
</html>
\ No newline at end of file
_sass/_base.scss
View file @ af636ff3
......@@ -138,7 +138,7 @@ a {
}
&:visited:hover {
color: $text-color;
color: $link-color;
}
&:visited:focus {
......
_sass/_layout.scss
View file @ af636ff3
......@@ -538,4 +538,29 @@
.footer a:hover,
.footer a:active {
color: #171819;
}
/**
* Theme switcher
*/
.theme-switcher {
display: block;
padding-top: 30px;
}
@media (min-width: 768px) {
.theme-switcher {
padding-top: 20px;
}
}
.theme-switcher__button {
padding: 0.5rem 1.5rem;
color: #fff;
border-radius: 10px;
border: 3px solid white;
}
.theme-switcher__button:hover {
cursor: pointer;
}
\ No newline at end of file
javascripts/themeSwitcher.js 0 → 100644
View file @ af636ff3
var checkbox = document.getElementById('themer');
var invertor = document.getElementById('inverter');
checkbox.addEventListener('change', function () {
// Triggers repaint in most browsers:
invertor.setAttribute('media', this.checked ? 'screen' : 'none');
// Forces repaint in Chrome:
invertor.textContent = invertor.textContent.trim();
});
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment