Skip to content

Commit 2674b86

Browse files
ryanphuangryanphuang
committed
fix: dark mode inconsistencies and readability
1 parent d951e6a commit 2674b86

1 file changed

Lines changed: 191 additions & 14 deletions

File tree

‎assets/css/modern.css‎

Lines changed: 191 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@
1818
--radius-md: 12px;
1919
--shadow-sm: 0 10px 28px rgba(14, 33, 61, 0.07);
2020
--shadow-md: 0 24px 54px rgba(14, 33, 61, 0.14);
21+
--btn-border: #2f66dc;
22+
--btn-text: #2556c1;
23+
--btn-hover-bg: #2556c1;
24+
--btn-hover-text: #ffffff;
2125
--page-max: 1120px;
2226
--page-gutter: 32px;
2327
--page-gutter-mobile: 12px;
@@ -627,6 +631,18 @@ a:hover {
627631
color: #ffffff;
628632
}
629633

634+
[data-theme="dark"] .project-link-icon {
635+
border-color: var(--btn-border);
636+
color: var(--btn-text);
637+
background: transparent;
638+
}
639+
640+
[data-theme="dark"] .project-link-icon:hover {
641+
border-color: var(--btn-hover-bg);
642+
background: var(--btn-hover-bg);
643+
color: var(--btn-hover-text);
644+
}
645+
630646
.project-card__content .project-badge {
631647
display: inline-flex;
632648
align-items: center;
@@ -760,28 +776,29 @@ a:hover {
760776
/* Buttons */
761777
.button {
762778
border-radius: 999px;
763-
border: 1px solid var(--brand);
764-
color: var(--brand-strong);
779+
border: 1px solid var(--btn-border);
780+
color: var(--btn-text);
765781
font-weight: 700;
766782
font-size: 0.94rem;
767783
letter-spacing: 0.01em;
768784
transition: all 0.2s ease;
769785
}
770786

771787
.button:hover {
772-
background: var(--brand-strong);
773-
border-color: var(--brand-strong);
774-
color: #ffffff;
788+
background: var(--btn-hover-bg);
789+
border-color: var(--btn-hover-bg);
790+
color: var(--btn-hover-text);
775791
}
776792

777793
.button-light {
778-
border-color: var(--brand);
779-
color: var(--brand);
794+
border-color: var(--btn-border);
795+
color: var(--btn-text);
780796
}
781797

782798
.button-light:hover {
783-
background: var(--brand);
784-
color: #fff;
799+
background: var(--btn-hover-bg);
800+
border-color: var(--btn-hover-bg);
801+
color: var(--btn-hover-text);
785802
}
786803

787804
/* Blog */
@@ -854,17 +871,17 @@ a:hover {
854871

855872
.blog-preview-section .blog-card .button.button-light,
856873
.blog-preview-section__actions .button.button-light {
857-
border-color: #2f6bf0;
858-
color: #2f6bf0;
874+
border-color: var(--btn-border);
875+
color: var(--btn-text);
859876
background: transparent;
860877
font-weight: 700;
861878
}
862879

863880
.blog-preview-section .blog-card .button.button-light:hover,
864881
.blog-preview-section__actions .button.button-light:hover {
865-
border-color: #2f6bf0;
866-
background: #2f6bf0;
867-
color: #ffffff;
882+
border-color: var(--btn-hover-bg);
883+
background: var(--btn-hover-bg);
884+
color: var(--btn-hover-text);
868885
}
869886

870887
.blog-preview-section__actions {
@@ -1226,6 +1243,7 @@ a:hover {
12261243

12271244
.single-team-member .meta-text {
12281245
border-radius: var(--radius-md);
1246+
color: var(--ink);
12291247
}
12301248

12311249
.single-team-member .meta-text h4 {
@@ -1234,6 +1252,20 @@ a:hover {
12341252
font-weight: 700;
12351253
}
12361254

1255+
.single-team-member .meta-text h4 a,
1256+
.single-team-member .meta-text a {
1257+
color: var(--brand);
1258+
}
1259+
1260+
.single-team-member .meta-text h4 a:hover,
1261+
.single-team-member .meta-text a:hover {
1262+
color: var(--brand-strong);
1263+
}
1264+
1265+
.single-team-member .meta-text b {
1266+
color: var(--ink);
1267+
}
1268+
12371269
.team_members_area ul {
12381270
list-style: none;
12391271
padding-left: 0;
@@ -1629,6 +1661,10 @@ a:hover {
16291661
--accent: #4fb7b1;
16301662
--shadow-sm: 0 12px 30px rgba(0, 0, 0, 0.3);
16311663
--shadow-md: 0 24px 58px rgba(0, 0, 0, 0.4);
1664+
--btn-border: #8fb4ff;
1665+
--btn-text: #9ec0ff;
1666+
--btn-hover-bg: #9ec0ff;
1667+
--btn-hover-text: #0d1726;
16321668
}
16331669

16341670
[data-theme="dark"] body {
@@ -1666,6 +1702,34 @@ a:hover {
16661702
opacity: 0.96;
16671703
}
16681704

1705+
[data-theme="dark"] .button,
1706+
[data-theme="dark"] .button-light {
1707+
border-color: var(--btn-border);
1708+
color: var(--btn-text);
1709+
background: transparent;
1710+
}
1711+
1712+
[data-theme="dark"] .button:hover,
1713+
[data-theme="dark"] .button-light:hover {
1714+
border-color: var(--btn-hover-bg);
1715+
background: var(--btn-hover-bg);
1716+
color: var(--btn-hover-text);
1717+
}
1718+
1719+
[data-theme="dark"] .home-hero__actions .button.bg,
1720+
[data-theme="dark"] .home-hero__actions .button-light {
1721+
border-color: var(--btn-border);
1722+
color: var(--btn-text);
1723+
background: transparent;
1724+
}
1725+
1726+
[data-theme="dark"] .home-hero__actions .button.bg:hover,
1727+
[data-theme="dark"] .home-hero__actions .button-light:hover {
1728+
border-color: var(--btn-hover-bg);
1729+
background: var(--btn-hover-bg);
1730+
color: var(--btn-hover-text);
1731+
}
1732+
16691733
[data-theme="dark"] .theme-toggle {
16701734
border: 0;
16711735
background: transparent;
@@ -1676,6 +1740,12 @@ a:hover {
16761740
background: rgba(18, 30, 48, 0.9);
16771741
}
16781742

1743+
[data-theme="dark"] .layout-default .side-main > section.section-margin > .container,
1744+
[data-theme="dark"] .layout-single .side-main > section.section-margin > .container {
1745+
background: var(--surface);
1746+
border-color: var(--line);
1747+
}
1748+
16791749
[data-theme="dark"] .scope-panel {
16801750
background: linear-gradient(145deg, rgba(20, 32, 50, 0.96), rgba(17, 28, 45, 0.98));
16811751
}
@@ -1685,13 +1755,96 @@ a:hover {
16851755
[data-theme="dark"] .blog-post,
16861756
[data-theme="dark"] .publications li,
16871757
[data-theme="dark"] .newslist li,
1758+
[data-theme="dark"] .team_members_area ul li,
16881759
[data-theme="dark"] .sponsor-card,
16891760
[data-theme="dark"] .card-feature,
16901761
[data-theme="dark"] .single-team-member .meta-text {
16911762
background: var(--surface);
16921763
border-color: var(--line);
16931764
}
16941765

1766+
[data-theme="dark"] .single-team-member .meta-text {
1767+
background: linear-gradient(180deg, #14253d, #122136);
1768+
border-color: #2d4f74;
1769+
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
1770+
color: #e9f0fc;
1771+
}
1772+
1773+
[data-theme="dark"] .single-team-member .meta-text h4,
1774+
[data-theme="dark"] .single-team-member .meta-text b,
1775+
[data-theme="dark"] .single-team-member .meta-text strong,
1776+
[data-theme="dark"] .single-team-member .meta-text span,
1777+
[data-theme="dark"] .single-team-member .meta-text {
1778+
color: #e9f0fc !important;
1779+
}
1780+
1781+
[data-theme="dark"] .single-team-member .meta-text a {
1782+
color: #8eb9ff !important;
1783+
}
1784+
1785+
[data-theme="dark"] .single-team-member .meta-text a:hover {
1786+
color: #bfd8ff !important;
1787+
}
1788+
1789+
[data-theme="dark"] .single-team-member .thumb .img-team {
1790+
border-color: rgba(244, 248, 255, 0.95);
1791+
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.42);
1792+
}
1793+
1794+
[data-theme="dark"] .team_members_area ul li {
1795+
background: linear-gradient(180deg, #16273f, #122136);
1796+
border-color: #2d4f74;
1797+
color: #dce9fb;
1798+
}
1799+
1800+
[data-theme="dark"] .team_members_area ul li b,
1801+
[data-theme="dark"] .team_members_area ul li strong {
1802+
color: #ecf3ff;
1803+
}
1804+
1805+
[data-theme="dark"] .team_members_area ul li a {
1806+
color: #8eb9ff;
1807+
}
1808+
1809+
[data-theme="dark"] .team_members_area ul li a:hover {
1810+
color: #bfd8ff;
1811+
}
1812+
1813+
[data-theme="dark"] .blog-preview-section .blog-card {
1814+
background: var(--surface);
1815+
border-color: var(--line);
1816+
}
1817+
1818+
[data-theme="dark"] .blog-preview-section .blog-card .meta {
1819+
color: #9fb3cb;
1820+
}
1821+
1822+
[data-theme="dark"] .blog-preview-section .blog-card h3 a {
1823+
color: var(--ink);
1824+
}
1825+
1826+
[data-theme="dark"] .blog-preview-section .blog-card h3 a:hover {
1827+
color: var(--brand-strong);
1828+
}
1829+
1830+
[data-theme="dark"] .blog-preview-section .blog-card p {
1831+
color: var(--ink-subtle);
1832+
}
1833+
1834+
[data-theme="dark"] .blog-preview-section .blog-card .button.button-light,
1835+
[data-theme="dark"] .blog-preview-section__actions .button.button-light {
1836+
border-color: var(--btn-border);
1837+
color: var(--btn-text);
1838+
background: transparent;
1839+
}
1840+
1841+
[data-theme="dark"] .blog-preview-section .blog-card .button.button-light:hover,
1842+
[data-theme="dark"] .blog-preview-section__actions .button.button-light:hover {
1843+
border-color: var(--btn-hover-bg);
1844+
background: var(--btn-hover-bg);
1845+
color: var(--btn-hover-text);
1846+
}
1847+
16951848
[data-theme="dark"] .publications .authorlist,
16961849
[data-theme="dark"] .publications .authorlist i,
16971850
[data-theme="dark"] .publications .authorlist a,
@@ -1704,6 +1857,30 @@ a:hover {
17041857
color: #d8e6f9 !important;
17051858
}
17061859

1860+
[data-theme="dark"] .publinkitem {
1861+
border-color: var(--btn-border) !important;
1862+
color: var(--btn-text) !important;
1863+
background: transparent !important;
1864+
}
1865+
1866+
[data-theme="dark"] .publinkitem:hover {
1867+
border-color: var(--btn-hover-bg) !important;
1868+
color: var(--btn-hover-text) !important;
1869+
background: var(--btn-hover-bg) !important;
1870+
}
1871+
1872+
[data-theme="dark"] .gh-stars {
1873+
border-color: rgba(159, 192, 255, 0.36);
1874+
background: rgba(159, 192, 255, 0.12);
1875+
color: #c0d7ff;
1876+
}
1877+
1878+
[data-theme="dark"] .publinkitem:hover .gh-stars {
1879+
border-color: rgba(13, 23, 38, 0.24);
1880+
background: rgba(13, 23, 38, 0.2);
1881+
color: #0d1726;
1882+
}
1883+
17071884
[data-theme="dark"] .project-card__media,
17081885
[data-theme="dark"] .hero-visual-card,
17091886
[data-theme="dark"] .project-card__media img.project-logo-fit {

0 commit comments

Comments
 (0)