/* ============================================================================= dark-theme.css — Dark / Light theme tokens + overrides Portfolio: ferhattufekci.github.io Architecture: - :root → light theme tokens (default) - [data-theme="dark"] on → dark overrides - CSS transitions on key surfaces for smooth switch ============================================================================= */ /* ── Light theme tokens (default) ── */ :root { --color-bg: #f5f5f5; --color-surface: #ffffff; --color-surface-alt: #fcfcfc; --color-border: #eeeeee; --color-border-strong: #dfdfdf; --color-text-primary: #333333; --color-text-secondary: #666666; --color-text-muted: #9e9e9e; --color-accent: #0099e5; --color-accent-hover: #ff9800; --color-header-bg: #ffffff; --color-mobile-header: #ffffff; --color-nav-border: #f5f5f5; --color-nav-hover-bg: #fcfcfc; --color-skill-border: rgba(0,0,0,.1); --color-timeline-line: #eeeeee; --color-social-bg: #eeeeee; --color-social-hover: #0099e5; --color-input-bg: #ffffff; --color-input-border: #dfdfdf; --color-card-shadow: rgba(0,0,0,0.06); --color-skeleton: #e8e8e8; --color-preloader: #ffffff; --color-proj-topic-bg: #f5f5f5; --color-proj-topic-clr: #666666; --color-filter-bg: #f0f2f4; --color-filter-active: #ffffff; --color-scrollbar-thumb:#dedede; --color-blockquote: #d8d8d8; --color-hp-mask: rgba(10,10,10,0.45); --transition-theme: background-color 250ms ease, color 200ms ease, border-color 200ms ease, fill 200ms ease; } /* ── Dark theme overrides ── */ [data-theme="dark"] { --color-bg: #0d1117; --color-surface: #161b22; --color-surface-alt: #1c2128; --color-border: #30363d; --color-border-strong: #3d444d; --color-text-primary: #e6edf3; --color-text-secondary: #c9d1d9; --color-text-muted: #8b949e; --color-accent: #58a6ff; --color-accent-hover: #f0883e; --color-header-bg: #161b22; --color-mobile-header: #161b22; --color-nav-border: #21262d; --color-nav-hover-bg: #1c2128; --color-skill-border: rgba(255,255,255,.12); --color-timeline-line: #30363d; --color-social-bg: #21262d; --color-social-hover: #58a6ff; --color-input-bg: #161b22; --color-input-border: #30363d; --color-card-shadow: rgba(0,0,0,0.3); --color-skeleton: #2a2a2a; --color-preloader: #0d1117; --color-proj-topic-bg: #21262d; --color-proj-topic-clr: #8b949e; --color-filter-bg: #1c2128; --color-filter-active: #21262d; --color-scrollbar-thumb:#30363d; --color-blockquote: #30363d; --color-hp-mask: rgba(0,0,0,0.6); } /* ── Smooth transitions on key elements ── */ html, body, .header, .mobile-header, .pt-page .section-inner, .blog-card, .proj-card, .lm-info-block, .portfolio-filters li a, .proj-cat-filters li a, .info-block-w-icon, .timeline-second-style .left-part, .timeline-second-style .right-part, .form-control, .btn-primary, .btn-secondary { transition: var(--transition-theme); } /* ============================================================================ TOKEN APPLICATION — replace hard-coded values ============================================================================ */ /* ── Body & global ── */ body { background-color: var(--color-bg); color: var(--color-text-secondary); } body, p { color: var(--color-text-secondary); } /* ── Typography ── */ h1, h2, h3, h4, h5, h6 { color: var(--color-text-primary); } a { color: var(--color-accent); } a:hover { color: var(--color-accent-hover); } blockquote { border-left-color: var(--color-blockquote); color: var(--color-text-muted); } /* ── Preloader ── */ .preloader, .preloader-portfolio { background: var(--color-preloader); } /* ── Header / Sidebar ── */ .header { background-color: var(--color-header-bg); border-right: 1px solid var(--color-border); } .site-title { color: var(--color-text-primary); } .site-main-menu li a, .site-main-menu li a:hover { color: var(--color-text-primary); border-bottom-color: var(--color-nav-border); } .site-main-menu:not(.dl-menu) li:first-child a { border-top-color: var(--color-nav-border); } .site-main-menu li a:hover, .site-main-menu li.active a { background-color: var(--color-nav-hover-bg); } .header .social-links a { background-color: var(--color-social-bg); color: var(--color-text-muted); } .header .social-links a:hover { background-color: var(--color-social-hover); } .header .copyrights { color: var(--color-text-muted); } /* ── Mobile header ── */ .mobile-header { background-color: var(--color-mobile-header); border-bottom-color: var(--color-border); } .mobile-site-title, .mobile-site-title a, .mobile-site-title a:hover { color: var(--color-text-primary); } .menu-toggle i { color: var(--color-text-primary); } /* ── Section inner (subpage content) ── */ .pt-page .section-inner { background-color: var(--color-surface); } .page-content { background-color: var(--color-surface); } /* ── Section titles ── */ .section-title-block.first-style .section-title, .section-title-block.second-style .section-title, .page-title-wrap.first-style h2.page-title, .page-title-wrap.second-style h2.page-title { color: var(--color-text-primary); } .section-title-block.second-style .section-title:after { background-color: var(--color-border); } .section-title-block.second-style .section-description { color: var(--color-text-muted); } /* ── Buttons ── */ .btn-primary, .btn-secondary, button, input[type="button"], input[type="submit"] { background-color: var(--color-surface); color: var(--color-text-primary); border-color: var(--color-accent); } .btn-primary:hover, .btn-primary:focus, button:hover, button:focus, input[type="button"]:hover, input[type="submit"]:hover { background-color: var(--color-accent); border-color: var(--color-accent); color: #fff; } .btn-secondary { border-color: var(--color-border-strong); background-color: var(--color-surface); } .btn-secondary:hover, .btn-secondary:focus { background-color: var(--color-border-strong); border-color: var(--color-border-strong); color: var(--color-text-primary); } /* ── Form controls ── */ .form-control, .form-control:focus, .has-error .form-control, .has-error .form-control:focus, input[type="text"], input[type="password"], input[type="search"], textarea.form-control { background-color: var(--color-input-bg); border-color: var(--color-input-border); color: var(--color-text-primary); } .form-control::-webkit-input-placeholder { color: var(--color-text-muted); } .form-control::-moz-placeholder { color: var(--color-text-muted); } .form-control::placeholder { color: var(--color-text-muted); } /* ── About Me — services ── */ .info-block-w-icon .ci-text h4 { color: var(--color-text-primary); } .info-block-w-icon i { color: var(--color-text-muted); } /* ── Timeline (Resume) ── */ .timeline-second-style .divider { background-color: var(--color-timeline-line); } .timeline-second-style .divider:after { border-color: var(--color-accent); background-color: var(--color-surface); } .timeline-second-style .item-company { color: var(--color-text-muted); } .timeline-second-style .item-period { color: var(--color-text-secondary); } /* ── Skills ── */ .skills-second-style .skill-container { border-color: var(--color-accent); background-color: transparent; } .skills-second-style .skill-value { color: var(--color-text-muted); } /* ── Portfolio grid ── */ .portfolio-grid figure .name, .portfolio-grid figure .category, .portfolio-grid figure i { background-color: var(--color-surface); color: var(--color-text-primary); } /* ── Portfolio filters (shared) ── */ .portfolio-filters li a, .portfolio-filters li a:hover { color: var(--color-text-muted); background-color: transparent; border-color: transparent; } .portfolio-filters li a:hover { border-color: var(--color-border); color: var(--color-text-primary); } .portfolio-filters li.active a, .portfolio-filters li.active a:hover { background-color: var(--color-surface); border-color: var(--color-accent); color: var(--color-text-primary); } /* ── Blog cards ── */ .blog-card { background-color: var(--color-surface); } .blog-card .post-info { border-color: var(--color-border); border-top: none; } .blog-card .blog-item-title { color: var(--color-text-primary); } .blog-card .post-date { color: var(--color-text-muted); } /* ── Blog — segmented filter ── */ .pt-page[data-id="blog"] .portfolio-filters, .pt-page[data-id="projects"] .proj-cat-filters { background: var(--color-filter-bg) !important; } .pt-page[data-id="blog"] .portfolio-filters li.active a, .pt-page[data-id="blog"] .portfolio-filters li.active a:hover, .pt-page[data-id="projects"] .proj-cat-filters li.active a, .pt-page[data-id="projects"] .proj-cat-filters li.active a:hover { background: var(--color-filter-active) !important; color: var(--color-text-primary) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.25), 0 0 0 0.5px var(--color-border) !important; } .pt-page[data-id="blog"] .portfolio-filters li a, .pt-page[data-id="projects"] .proj-cat-filters li a { color: var(--color-text-muted) !important; } .pt-page[data-id="blog"] .portfolio-filters li a:hover, .pt-page[data-id="projects"] .proj-cat-filters li a:hover { color: var(--color-text-primary) !important; background: rgba(255,255,255,0.07) !important; } /* ── Blog language toggle buttons ── */ .blt-btn { color: var(--color-text-muted) !important; } .blt-btn:hover { color: var(--color-text-secondary) !important; } .blt-btn.active { color: var(--color-text-primary) !important; } .blt-sep { color: var(--color-border) !important; } /* ── Blog shimmer skeleton ── */ .blog-skeleton > div { background: var(--color-skeleton) !important; } /* ── Blog empty state ── */ .blog-empty-state h4 { color: var(--color-text-secondary); } .blog-empty-state p { color: var(--color-text-muted); } .blog-empty-state a { color: var(--color-accent); } /* ── Projects — repo cards ── */ .proj-card { background-color: var(--color-surface); border-color: var(--color-border); } .proj-card:hover { border-color: var(--color-border-strong); box-shadow: 0 2px 8px var(--color-card-shadow); } .proj-name { color: var(--color-accent) !important; } .proj-desc { color: var(--color-text-muted); } .proj-topic { background: var(--color-proj-topic-bg); color: var(--color-proj-topic-clr); border-color: var(--color-border); } .proj-stat, .proj-lang-pct { color: var(--color-text-muted); } .proj-section-divider-line, .proj-starred-divider-line { background: var(--color-border); } .proj-section-divider-label, .proj-starred-divider-label, .proj-section-label { color: var(--color-text-muted); } .proj-starred-note { color: var(--color-text-muted); } .proj-show-more-btn { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-muted); } .proj-show-more-btn:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-surface-alt); } .proj-owner-badge { background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text-muted); } .proj-homepage { color: var(--color-text-muted); } .proj-homepage:hover { color: var(--color-accent); } /* ── Filter scroll hint gradient — adapt for dark ── */ [data-theme="dark"] .filter-scroll-hint::after { background: linear-gradient(to right, transparent, var(--color-surface) 85%); } /* ── Contact — info blocks ── */ .lm-info-block { background-color: var(--color-surface); border-color: var(--color-border); } .lm-info-block i { color: var(--color-text-muted); } .lm-info-block h4 { color: var(--color-text-primary); } .lm-info-block .lm-info-block-value { color: var(--color-accent); } /* ── Arrows nav ── */ .lmpixels-arrows-nav > div { background-color: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text-primary); box-shadow: 0 0 8px var(--color-card-shadow); } .lmpixels-arrows-nav > div:hover { color: var(--color-accent); } /* ── Scrollbars ── */ body::-webkit-scrollbar-thumb, .pt-page::-webkit-scrollbar-thumb, .single-page-content::-webkit-scrollbar-thumb, .header::-webkit-scrollbar-thumb { background-color: var(--color-scrollbar-thumb); } body::-webkit-scrollbar-track, .pt-page::-webkit-scrollbar-track, .single-page-content::-webkit-scrollbar-track, .header::-webkit-scrollbar-track { background-color: var(--color-surface); } /* ── Start page (hero) ── */ .start-page .section-inner .mask { background: var(--color-hp-mask); } .start-page .title-block h2, .start-page .title-block .sp-subtitle { color: #ffffff; } .section-inner.start-page-full-width .hp-text-block { background-color: var(--color-surface); } .section-inner.start-page-full-width .hp-text-block .sp-subtitle { color: var(--color-text-muted); } /* ── Info list (about me stats) ── */ .info-list li .title { color: var(--color-text-primary); } /* ── Block title underline ── */ .block-title h3:after, h3.comment-reply-title:after { background-color: var(--color-accent); } /* ── Border utilities (site uses custom .border-top / .border-bottom) ── */ .border-top { border-top-color: var(--color-accent) !important; } .border-bottom { border-bottom-color: var(--color-accent) !important; } /* ── Dark-mode skeleton shimmer text override ── */ [data-theme="dark"] .blog-skeleton > div { background: var(--color-skeleton) !important; } /* ============================================================================= THEME TOGGLE BUTTON ============================================================================= */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--color-social-bg); color: var(--color-text-muted); cursor: pointer; font-size: 16px; line-height: 1; margin: 4px auto; padding: 0; transition: background-color 200ms ease, transform 150ms ease; outline: none; } .theme-toggle-btn:hover { background: var(--color-accent); transform: rotate(20deg) scale(1.08); } .theme-toggle-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } /* desktop sidebar — sits below social links */ .header .theme-toggle-btn { margin: 8px auto 0; } /* mobile header — sits right of hamburger */ .mobile-theme-toggle { position: absolute; right: 54px; top: 8px; }