diff options
author | ache <ache@ache.one> | 2023-04-09 06:28:08 +0200 |
---|---|---|
committer | ache <ache@ache.one> | 2023-04-09 06:28:08 +0200 |
commit | 393192c62a7ec950b7b197757a36b970009265b3 (patch) | |
tree | 87e57df485b7c6d4586873c13e95d50a5f8161ae /src | |
parent | Fix code blocks (diff) |
Add dark theme code blocks
Diffstat (limited to 'src')
-rwxr-xr-x | src/css/design.scss | 18 | ||||
-rw-r--r-- | src/js/theme.js | 9 |
2 files changed, 25 insertions, 2 deletions
diff --git a/src/css/design.scss b/src/css/design.scss index a535536..10086ce 100755 --- a/src/css/design.scss +++ b/src/css/design.scss @@ -186,8 +186,22 @@ code { border-radius: 8px; padding: 0 5px; - color: #c22222; - background: #FFF; + @mixin lightMode { + color: #c22222; + background: #FFF; + } + @mixin darkMode { + color: red; + background: black; + } + + @media (prefers-color-scheme: dark) { @include darkMode; } + @media (prefers-color-scheme: light) { @include lightMode; } + + &.light { @include lightMode; } + &.dark { @include darkMode; } + + } table, th, td { padding: 7px 13px; diff --git a/src/js/theme.js b/src/js/theme.js index 4ac40ea..8239c69 100644 --- a/src/js/theme.js +++ b/src/js/theme.js @@ -13,6 +13,7 @@ window.addEventListener('DOMContentLoaded', () => { const links = document.querySelectorAll('a'); const likes = document.querySelectorAll('.likes'); const tables = document.querySelectorAll('table'); + const codes = document.querySelectorAll('p code'); if (storageTheme === 'dark' || storageTheme === 'light') { const theme = storageTheme; @@ -36,6 +37,9 @@ window.addEventListener('DOMContentLoaded', () => { for (let table of tables) { table.classList.add(theme); } + for (let code of codes) { + code.classList.add(theme); + } for (const article of document.querySelectorAll('article')) { article.classList.add(theme); @@ -85,6 +89,11 @@ window.addEventListener('DOMContentLoaded', () => { table.classList.add(theme); } } + for (let code of codes) { + if (!code.classList.replace(...arg)) { + code.classList.add(theme); + } + } for (let like of likes) { if (!like.classList.replace(...arg)) { like.classList.add(theme); |