Implement proper dark mode (#800)

* Implement proper dark mode

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Fix footer color in light mode

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

---------

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
Emruz Hossain 2023-09-30 05:04:48 +06:00 committed by GitHub
parent 6dc9d1d33d
commit 5f0aebcf68
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 1136 additions and 353 deletions

View file

@ -1,30 +0,0 @@
import { enable, disable, auto, setFetchMethod } from 'darkreader'
import * as params from '@params'
const darkreader = params?.darkmode?.darkreader || {}
const defaultColorScheme = darkreader.defaultcolorscheme || 'system'
const theme = {
brightness: 100,
contrast: 100,
sepia: 0,
...(darkreader.theme || {})
}
const fixes = {
invert: ['img[src$=".svg"]'],
...(darkreader.fixes || {})
}
setFetchMethod(window.fetch)
export function setSchemeDark () {
enable(theme, fixes)
}
export function setSchemeLight () {
disable()
}
export function setSchemeSystem () {
auto(theme, fixes)
}
export { defaultColorScheme }

View file

@ -1,14 +1,6 @@
const PERSISTENCE_KEY = 'darkmode:color-scheme'
async function getService () {
if (process.env.FEATURE_DARKMODE_DARKREADER === '1') {
return await import('./darkreader')
}
throw Error(' No service defined for feature darkMode.')
}
window.addEventListener('DOMContentLoaded', async () => {
window.addEventListener('load', async () => {
const menu = document.getElementById('themeMenu')
const $icon = document.getElementById('navbar-theme-icon-svg')
if (menu == null || $icon == null) return
@ -20,32 +12,32 @@ window.addEventListener('DOMContentLoaded', async () => {
return map
}, {})
const {
setSchemeDark,
setSchemeLight,
setSchemeSystem,
defaultColorScheme
} = await getService()
function loadScheme () {
return localStorage.getItem(PERSISTENCE_KEY) || defaultColorScheme
function loadScheme() {
return localStorage.getItem(PERSISTENCE_KEY) || "system"
}
function saveScheme (scheme) {
function saveScheme(scheme) {
localStorage.setItem(PERSISTENCE_KEY, scheme)
}
function setScheme (newScheme) {
function getPreferredColorScheme() {
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
return isDarkMode ? "dark" : "light";
}
function setScheme(newScheme) {
let theme = newScheme
if (newScheme === 'system') {
theme = getPreferredColorScheme()
}
// set data-theme attribute on html tag
document.querySelector("html").dataset.theme = theme;
// update icon
$icon.src = iconMap[newScheme]
if (newScheme === 'dark') {
setSchemeDark()
} else if (newScheme === 'system') {
setSchemeSystem()
} else {
setSchemeLight()
}
// save preference to local storage
saveScheme(newScheme)
}

View file

@ -1,7 +1,6 @@
const updateNavBar = () => {
const topNavbar = document.getElementById('top-navbar')
const navbarToggler = document.getElementById('navbar-toggler')
const themeIcon = document.getElementById('navbar-theme-icon-svg')
if (window.scrollY > 40) {
topNavbar?.classList.remove('transparent-navbar')
@ -10,8 +9,6 @@ const updateNavBar = () => {
navbarToggler?.classList.remove('navbar-dark')
navbarToggler?.classList.add('navbar-light')
// color theme selector a.k.a. dark mode
themeIcon?.classList.remove('navbar-icon-svg-dark')
// get the main logo from hidden img tag
const mainLogo = document.getElementById('main-logo')
@ -26,9 +23,6 @@ const updateNavBar = () => {
navbarToggler?.classList.remove('navbar-light')
navbarToggler?.classList.add('navbar-dark')
// color theme selector a.k.a. dark mode
themeIcon?.classList.add('navbar-icon-svg-dark')
// get the inverted logo from hidden img tag
const invertedLogo = document.getElementById('inverted-logo')
if (invertedLogo) {

View file

@ -1,20 +0,0 @@
/* Note: No need to invert when the screen is small because the navbar is
collapsed to a hamburger menu. */
@media only screen and (min-width: 1200px) {
.dynamic-navbar .navbar-icon-svg-dark {
filter: invert(1);
};
}
@media only screen and (min-width: 1200px) {
.dropdown-menu-icons-only {
width: 25px;
min-width: 3rem;
}
}
.menu-icon-center {
display: block;
margin-left: auto;
margin-right: auto;
}

View file

@ -1,44 +1,44 @@
.btn-dark {
background-color: $text-color !important;
border-color: $text-color !important;
color: $text-over-accent-color !important;
background-color: get-light-color('text-color') !important;
border-color: get-light-color('text-color') !important;
color: get-light-color('text-over-accent-color') !important;
@include transition();
&:hover,
&:focus {
background-color: $accent-color !important;
border-color: $accent-color !important;
background-color: get-light-color('accent-color') !important;
border-color: get-light-color('accent-color') !important;
@include transition();
}
}
.btn-info {
background-color: $accent-color !important;
color: $text-over-accent-color !important;
background-color: get-light-color('accent-color') !important;
color: get-light-color('text-over-accent-color') !important;
&:hover,
&:focus {
background-color: $hover-over-accent-color !important;
background-color: get-light-color('hover-over-accent-color') !important;
}
}
.btn-outline-info {
color: $accent-color !important;
border-color: $accent-color !important;
color: get-light-color('accent-color') !important;
border-color: get-light-color('accent-color') !important;
&:hover,
&:focus {
background-color: $accent-color !important;
color: $text-over-accent-color !important;
background-color: get-light-color('accent-color') !important;
color: get-light-color('text-over-accent-color') !important;
}
}
.btn-link {
color: $accent-color;
color: get-light-color('accent-color');
&:hover,
&:focus {
color: $hover-over-accent-color;
color: get-light-color('hover-over-accent-color');
}
}
@ -46,7 +46,7 @@
background-color: transparent;
border: 1px solid transparent;
border-radius: 0.25rem;
color: $muted-text-color;
color: get-light-color('muted-text-color');
}
.tags {
@ -56,18 +56,19 @@
font-size: 0.5em;
list-style-type: none;
display: inline-block;
background: $accent-color;
background: get-light-color('accent-color');
margin-left: 0.1em;
margin-right: 0.1em;
}
a {
color: $text-over-accent-color;
color: get-light-color('text-over-accent-color');
text-decoration: none !important;
}
}
.icon-button {
background-color: $text-color;
color: $text-over-accent-color !important;
background-color: get-light-color('text-color');
color: get-light-color('text-over-accent-color') !important;
padding: 0.25rem 0.5rem;
line-height: 1.5;
border-radius: 0.2rem;
@ -75,19 +76,99 @@
&:hover,
&:focus {
background-color: $accent-color !important;
background-color: get-light-color('accent-color') !important;
@include transition();
}
}
.filled-button {
background-color: $accent-color !important;
color: $text-over-accent-color !important;
background-color: get-light-color('accent-color') !important;
color: get-light-color('text-over-accent-color') !important;
@include transition();
&:hover,
&:active {
background-color: $hover-over-accent-color !important;
background-color: get-light-color('hover-over-accent-color') !important;
@include transition();
}
}
html[data-theme='dark'] {
.btn-dark {
background-color: get-dark-color('accent-color') !important;
border-color: get-dark-color('accent-color') !important;
color: get-dark-color('text-over-accent-color') !important;
&:hover,
&:focus {
background-color: get-dark-color('hover-over-accent-color') !important;
border-color: get-dark-color('hover-over-accent-color') !important;
}
}
.btn-info {
background-color: get-dark-color('bg-card') !important;
color: get-dark-color('text-color') !important;
border: 1px solid get-dark-color('muted-text-color') !important;
&:hover,
&:focus {
background-color: get-dark-color('hover-over-accent-color') !important;
}
}
.btn-outline-info {
color: get-dark-color('accent-color') !important;
border-color: get-dark-color('accent-color') !important;
&:hover,
&:focus {
background-color: get-dark-color('accent-color') !important;
color: get-dark-color('text-over-accent-color') !important;
}
}
.btn-link {
color: get-dark-color('accent-color');
&:hover,
&:focus {
color: get-dark-color('hover-over-accent-color');
}
}
.nav-button {
color: get-dark-color('muted-text-color');
}
.tags {
li {
background: get-dark-color('accent-color');
a {
background-color: get-dark-color('bg-card');
border: 1px solid get-dark-color('muted-text-color');
color: get-dark-color('text-over-accent-color');
}
}
}
.icon-button {
background-color: get-dark-color('muted-text-color');
color: get-dark-color('text-over-accent-color') !important;
&:hover,
&:focus {
background-color: get-dark-color('accent-color') !important;
}
}
.filled-button {
background-color: get-dark-color('accent-color') !important;
color: get-dark-color('text-over-accent-color') !important;
&:hover,
&:active {
background-color: get-dark-color('hover-over-accent-color') !important;
}
}
}

View file

@ -2,12 +2,12 @@
box-shadow: none;
@include transition();
overflow: hidden;
background: $bg-card;
background: get-light-color('bg-card');
&:hover,
&:focus {
box-shadow: $box-shadow;
border: 1px solid $bg-primary;
border: 1px solid get-light-color('bg-primary');
@include transition();
}
@ -36,7 +36,10 @@
}
.card-footer {
background: $bg-card !important;
background: get-light-color('bg-card') !important;
a.btn {
text-decoration: none !important;
}
}
}
@ -45,7 +48,7 @@
display: inline-flex;
.post-card-link {
text-decoration: none;
text-decoration: none !important;
}
.card {
@ -80,9 +83,33 @@
span {
font-size: 10pt;
color: $muted-text-color !important;
color: get-light-color('muted-text-color') !important;
padding-top: 5px;
}
}
}
}
html[data-theme='dark'] {
.card {
background: get-dark-color('bg-card');
&:hover,
&:focus {
border: 1px solid rgba(get-dark-color('accent-color'), 0.2);
}
.card-footer {
background: get-dark-color('bg-card') !important;
}
}
.post-card {
.card {
.card-footer {
span {
color: get-dark-color('muted-text-color') !important;
}
}
}
}
}

View file

@ -17,7 +17,7 @@ img {
}
figure {
border: 1px solid $border-color;
border: 1px solid rgba(get-light-color('accent-color'), 0.1);
height: -moz-fit-content;
height: fit-content;
width: -moz-fit-content;
@ -30,5 +30,15 @@ caption,
figcaption {
caption-side: bottom;
text-align: center;
color: $muted-text-color;
color: get-light-color('muted-text-color');
}
html[data-theme='dark'] {
figure {
border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
}
caption,
figcaption {
color: get-dark-color('muted-text-color');
}
}

View file

@ -1,38 +1,38 @@
a {
color: $accent-color;
color: get-light-color('accent-color');
@include transition();
&:hover,
&:focus {
text-decoration: $hover-over-accent-color underline;
color: $hover-over-accent-color;
text-decoration: get-light-color('hover-over-accent-color') underline;
color: get-light-color('hover-over-accent-color');
@include transition();
}
}
.list-link {
text-decoration: none;
color: $text-color;
text-decoration: none !important;
color: get-light-color('text-color');
@include transition();
&.active {
display: inline;
color: $accent-color;
color: get-light-color('accent-color');
}
&:hover {
margin-left: 3px;
color: $accent-color;
color: get-light-color('accent-color');
@include transition();
}
}
a.header-anchor {
text-decoration: none;
color: $heading-color;
color: get-light-color('heading-color');
i,
svg {
font-size: 10pt;
color: $text-color;
color: get-light-color('text-color');
display: none;
margin-left: 0.5rem;
}
@ -43,10 +43,37 @@ a.header-anchor {
}
}
code {
color: $inline-code-color;
color: get-light-color('inline-code-color');
}
}
.anchor {
padding-top: 3.5rem;
}
html[data-theme='dark'] {
a {
color: get-dark-color('accent-color');
&:hover,
&:focus {
text-decoration: get-dark-color('hover-over-accent-color') underline;
color: get-dark-color('hover-over-accent-color');
}
}
.list-link {
color: get-dark-color('text-color');
&:hover {
color: get-dark-color('accent-color');
}
}
a.header-anchor {
color: get-dark-color('heading-color');
i,
svg {
color: get-dark-color('text-color');
}
code {
color: get-dark-color('inline-code-color');
}
}
}

View file

@ -6,12 +6,12 @@
.page-item {
& > a {
color: $accent-color;
color: get-light-color('accent-color');
}
&.active,
&:hover > a {
background-color: $accent-color !important;
color: $text-over-accent-color !important;
background-color: get-light-color('accent-color') !important;
color: get-light-color('text-over-accent-color') !important;
}
}
}
@ -31,3 +31,18 @@ pre {
}
}
}
html[data-theme='dark'] {
.paginator {
.page-item {
& > a {
color: get-dark-color('accent-color');
}
&.active,
&:hover > a {
background-color: get-dark-color('accent-color') !important;
color: get-dark-color('text-over-accent-color') !important;
}
}
}
}

View file

@ -1,24 +1,24 @@
table {
border-radius: 0.1rem;
border: 1px solid $border-color;
border: 1px solid rgba(get-light-color('accent-color'), 0.1);
min-width: 10rem;
padding: 0.1rem;
thead {
tr {
background: $accent-color;
color: $text-over-accent-color;
background: get-light-color('accent-color');
color: get-light-color('text-over-accent-color');
}
}
tbody {
tr {
height: 40px !important;
color: $text-color;
color: get-light-color('text-color');
&:nth-child(odd) {
background-color: $bg-primary;
background-color: get-light-color('bg-primary');
}
&:nth-child(even) {
background-color: rgba($accent-color, 0.05);
background-color: rgba(get-light-color('accent-color'), 0.05);
}
}
}
@ -33,10 +33,10 @@ table {
.gist {
table {
border-radius: unset;
background: unset;
border: unset;
padding: unset;
border-radius: unset !important;
background: unset !important;
border: unset !important;
padding: unset !important;
tr {
height: unset !important;
@ -44,31 +44,67 @@ table {
th,
td {
padding: unset;
border-left: unset;
border-bottom: unset;
padding: unset !important;
border-left: unset !important;
border-bottom: unset !important;
}
td,
tc {
border-right: 1px solid $border-color;
border-right: 1px solid rgba(get-light-color('accent-color'), 0.1);
}
thead {
tr {
background: unset;
color: unset;
background: unset !important;
color: unset !important;
}
}
tbody {
tr {
&:nth-child(odd) {
background-color: unset;
background-color: unset !important;
}
&:hover {
background: unset;
background: unset !important;
}
}
}
}
}
html[data-theme='dark'] {
table {
border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
thead {
tr {
background: get-dark-color('accent-color');
color: get-dark-color('text-over-accent-color');
}
}
tbody {
tr {
color: get-dark-color('text-color');
&:nth-child(odd) {
background-color: get-dark-color('bg-primary');
}
&:nth-child(even) {
background-color: rgba(get-dark-color('accent-color'), 0.05);
}
}
}
}
.gist {
&::selection{
background: get-dark-color('text-color');
color: get-dark-color('inverse-text-color');
}
table {
td,
tc {
border-right: 1px solid rgba(get-dark-color('accent-color'), 0.1);
}
}
}
}

View file

@ -3,41 +3,41 @@ h2,
h3,
h4,
h5 {
color: $heading-color;
color: get-light-color('heading-color');
}
strong {
color: $heading-color !important;
color: get-light-color('heading-color') !important;
}
p {
color: $text-color;
color: get-light-color('text-color');
}
blockquote {
border-left: 4px solid $accent-color;
background-color: rgba($accent-color, 0.05);
border-left: 4px solid get-light-color('accent-color');
background-color: rgba(get-light-color('accent-color'), 0.05);
padding: 0.3rem;
padding-left: 1rem;
& > p {
color: $text-color;
color: get-light-color('text-color');
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
}
.text-muted {
color: $muted-text-color !important;
color: get-light-color('muted-text-color') !important;
}
.text-heading {
font-weight: bold;
color: $muted-text-color;
color: get-light-color('muted-text-color');
}
.sub-title {
color: $muted-text-color;
color: get-light-color('muted-text-color');
font-size: 10pt;
}
@ -60,3 +60,50 @@ blockquote {
font-size: 1.5rem;
}
}
html[data-theme='dark'] {
h1,
h2,
h3,
h4,
h5 {
color: get-dark-color('heading-color');
}
strong {
color: get-dark-color('heading-color') !important;
}
p {
color: get-dark-color('text-color');
}
blockquote {
border-left: 4px solid get-dark-color('accent-color');
background-color: rgba(get-dark-color('accent-color'), 0.05);
color: get-dark-color('text-color');
}
.text-muted {
color: get-dark-color('muted-text-color') !important;
}
.text-heading {
color: get-dark-color('muted-text-color');
}
.sub-title {
color: get-dark-color('muted-text-color');
}
::-moz-selection {
@include selection-color($theme: 'dark');
}
::selection {
@include selection-color($theme: 'dark');
}
li,
ul {
color: get-dark-color('text-color');
}
}

View file

@ -49,12 +49,12 @@ body.kind-page {
.page-item {
& > a {
color: $accent-color;
color: get-light-color('accent-color');
}
&.active > a {
background-color: $accent-color;
color: $text-over-accent-color;
background-color: get-light-color('accent-color');
color: get-light-color('text-over-accent-color');
}
}
}
@ -172,3 +172,36 @@ body.kind-page {
}
}
}
html[data-theme='dark'] {
body.kind-section,
body.kind-term,
body.kind-page {
.wrapper {
.content-section {
.content {
.paginator {
.page-item {
& > a {
background-color: get-dark-color('bg-card') !important;
color: get-dark-color('text-color') !important;
border: 1px solid get-dark-color('muted-text-color') !important;
text-decoration: none !important;
&:hover {
background-color: get-dark-color('hover-over-accent-color') !important;
color: get-dark-color('text-over-accent-color') !important;
}
}
&.active > a {
background-color: get-dark-color('accent-color') !important;
color: get-dark-color('text-over-accent-color') !important;
}
}
}
}
}
}
}
}

View file

@ -20,16 +20,16 @@ html {
}
body {
background-color: $bg-primary;
background-color: get-light-color('bg-primary');
font-family: 'Mulish';
}
.bg-primary {
background-color: $bg-primary !important;
background-color: get-light-color('bg-primary') !important;
}
.bg-secondary {
background-color: $bg-secondary !important;
background-color: get-light-color('bg-secondary') !important;
}
.flag-icon {
@ -55,12 +55,12 @@ body {
}
kbd {
background-color: $accent-color;
color: $text-over-accent-color;
background-color: get-light-color('accent-color');
color: get-light-color('text-over-accent-color');
}
mark {
background-color: $highlight-color;
background-color: get-light-color('highlight-color');
border-radius: 0.25rem;
}
@ -88,3 +88,24 @@ mark {
padding-right: 0;
}
}
html[data-theme='dark'] {
body {
background-color: get-dark-color('bg-primary');
color: get-dark-color('text-color');
}
.bg-primary {
background-color: get-dark-color('bg-primary') !important;
}
.bg-secondary {
background-color: get-dark-color('bg-secondary') !important;
}
kbd {
background-color: get-dark-color('accent-color');
color: get-dark-color('text-over-accent-color');
}
mark {
background-color: get-dark-color('highlight-color');
}
}

View file

@ -48,7 +48,7 @@ body.type-notes {
.note-title {
padding-left: 1rem;
color: $accent-color;
color: get-light-color('accent-color');
&:before {
content: '';
@ -56,11 +56,11 @@ body.type-notes {
width: 98%;
height: 100%;
margin-bottom: -26px;
border-bottom: 1px solid $accent-color;
border-bottom: 1px solid get-light-color('accent-color');
}
span {
background: $bg-secondary;
background: get-light-color('bg-secondary');
padding-right: 5px;
}
}
@ -173,3 +173,27 @@ body.type-notes {
}
}
}
html[data-theme='dark'] {
body.type-notes {
.wrapper {
.content-section {
.content {
.note-card-holder {
.note-title {
color: get-dark-color('accent-color');
&:before {
border-bottom: 1px solid get-dark-color('accent-color');
}
span {
background: get-dark-color('bg-secondary');
padding-right: 5px;
}
}
}
}
}
}
}
}

View file

@ -1,5 +1,5 @@
body.kind-page {
background-color: $bg-secondary;
background-color: get-light-color('bg-secondary');
position: relative;
.wrapper {
@ -23,7 +23,7 @@ body.kind-page {
padding-top: 1.5rem;
.read-area {
background-color: $bg-primary;
background-color: get-light-color('bg-primary');
.hero-area {
margin-top: 3rem;
@ -54,7 +54,7 @@ body.kind-page {
width: 120px;
-o-object-fit: cover;
object-fit: cover;
background-color: $bg-primary;
background-color: get-light-color('bg-primary');
padding: 5px;
}
}
@ -93,6 +93,9 @@ body.kind-page {
.next-prev-text {
white-space: break-spaces;
}
a {
text-decoration: none !important;
}
}
}
}
@ -111,7 +114,7 @@ body.kind-page {
padding-top: 1rem;
overflow-x: hidden;
overflow-y: auto;
background-color: $bg-primary;
background-color: get-light-color('bg-primary');
margin-right: 0.5rem;
@include transition();
@ -138,16 +141,17 @@ body.kind-page {
.nav-link {
padding: 0;
padding-left: 0.5rem;
text-decoration: none !important;
@include transition();
color: $heading-color;
color: get-light-color('text-color');
&:hover,
&:focus,
&.active {
padding-left: 1rem;
padding-right: 0.5rem;
background-color: $accent-color;
color: $text-over-accent-color;
background-color: get-light-color('accent-color');
color: get-light-color('text-over-accent-color');
@include transition();
}
}
@ -176,13 +180,13 @@ body.kind-page {
position: fixed;
bottom: 0rem;
right: 1rem;
color: $accent-color;
color: get-light-color('accent-color');
font-size: 24pt;
z-index: 900000;
visibility: hidden;
&:hover {
color: $hover-over-accent-color;
color: get-light-color('hover-over-accent-color');
}
&.show {
visibility: visible;
@ -190,7 +194,7 @@ body.kind-page {
i {
box-shadow: $box-shadow;
background-color: $bg-primary;
background-color: get-light-color('bg-primary');
border-radius: 50%;
}
}
@ -318,3 +322,61 @@ body.kind-page {
}
}
}
html[data-theme='dark'] {
body.kind-page {
background-color: get-dark-color('bg-secondary');
.wrapper {
.content-section {
.content {
.read-area {
background-color: get-dark-color('bg-primary');
.page-content {
.author-profile {
img {
background-color: get-dark-color('bg-primary');
}
}
}
}
}
}
.toc-section {
.toc-holder {
background-color: get-dark-color('bg-primary');
hr {
background-color: get-dark-color('muted-text-color');
}
.toc {
nav {
.nav-link {
color: get-dark-color('text-color');
&:hover,
&:focus,
&.active {
background-color: get-dark-color('accent-color');
color: get-dark-color('text-over-accent-color');
}
}
}
}
}
}
#scroll-to-top {
color: get-dark-color('accent-color');
&:hover {
color: get-dark-color('hover-over-accent-color');
}
i {
background-color: get-dark-color('bg-primary');
}
}
}
}
}

View file

@ -1,3 +1,21 @@
@function get-color($mode, $key) {
@if map-has-key($themes, $mode) {
$theme: map-get($themes, $mode);
@if map-has-key($theme, $key) {
@return map-get($theme, $key);
}
}
@return red; // default color for debugging purpose
}
@function get-light-color($key) {
@return get-color('light', $key);
}
@function get-dark-color($key) {
@return get-color('dark', $key);
}
@mixin reset-list {
margin: 0;
padding: 0;
@ -24,7 +42,11 @@
transition: all $transition-type $transition-duration;
}
@mixin selection-color() {
background: $accent-color;
color: $text-over-accent-color;
@mixin selection-color($theme: 'light') {
background: get-light-color('accent-color');
color: get-light-color('text-over-accent-color');
@if $theme == 'dark' {
background: get-dark-color('accent-color');
color: get-dark-color('text-over-accent-color');
}
}

View file

@ -1,8 +1,14 @@
@mixin nav-item-hover-effect() {
color: $accent-color !important;
border-bottom: 2px solid $accent-color !important;
background: rgba($accent-color, 0.1);
@mixin nav-item-hover-effect($theme: 'light') {
color: get-light-color('accent-color') !important;
border-bottom: 2px solid get-light-color('accent-color') !important;
background: rgba(get-light-color('accent-color'), 0.1);
@include transition();
@if $theme == 'dark' {
color: get-dark-color('accent-color') !important;
border-bottom: 2px solid get-dark-color('accent-color') !important;
background: rgba(get-dark-color('accent-color'), 0.1);
}
}
.top-navbar {
@ -14,13 +20,13 @@
z-index: 99999;
margin: 0px;
padding-top: 0.4rem;
color: $heading-color;
color: get-light-color('heading-color');
text-align: center;
background-color: $bg-primary;
background-color: get-light-color('bg-primary');
@include transition();
.navbar-brand {
color: $heading-color;
color: get-light-color('heading-color');
font-weight: 600;
img {
width: 42px;
@ -41,7 +47,8 @@
li {
a {
color: $heading-color;
color: get-light-color('heading-color');
text-decoration: none !important;
font-weight: 500;
@include transition();
border-bottom: 2px solid transparent;
@ -57,14 +64,14 @@
#top-navbar-divider {
margin-top: 10px;
background-color: $muted-text-color;
background-color: get-light-color('muted-text-color');
height: 20px;
width: 2px;
}
.dropdown-menu {
box-shadow: $box-shadow;
border: 1px solid $border-color;
border: 1px solid rgba(get-light-color('accent-color'), 0.1);
max-height: 0vh;
overflow: hidden;
display: block;
@ -77,7 +84,7 @@
@include transition();
a {
color: $heading-color !important;
color: get-light-color('heading-color') !important;
&:hover {
@include nav-item-hover-effect();
@ -90,40 +97,51 @@
margin-top: -5px;
&.show,
&.collapsing {
background-color: $bg-primary;
background-color: get-light-color('bg-primary');
padding-left: 1rem;
li {
a {
color: $heading-color;
color: get-light-color('heading-color');
font-weight: 500;
@include transition();
}
}
.navbar-nav {
.active {
color: $accent-color;
color: get-light-color('accent-color');
}
a:hover {
color: $accent-color;
color: get-light-color('accent-color');
}
}
}
}
&.transparent-navbar {
background-color: transparent;
background-color: transparent !important;
.navbar-brand {
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
font-weight: 600;
}
li {
a {
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
}
}
.feather-menu {
stroke: $inverse-text-color;
stroke: get-light-color('inverse-text-color');
}
}
#themeMenu {
width: 25px;
min-width: 3rem;
img.theme-icon {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
@ -140,7 +158,7 @@
&.transparent-navbar {
.navbar-nav .active,
li a:hover {
color: $accent-color;
color: get-light-color('accent-color');
@include transition();
}
}
@ -163,9 +181,12 @@
right: 0.5rem;
bottom: 1rem;
z-index: 10000000;
background-color: $bg-primary;
background-color: get-light-color('bg-primary');
box-shadow: $box-shadow;
}
#themeMenu{
width: 100%;
}
}
@include media('<=small') {
@ -180,5 +201,85 @@
.feather-menu {
width: 1.5rem;
height: 1.5rem;
stroke: $text-color;
stroke: get-light-color('text-color');
}
html[data-theme='dark'] {
.top-navbar {
color: get-dark-color('heading-color');
background-color: get-dark-color('bg-primary');
.navbar-brand {
color: get-dark-color('heading-color');
}
.sidebar-icon {
filter: invert(0.5);
}
li {
a {
color: get-dark-color('heading-color');
}
}
#top-navbar-divider {
background-color: get-dark-color('muted-text-color');
}
.dropdown-menu {
box-shadow: $box-shadow;
background-color: get-dark-color('bg-card');
border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
&.show {
a {
color: get-dark-color('heading-color') !important;
}
}
}
.navbar-collapse {
&.show,
&.collapsing {
background-color: get-dark-color('bg-primary');
li {
a {
color: get-dark-color('heading-color');
}
}
.navbar-nav {
.active {
color: get-dark-color('accent-color');
}
a:hover {
color: get-dark-color('accent-color');
}
}
}
}
&.transparent-navbar {
.navbar-brand {
color: get-dark-color('text-color');
}
li {
a {
color: get-dark-color('text-color');
}
}
.feather-menu {
stroke: get-dark-color('text-color');
}
}
}
img.theme-icon {
filter: invert(1);
}
.feather-sidebar,
.feather-menu {
stroke: get-dark-color('text-color');
}
}

View file

@ -7,14 +7,14 @@
.sidebar-holder {
top: 2.5rem;
position: sticky;
background-color: $bg-primary;
background-color: get-light-color('bg-primary');
height: 100vh;
overflow: auto;
box-shadow: $box-shadow;
@include transition();
.sidebar {
background: $bg-primary;
background: get-light-color('bg-primary');
height: 100vh;
@include transition();
@ -27,12 +27,12 @@
margin-top: 30px;
margin-bottom: 10px;
border-radius: 5px;
background-color: $bg-secondary;
background-color: get-light-color('bg-secondary');
@include transition();
border: 1px solid $border-color;
border: 1px solid rgba(get-light-color('accent-color'), 0.1);
&:focus {
border: 1pt solid $accent-color;
border: 1pt solid get-light-color('accent-color');
outline: none;
}
}
@ -56,11 +56,11 @@
margin: 0;
padding: 0 1em;
line-height: 2em;
color: $heading-color;
color: get-light-color('heading-color');
position: relative;
i {
color: $heading-color;
color: get-light-color('heading-color');
font-size: 12px;
margin-right: 5px;
}
@ -80,7 +80,7 @@
top: 2.5rem;
left: 1.5rem;
bottom: 0.9rem;
border-left: 1px solid $text-color;
border-left: 1px solid get-light-color('text-color');
}
li {
&:before {
@ -88,14 +88,14 @@
display: block;
width: 18px;
height: 0;
border-top: 1px solid $text-color;
border-top: 1px solid get-light-color('text-color');
margin-top: -1px;
position: absolute;
top: 18px;
left: -2px;
}
&:last-child:before {
background: $bg-primary;
background: get-light-color('bg-primary');
height: auto;
top: 1.1rem;
bottom: 0;
@ -253,3 +253,49 @@
width: 1rem;
height: 1rem;
}
html[data-theme='dark'] {
.sidebar-section {
.sidebar-holder {
background-color: get-dark-color('bg-primary');
.sidebar {
background: get-dark-color('bg-primary');
#search-box {
background-color: get-dark-color('bg-secondary');
border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
&:focus {
border: 1pt solid get-dark-color('accent-color');
}
}
.sidebar-tree {
.tree {
li {
color: get-dark-color('heading-color');
i {
color: get-dark-color('heading-color');
}
}
.subtree {
&:before {
border-left: 1px solid get-dark-color('text-color');
}
li {
&:before {
border-top: 1px solid get-dark-color('text-color');
}
&:last-child:before {
background: get-dark-color('bg-primary');
}
}
}
}
}
}
}
}
}

View file

@ -54,11 +54,11 @@ $progress-bar-colors: (
a {
font-size: 1.5rem;
color: $text-color;
color: get-light-color('text-color');
padding: 0.5rem;
&:hover {
color: $accent-color;
color: get-light-color('accent-color');
@include transition();
}
}
@ -78,7 +78,7 @@ $progress-bar-colors: (
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid $bg-primary;
border: 12px solid get-light-color('bg-primary');
position: absolute;
top: 0;
left: 0;
@ -130,9 +130,9 @@ $progress-bar-colors: (
height: 90%;
padding: 1rem;
border-radius: 50%;
background: $text-color;
background: get-light-color('text-color');
font-size: 1rem;
color: $bg-primary;
color: get-light-color('bg-primary');
line-height: initial;
text-align: center;
position: absolute;
@ -202,3 +202,28 @@ $progress-bar-colors: (
}
}
}
html[data-theme='dark'] {
.about-section {
.social-link {
a {
color: get-dark-color('text-color');
&:hover {
color: get-dark-color('accent-color');
}
}
}
.circular-progress {
&::after {
border: 12px solid get-dark-color('bg-primary');
}
.circular-progress-value {
background: get-dark-color('inverse-text-color');
color: get-dark-color('text-color');
}
}
}
}

View file

@ -2,13 +2,13 @@
@include section-title-adjustment();
.card {
background: $bg-card;
border-top: 2px solid $accent-color;
background: get-light-color('bg-card');
border-top: 2px solid get-light-color('accent-color');
height: 100%;
&:hover,
&:focus {
border-top: 2px solid $hover-over-accent-color;
border-top: 2px solid get-light-color('hover-over-accent-color');
}
.card-header {
@ -16,7 +16,7 @@
border: none;
.sub-title {
color: $muted-text-color;
color: get-light-color('muted-text-color');
margin-top: 0.4rem;
}
}
@ -28,7 +28,7 @@
}
.card-footer {
background: $bg-card;
background: get-light-color('bg-card');
border: none;
padding: 0;
padding-left: 0.7rem;
@ -53,3 +53,26 @@
max-width: 100%;
}
}
html[data-theme='dark'] {
.accomplishments-section {
.card {
background: get-dark-color('bg-card');
border-top: 2px solid get-dark-color('accent-color');
&:hover,
&:focus {
border-top: 2px solid get-dark-color('hover-over-accent-color');
}
.card-header {
.sub-title {
color: get-dark-color('muted-text-color');
}
}
.card-footer {
background: get-dark-color('bg-card');
}
}
}
}

View file

@ -12,7 +12,7 @@
margin-left: 7px;
margin-right: 7px;
z-index: 1;
background-color: $bg-secondary;
background-color: get-light-color('bg-secondary');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
@ -21,8 +21,8 @@
@include transition();
.title {
color: $inverse-text-color;
background-color: rgba($bg-primary-inverse, 0.7);
color: get-light-color('inverse-text-color');
background-color: rgba(get-light-color('bg-primary-inverse'), 0.7);
opacity: 0;
padding: 5px;
position: absolute;
@ -85,28 +85,28 @@
}
.svg-inline--fa {
color: $muted-text-color;
background-color: rgba($bg-primary-inverse, 0.7);
color: get-light-color('muted-text-color');
background-color: rgba(get-light-color('bg-primary-inverse'), 0.7);
padding: 10px;
font-size: 0rem;
opacity: 0;
}
.caption {
background-color: rgba($bg-primary-inverse, 0.7);
background-color: rgba(get-light-color('bg-primary-inverse'), 0.7);
bottom: 1rem;
left: 1rem;
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
padding: 15px;
position: absolute;
@include transition();
h4 {
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
}
p {
font-size: 16px;
font-weight: 300;
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
}
}
@ -127,3 +127,33 @@
}
}
}
html[data-theme='dark'] {
.achievements-section {
#gallery {
.achievement-entry {
background-color: get-dark-color('bg-secondary');
.title {
color: get-dark-color('inverse-text-color');
background-color: rgba(get-dark-color('bg-primary-inverse'), 0.7);
}
}
.svg-inline--fa {
color: get-dark-color('muted-text-color');
background-color: rgba(get-dark-color('bg-primary-inverse'), 0.7);
}
.caption {
background-color: rgba(get-dark-color('bg-primary-inverse'), 0.7);
color: get-dark-color('inverse-text-color');
h4 {
color: get-dark-color('inverse-text-color');
}
p {
color: get-dark-color('inverse-text-color');
}
}
}
}
}

View file

@ -4,7 +4,7 @@
.card {
&:hover,
&:focus {
border-left: 2px solid $accent-color;
border-left: 2px solid get-light-color('accent-color');
}
}
@ -23,19 +23,19 @@
position: absolute;
left: 1rem;
top: 0;
background-color: $accent-color;
background-color: get-light-color('accent-color');
height: 100%;
width: 2px;
}
.icon-holder {
background-color: $accent-color;
background-color: get-light-color('accent-color');
border-radius: 50%;
height: 2rem;
width: 2rem;
padding: 0.2rem;
text-align: center;
color: $text-over-accent-color;
color: get-light-color('text-over-accent-color');
position: relative;
}
}
@ -43,14 +43,14 @@
tr,
th,
td {
border: none;
border: none !important;
padding: 0;
background: none;
background: none !important;
}
tr {
&:hover {
background: none;
background: none !important;
}
&:first-child {
.hline {
@ -72,7 +72,7 @@
div {
height: 2px;
margin-right: -1px;
background-color: $accent-color;
background-color: get-light-color('accent-color');
}
}
@ -81,10 +81,10 @@
padding: 1rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
border-left: 2px solid $accent-color;
border-top: 1px solid $bg-primary;
border-bottom: 1px solid $bg-primary;
border-right: 1px solid $bg-primary;
border-left: 2px solid get-light-color('accent-color');
border-top: 1px solid get-light-color('bg-primary');
border-bottom: 1px solid get-light-color('bg-primary');
border-right: 1px solid get-light-color('bg-primary');
border-radius: 5px;
h5 {
@ -92,7 +92,7 @@
}
.timeframe {
color: $muted-text-color;
color: get-light-color('muted-text-color');
text-align: right;
}
@ -109,7 +109,7 @@
th {
background: none;
border: none;
color: $text-color;
color: get-light-color('text-color');
}
tr {
@ -167,5 +167,68 @@
}
.education-alt .degree-info {
border-right: 2px solid $accent-color;
border-right: 2px solid get-light-color('accent-color');
}
html[data-theme='dark'] {
.education-section {
.card {
&:hover,
&:focus {
border-left: 2px solid get-dark-color('accent-color');
}
}
.education-info-table {
.icon {
.hline {
background-color: get-dark-color('accent-color');
}
.icon-holder {
background-color: get-dark-color('accent-color');
color: get-dark-color('text-over-accent-color');
}
}
tr {
.line {
div {
background-color: get-dark-color('accent-color');
}
}
.details {
.degree-info {
border-left: 2px solid get-dark-color('accent-color');
border-top: 1px solid get-dark-color('bg-primary');
border-bottom: 1px solid get-dark-color('bg-primary');
border-right: 1px solid get-dark-color('bg-primary');
.timeframe {
color: get-dark-color('muted-text-color');
}
.taken-courses {
table {
tr,
td,
th {
color: get-dark-color('text-color');
}
}
}
&:hover{
border: 1px solid rgba(get-dark-color('accent-color'),0.2);
border-left: 2px solid get-dark-color('accent-color');
}
}
}
}
}
}
.education-alt .degree-info {
border-right: 2px solid get-dark-color('accent-color');
}
}

View file

@ -7,7 +7,7 @@
padding-left: 1rem;
& > li {
margin-left: 0;
color: $text-color;
color: get-light-color('text-color');
}
}
@ -18,8 +18,8 @@
.circle {
padding: 13px 20px;
border-radius: 50%;
background-color: $accent-color;
color: $text-over-accent-color;
background-color: get-light-color('accent-color');
color: get-light-color('text-over-accent-color');
max-height: 50px;
z-index: 2;
}
@ -33,7 +33,7 @@
&::after {
content: '';
position: absolute;
border-left: 3px solid $accent-color;
border-left: 3px solid get-light-color('accent-color');
z-index: 1;
height: 100%;
left: 50%;
@ -48,7 +48,7 @@
height: 40px;
}
hr {
border-top: 3px solid $accent-color;
border-top: 3px solid get-light-color('accent-color');
margin: 0;
top: 17px;
position: relative;
@ -58,7 +58,7 @@
overflow: hidden;
}
.corner {
border: 3px solid $accent-color;
border: 3px solid get-light-color('accent-color');
width: 100%;
position: relative;
border-radius: 15px;
@ -113,3 +113,33 @@
}
}
}
html[data-theme='dark'] {
.experiences-section {
ul {
& > li {
color: get-dark-color('text-color');
}
}
.circle {
background-color: get-dark-color('accent-color');
color: get-dark-color('text-over-accent-color');
}
.timeline {
.vertical-line {
&::after {
border-left: 3px solid get-dark-color('accent-color');
}
}
.horizontal-line {
hr {
border-top: 3px solid get-dark-color('accent-color');
}
.corner {
border: 3px solid get-dark-color('accent-color');
}
}
}
}
}

View file

@ -1,19 +1,19 @@
.footer {
color: $muted-text-color !important;
background-color: $bg-primary-inverse;
color: get-light-color('muted-text-color') !important;
background-color: get-light-color('footer-color');
position: relative;
z-index: 9999;
h5 {
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
}
a {
color: $muted-text-color;
color: get-light-color('muted-text-color');
@include transition();
&:hover {
margin-left: 5px;
text-decoration: $muted-text-color underline;
text-decoration: get-light-color('muted-text-color') underline;
@include transition();
}
}
@ -28,30 +28,30 @@
}
hr {
background-color: $muted-text-color;
background-color: get-light-color('muted-text-color');
}
p:first-child {
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
}
input {
background-color: $inverse-text-color;
background-color: get-light-color('inverse-text-color');
&:focus {
background-color: $bg-secondary;
background-color: get-light-color('bg-secondary');
}
}
#disclaimer {
color: $muted-text-color !important;
color: get-light-color('muted-text-color') !important;
text-align: justify;
& > strong {
color: $inverse-text-color !important;
color: get-light-color('inverse-text-color') !important;
}
}
#theme {
color: $inverse-text-color;
color: get-light-color('inverse-text-color');
img {
width: 32px;
display: inline-block;
@ -67,3 +67,46 @@
}
}
}
html[data-theme='dark'] {
.footer {
color: get-dark-color('muted-text-color') !important;
background-color: get-dark-color('footer-color');
h5 {
color: get-dark-color('heading-color');
}
a {
color: get-dark-color('muted-text-color');
&:hover {
text-decoration: get-dark-color('muted-text-color') underline;
}
}
hr {
background-color: get-dark-color('muted-text-color');
}
p:first-child {
color: get-dark-color('muted-text-color');
}
input {
background-color: get-dark-color('bg-primary');
&:focus {
background-color: get-dark-color('bg-secondary');
}
}
#disclaimer {
color: get-dark-color('muted-text-color') !important;
& > strong {
color: get-dark-color('text-color') !important;
}
}
#theme {
color: get-dark-color('text-color');
}
}
}

View file

@ -2,7 +2,7 @@
height: 100vh;
padding: 0;
margin: 0;
color: $text-over-accent-color;
color: get-light-color('text-over-accent-color');
overflow: hidden;
.background {
@ -44,19 +44,19 @@
img {
width: 148px;
height: 148px;
background-color: $bg-secondary;
background-color: get-light-color('bg-secondary');
padding: 5px;
margin-bottom: 10px;
}
.greeting,
.greeting-subtitle {
color: $text-over-accent-color;
color: get-light-color('text-over-accent-color');
}
.typing-carousel {
font-size: 14pt;
color: $text-over-accent-color;
color: get-light-color('text-over-accent-color');
}
#typing-carousel-data {
@ -65,7 +65,7 @@
.arrow {
position: absolute;
color: $text-over-accent-color;
color: get-light-color('text-over-accent-color');
font-size: 1.5rem;
bottom: 0;
}
@ -108,3 +108,24 @@
}
}
}
html[data-theme='dark'] {
.home {
color: get-dark-color('text-over-accent-color');
img {
background-color: get-dark-color('bg-secondary');
}
.greeting,
.greeting-subtitle {
color: get-dark-color('text-over-accent-color');
}
.typing-carousel {
color: get-dark-color('text-over-accent-color');
}
.arrow {
color: get-dark-color('text-over-accent-color');
}
}
}

View file

@ -1,7 +1,7 @@
.projects-section {
.card {
.card-header {
background-color: $bg-card;
background-color: get-light-color('bg-card');
padding: 0.7rem;
padding-bottom: 0rem;
text-decoration: none;
@ -10,7 +10,7 @@
margin-right: 0.5rem;
}
.sub-title {
color: $muted-text-color;
color: get-light-color('muted-text-color');
margin-top: 0.4rem;
span {
@ -81,3 +81,16 @@
}
}
}
html[data-theme='dark'] {
.projects-section {
.card {
.card-header {
background-color: get-dark-color('bg-card');
.sub-title {
color: get-dark-color('muted-text-color');
}
}
}
}
}

View file

@ -2,12 +2,12 @@
@include section-title-adjustment();
.card {
background: $bg-card;
border-top: 2px solid $accent-color;
background: get-light-color('bg-card');
border-top: 2px solid get-light-color('accent-color');
&:hover,
&:focus {
border-top: 2px solid $accent-color;
border-top: 2px solid get-light-color('accent-color');
}
.card-header {
@ -17,7 +17,7 @@
flex-direction: column;
.sub-title {
color: $muted-text-color;
color: get-light-color('muted-text-color');
margin-top: 0.4rem;
span:nth-child(2) {
@ -33,7 +33,7 @@
}
.card-footer {
background: $bg-card;
background: get-light-color('bg-card');
border: none;
padding: 0;
padding-left: 1rem;
@ -106,3 +106,27 @@
}
}
}
html[data-theme='dark'] {
.publications-section {
.card {
background: get-dark-color('bg-card');
border-top: 2px solid get-dark-color('accent-color');
&:hover,
&:focus {
border-top: 2px solid get-dark-color('accent-color');
}
.card-header {
.sub-title {
color: get-dark-color('muted-text-color');
}
}
.card-footer {
background: get-dark-color('bg-card');
}
}
}
}

View file

@ -5,12 +5,12 @@
height: 100%;
.card-head {
background-color: $bg-primary !important;
background-color: get-light-color('bg-primary') !important;
height: -moz-fit-content;
height: fit-content;
padding: 0.7rem;
padding-bottom: 0rem;
border-bottom: 0.0625rem solid rgba($accent-color, 0.4);
border-bottom: 0.0625rem solid rgba(get-light-color('accent-color'), 0.4);
.card-img-xs {
margin-right: 0.5rem;
@ -33,3 +33,14 @@
}
}
}
html[data-theme='dark'] {
.skills-section {
.card {
.card-head {
background-color: get-dark-color('bg-card') !important;
border-bottom: 0.0625rem solid rgba(get-dark-color('accent-color'), 0.4);
}
}
}
}

View file

@ -13,33 +13,76 @@ $breakpoints: (
// Color are chosen from TailwindCSS color scheme
// https://tailwindcss.com/docs/customizing-colors
// accent-color
$accent-color: #0891b2; // cyan 600
$hover-over-accent-color: #06b6d4; // cyan 500
$text-over-accent-color: #e4e4e7; // zinc 200
// background-color
$bg-primary: #f8fafc; // slate 50
$bg-primary-inverse: #0f172a; // slate 900
$bg-secondary: #e2e8f0; // slate 200
$bg-card: #fff;
// text-color
$heading-color: #1e293b; // slate 800
$text-color: #334155; // slate 700
$inverse-text-color: #cbd5e1; // slate 300
$muted-text-color: #64748b; // slate 500
$inline-code-color: #dc2626; // red 600
$highlight-color: #fde68a; // amber 200
// transitions
$transition-duration: 0.3s;
$transition-type: ease-out;
// borders and shadows
$border-color: rgba($accent-color, 0.1);
$box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
// themes
$themes: (
'light': (
// cyan 600
'accent-color': #0891b2,
// cyan 500
'hover-over-accent-color': #06b6d4,
// zinc 200
'text-over-accent-color': #e4e4e7,
// slate 50
'bg-primary': #f8fafc,
// slate 900
'bg-primary-inverse': #0f172a,
// slate 200
'bg-secondary': #e2e8f0,
'bg-card': #fff,
// slate 800
'heading-color': #1e293b,
// slate 700
'text-color': #334155,
// slate 300
'inverse-text-color': #cbd5e1,
// slate 500
'muted-text-color': #64748b,
// red 600
'inline-code-color': #dc2626,
// amber 200
'highlight-color': #fde68a,
// slate 900
'footer-color': #0f172a,
),
'dark': (
// cyan 600
'accent-color': #0891b2,
// cyan 500
'hover-over-accent-color': #06b6d4,
// zinc 200
'text-over-accent-color': #e4e4e7,
// gray-800
'bg-primary': #1f2937,
// slate 900
'bg-primary-inverse': #0f172a,
// gray 900
'bg-secondary': #111827,
// slate 800
'bg-card': #1e293b,
// slate 100
'heading-color': #f1f5f9,
// slate 300
'text-color': #cbd5e1,
// slate 900
'inverse-text-color': #0f172a,
// slate 500
'muted-text-color': #64748b,
// red 600
'inline-code-color': #dc2626,
// amber 200
'highlight-color': #fde68a,
// slate 900
'footer-color': #0f172a,
),
);
$brand-colors: (
'facebook': #3b5998,
'twitter': #1da1f2,

View file

@ -8,12 +8,6 @@ videoplayer:
styles:
- plyr/dist/plyr
darkmode:
services:
darkreader:
styles:
- ./colortheme/colortheme
syntaxhighlight:
services:
hljs:

View file

@ -81,15 +81,6 @@ params:
# Enable dark theme
darkMode:
enable: false
services:
darkreader:
defaultColorScheme: system # options are 'system', 'dark', 'light'
fixes:
invert: ['img[src$=".svg"]'] # inverts svg colors.
theme:
brightness: 100
contrast: 100
sepia: 0
# Enable and configure portfolio
portfolio:

View file

@ -11,7 +11,17 @@
<!--================= add analytics if enabled =========================-->
{{- partial "analytics.html" . -}}
<script>
theme = localStorage.getItem('darkmode:color-scheme') || 'system';
if (theme == 'system') {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme = 'dark';
} else {
theme = 'light';
}
}
document.documentElement.setAttribute('data-theme', theme);
</script>
</head>
<body class="type-{{ .Page.Type }} kind-{{ .Page.Kind }}" data-spy="scroll" data-target="#TableOfContents" data-offset="80">

View file

@ -17,6 +17,17 @@
<!--================= add analytics if enabled =========================-->
{{- partial "analytics.html" . -}}
<script>
theme = localStorage.getItem('darkmode:color-scheme') || 'system';
if (theme == 'system') {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme = 'dark';
} else {
theme = 'light';
}
}
document.documentElement.setAttribute('data-theme', theme);
</script>
</head>
<body data-spy="scroll" data-target="#top-navbar" data-offset="100">

View file

@ -72,29 +72,12 @@ params:
# The `darkMode` feature
darkmode:
enable: true
services:
# darkmode is realized by using DarkReader library
darkreader:
# options are 'system', 'dark', 'light'
defaultColorScheme: system
# For all available options, see `interface DynamicThemeFix`:
# https://github.com/darkreader/darkreader/blob/main/index.d.ts#L125
fixes:
invert: ['img[src$=".svg"]'] # inverts svg colors.
# For all available options, see `interface Theme` in:
# https://github.com/darkreader/darkreader/blob/main/index.d.ts#L45
theme:
brightness: 100
contrast: 100
sepia: 0
```
This helper will convert the above config into the following env vars:
* `FEATURE_ANALYTICS=1`
* `FEATURE_ANALYTICS_GOOGLE=1`
* `FEATURE_DARKMODE=1`
* `FEATURE_DARKMODE_DARKREADER=1`
In JS, you can use it like this:

View file

@ -1,17 +1,17 @@
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="themeSelector" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img id="navbar-theme-icon-svg" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20 alt="Dark Theme">
<img id="navbar-theme-icon-svg" class="theme-icon" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20 alt="Dark Theme">
</a>
<div id="themeMenu" class="dropdown-menu dropdown-menu-icons-only" aria-labelledby="themeSelector">
<a class="dropdown-item nav-link" href="#" data-scheme="light">
<img class="menu-icon-center" src="{{ "/icons/sun-svgrepo-com.svg" }}" width=20 alt="Light Theme">
<img class="theme-icon" src="{{ "/icons/sun-svgrepo-com.svg" }}" width=20 alt="Light Theme">
</a>
<a class="dropdown-item nav-link" href="#" data-scheme="dark">
<img class="menu-icon-center" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20 alt="Dark Theme">
<img class="theme-icon" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20 alt="Dark Theme">
</a>
<a class="dropdown-item nav-link" href="#" data-scheme="system">
<img class="menu-icon-center" src="{{ "/icons/computer-svgrepo-com.svg" }}" width=20 alt="System Theme">
<img class="theme-icon" src="{{ "/icons/computer-svgrepo-com.svg" }}" width=20 alt="System Theme">
</a>
</div>
</li>

17
package-lock.json generated
View file

@ -13,7 +13,6 @@
"@fortawesome/fontawesome-free": "^6.2.0",
"autoprefixer": "^10.4.13",
"bootstrap": "^4.6.2",
"darkreader": "^4.9.58",
"eslint": "^8.31.0",
"eslint-config-prettier": "^8.6.0",
"eslint-config-standard": "^17.0.0",
@ -1013,16 +1012,6 @@
"lodash-es": "^4.17.21"
}
},
"node_modules/darkreader": {
"version": "4.9.58",
"resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.58.tgz",
"integrity": "sha512-D/JGoJqW3m2AWBLhO+Pev+eThfs+CwRT4bcLb/1zKjql2yVwG0lx8C2XRDdSVGHw4y11n26W7syWoBpUfuhMqQ==",
"dev": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/darkreader/donate"
}
},
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -4543,12 +4532,6 @@
"lodash-es": "^4.17.21"
}
},
"darkreader": {
"version": "4.9.58",
"resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.58.tgz",
"integrity": "sha512-D/JGoJqW3m2AWBLhO+Pev+eThfs+CwRT4bcLb/1zKjql2yVwG0lx8C2XRDdSVGHw4y11n26W7syWoBpUfuhMqQ==",
"dev": true
},
"debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

View file

@ -32,7 +32,6 @@
"@fontsource/mulish": "4.5.13",
"@fortawesome/fontawesome-free": "^6.2.0",
"bootstrap": "^4.6.2",
"darkreader": "^4.9.58",
"filterizr": "^2.2.4",
"flag-icon-css": "^4.1.7",
"fuse.js": "^6.6.2",

View file

@ -10,7 +10,6 @@
"@fortawesome/fontawesome-free": "project",
"autoprefixer": "project",
"bootstrap": "project",
"darkreader": "project",
"eslint": "project",
"eslint-config-prettier": "project",
"eslint-config-standard": "project",
@ -42,7 +41,6 @@
"@fortawesome/fontawesome-free": "^6.2.0",
"autoprefixer": "^10.4.13",
"bootstrap": "^4.6.2",
"darkreader": "^4.9.58",
"eslint": "^8.31.0",
"eslint-config-prettier": "^8.6.0",
"eslint-config-standard": "^17.0.0",