/*
* Dark mode styles for the Front Row Vanguard theme.
*
* This stylesheet defines a set of CSS custom properties for the dark palette and overrides
* various UI elements to ensure proper contrast and readability. The variables are scoped
* under the data‑theme="dark" attribute on the root element so that they only apply when
* dark mode is active. The plugin’s JavaScript toggles this attribute on the element.
*/
/* Dark colour palette definitions */
:root[data-theme="dark"] {
--tdn-bg: #121212;
--tdn-bg-soft: #1d1d1d;
--tdn-text: #f0f0f0;
--tdn-muted: #aaaaaa;
--tdn-border: #333333;
--tdn-red: #e54766; /* Slightly brighter red for contrast on dark backgrounds */
--tdn-red-dark: #c21837;
/*
* Additional variables used by Front Row Vanguard and its plugins. By defining
* these here, third‑party components that rely on var(--border-color),
* var(--card-bg), var(--heading-color) or var(--body-color) will automatically
* pick up the dark palette without requiring explicit selectors.
*/
--border-color: #333333;
--card-bg: #1d1d1d;
--heading-color: #f0f0f0;
--body-color: #cccccc;
}
/* Apply dark background and text colours globally */
html[data-theme="dark"] body,
body[data-theme="dark"] {
background-color: var(--tdn-bg) !important;
color: var(--tdn-text) !important;
}
/* Header adjustments */
html[data-theme="dark"] .site-header {
background-color: var(--tdn-bg) !important;
border-bottom: 1px solid var(--tdn-border) !important;
}
html[data-theme="dark"] .primary-menu a {
color: var(--tdn-text) !important;
}
html[data-theme="dark"] .primary-menu a:hover,
html[data-theme="dark"] .primary-menu a:focus {
/*
* When hovering a navigation link, switch the text and underline to the
* red accent and apply a subtle background so that the contrast is clear
* on dark backgrounds. Many themes set a border‑bottom to indicate
* hover/active state; we override that border colour here as well.
*/
color: var(--tdn-red) !important;
background-color: var(--tdn-bg-soft) !important;
border-bottom: 2px solid var(--tdn-red) !important;
}
/* Ensure active/focus state uses the same styling as hover */
html[data-theme="dark"] .primary-menu li.focus > a,
html[data-theme="dark"] .primary-menu li.current-menu-item > a {
color: var(--tdn-red) !important;
background-color: var(--tdn-bg-soft) !important;
border-bottom: 2px solid var(--tdn-red) !important;
}
/* Article cards and widgets */
html[data-theme="dark"] .more-headlines-grid article,
html[data-theme="dark"] .recent-grid article,
html[data-theme="dark"] .frv-footer-latest-item,
html[data-theme="dark"] .frv-footer-spotlight {
background-color: var(--tdn-bg-soft) !important;
border-color: var(--tdn-border) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}
/* Related posts styling */
html[data-theme="dark"] .frv-related-wrapper {
/* ensure spacing remains consistent */
margin-top: 2rem;
}
html[data-theme="dark"] .frv-related-item {
background-color: var(--card-bg) !important;
border-color: var(--border-color) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] .frv-related-item a {
color: var(--heading-color) !important;
}
html[data-theme="dark"] .frv-related-item a:hover {
color: var(--tdn-red) !important;
}
html[data-theme="dark"] .frv-related-excerpt {
color: var(--body-color) !important;
}
/*
* Generic card styling
*
* The Front Row Vanguard theme and several of its plugins output content as
* “cards” or list items without unique class names. These rules catch
* most card‑like containers (related posts, query loop posts, latest posts
* widgets, etc.) and assign a dark background, border and appropriate text
* colours. The selectors are intentionally broad and use !important
* declarations to override inline styles or higher specificity rules
* supplied by plugins. If additional card types emerge in future
* releases, they will be covered by these generic selectors.
*/
html[data-theme="dark"] .frv-related-item,
html[data-theme="dark"] .frv-related-item * {
background-color: var(--card-bg) !important;
color: var(--body-color) !important;
border-color: var(--border-color) !important;
}
html[data-theme="dark"] .frv-related-item a {
color: var(--heading-color) !important;
}
html[data-theme="dark"] .frv-related-item a:hover {
color: var(--tdn-red) !important;
}
/* Cover other generic cards, including lists of posts generated by blocks and widgets */
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .wp-block-post,
html[data-theme="dark"] .wp-block-query .wp-block-post,
html[data-theme="dark"] .wp-block-latest-posts__list li,
html[data-theme="dark"] .related-post,
html[data-theme="dark"] .related-posts .post,
html[data-theme="dark"] .wp-block-group .wp-block-post,
html[data-theme="dark"] .wp-block-post-template li {
background-color: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
color: var(--body-color) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
border-radius: 4px !important;
}
html[data-theme="dark"] .post-card a,
html[data-theme="dark"] .wp-block-post a,
html[data-theme="dark"] .wp-block-query .wp-block-post a,
html[data-theme="dark"] .wp-block-latest-posts__list li a,
html[data-theme="dark"] .related-post a,
html[data-theme="dark"] .related-posts .post a,
html[data-theme="dark"] .wp-block-group .wp-block-post a,
html[data-theme="dark"] .wp-block-post-template li a {
color: var(--heading-color) !important;
}
html[data-theme="dark"] .post-card a:hover,
html[data-theme="dark"] .wp-block-post a:hover,
html[data-theme="dark"] .related-post a:hover,
html[data-theme="dark"] .related-posts .post a:hover,
html[data-theme="dark"] .wp-block-post-template li a:hover {
color: var(--tdn-red) !important;
}
/* Social follow icons */
html[data-theme="dark"] .follow a,
html[data-theme="dark"] .frv-footer-follow a,
html[data-theme="dark"] .wp-block-social-links .wp-block-social-link a {
background-color: var(--tdn-bg-soft) !important;
color: var(--tdn-text) !important;
border: 1px solid var(--border-color) !important;
padding: 0.5rem 0.75rem;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
}
html[data-theme="dark"] .follow a:hover,
html[data-theme="dark"] .frv-footer-follow a:hover,
html[data-theme="dark"] .wp-block-social-links .wp-block-social-link a:hover {
background-color: var(--tdn-red) !important;
color: #ffffff !important;
}
/* Share buttons styling (X, Facebook, Email, Copy Link) */
html[data-theme="dark"] .share-this-story a,
html[data-theme="dark"] .share-this-story button,
html[data-theme="dark"] .post-sharing a {
background-color: var(--tdn-bg-soft) !important;
color: var(--tdn-text) !important;
border: 1px solid var(--border-color) !important;
padding: 0.5rem 0.75rem;
border-radius: 4px;
margin-right: 0.5rem;
}
html[data-theme="dark"] .share-this-story a:hover,
html[data-theme="dark"] .share-this-story button:hover,
html[data-theme="dark"] .post-sharing a:hover {
background-color: var(--tdn-red) !important;
color: #ffffff !important;
}
html[data-theme="dark"] .more-headlines-grid article .entry-title,
html[data-theme="dark"] .recent-grid article .entry-title,
html[data-theme="dark"] .frv-footer-latest-title,
html[data-theme="dark"] .frv-footer-spotlight-title a {
color: var(--tdn-text) !important;
}
/* Category labels */
html[data-theme="dark"] .post-categories a,
html[data-theme="dark"] .category-label {
background-color: var(--tdn-red) !important;
color: #ffffff !important;
}
/* Meta text */
html[data-theme="dark"] .meta-date,
html[data-theme="dark"] .meta-author,
html[data-theme="dark"] .frv-footer-latest-meta,
html[data-theme="dark"] .frv-footer-latest-date {
color: var(--tdn-muted) !important;
}
/*
* Section heading bars and labels
*
* The home page and some archive pages wrap group headings such as
* "More Headlines" and "Recent News" inside a .section-heading-bar
* container. By default the theme gives these bars a light background
* or border which stands out against a dark page. In dark mode we
* darken the bar and colour the text using the red accent. This ensures
* section headers remain legible without creating a jarring light band.
*/
/*
* Section heading bars on the home page
*
* Match the appearance of the category tags used beneath posts on
* archive pages by using the red accent colour for the bar itself
* with white uppercase text. This helps unify the design language
* across sections and draws the reader’s eye to the heading without
* introducing a separate dark panel. Border radius and padding are
* set to echo the tag styling from the child theme.
*/
html[data-theme="dark"] .section-heading-bar {
background-color: var(--tdn-red) !important;
border: none !important;
padding: 0.35rem 0.75rem !important;
border-radius: 2px !important;
}
html[data-theme="dark"] .section-heading-bar .section-label {
color: #ffffff !important;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.9rem;
}
/* Card categories and meta lines in headline and recent grids */
html[data-theme="dark"] .card-category,
html[data-theme="dark"] .more-headline-card .card-category,
html[data-theme="dark"] .recent-card .card-category {
background-color: var(--tdn-red) !important;
color: #ffffff !important;
padding: 0.15rem 0.4rem !important;
border-radius: 3px !important;
font-size: 0.7rem !important;
text-transform: uppercase;
}
/* Meta text for cards in more headlines and recent news sections */
html[data-theme="dark"] .more-headline-meta,
html[data-theme="dark"] .recent-card-meta,
html[data-theme="dark"] .more-headline-card .meta,
html[data-theme="dark"] .recent-card .meta {
color: var(--tdn-muted) !important;
}
/* Hero caption readability on dark backgrounds */
html[data-theme="dark"] .entry-image-caption--hero {
color: #ffffff !important;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.8),
rgba(0, 0, 0, 0.4),
transparent
) !important;
}
/* Footer styling */
html[data-theme="dark"] .site-footer {
background-color: var(--tdn-bg-soft) !important;
color: var(--tdn-muted) !important;
border-top: 1px solid var(--tdn-border) !important;
}
html[data-theme="dark"] .site-footer a {
color: var(--tdn-text) !important;
}
/* Search form styling */
html[data-theme="dark"] .search-field {
background-color: var(--tdn-bg-soft) !important;
border-color: var(--tdn-border) !important;
color: var(--tdn-text) !important;
}
html[data-theme="dark"] .search-submit {
background-color: var(--tdn-red) !important;
color: #ffffff !important;
}
/* Toggle button styling */
#tdn-dark-mode-toggle {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 1rem;
right: 1rem;
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
cursor: pointer;
z-index: 9999;
background-color: var(--tdn-red);
color: #fff;
transition: background-color 0.2s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#tdn-dark-mode-toggle:hover {
background-color: var(--tdn-red-dark);
}
#tdn-dark-mode-toggle .tdn-dark-mode-icon {
width: 24px;
height: 24px;
display: block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* Icon for light vs dark state: change via class */
html[data-theme="light"] #tdn-dark-mode-toggle .tdn-dark-mode-icon {
/* sun icon using inline SVG data URI */
background-image: url('data:image/svg+xml;utf8,');
}
html[data-theme="dark"] #tdn-dark-mode-toggle .tdn-dark-mode-icon {
/* moon icon */
background-image: url('data:image/svg+xml;utf8,');
}
/* Ensure images in cards remain unaffected but have rounded corners in dark mode */
html[data-theme="dark"] .more-headline-thumb img,
html[data-theme="dark"] .recent-grid article img,
html[data-theme="dark"] .frv-footer-spotlight img {
border-radius: 4px;
}
/*
* Invert the site logo when dark mode is active. This uses CSS filters to
* reverse the colours of the logo image so that it remains visible against the
* dark background without requiring a separate dark logo asset. You may
* replace the filter with your own dark logo via CSS or child theme if a
* dedicated dark version exists.
*/
html[data-theme="dark"] .custom-logo img,
html[data-theme="dark"] .site-logo img {
filter: invert(1) hue-rotate(180deg) brightness(1.2) contrast(1.2);
}
/*
* Jetpack sharing buttons. Jetpack outputs a UL with the class
* `jetpack-sharing-buttons__services-list`. We darken the optional
* background container and ensure the share icons/text contrast
* correctly. These selectors are intentionally broad to cover
* variations in class names used by Jetpack.
*/
html[data-theme="dark"] .jetpack-sharing-buttons__services-list,
html[data-theme="dark"] .jetpack-sharing-buttons__services-list.has-background {
background-color: var(--tdn-bg-soft) !important;
border: 1px solid var(--border-color) !important;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
}
html[data-theme="dark"] .jetpack-sharing-buttons__services-list a {
color: var(--tdn-text) !important;
margin-right: 0.5rem;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
transition: background-color 0.2s ease, color 0.2s ease;
}
html[data-theme="dark"] .jetpack-sharing-buttons__services-list a:hover,
html[data-theme="dark"] .jetpack-sharing-buttons__services-list a:focus {
background-color: var(--tdn-red) !important;
color: #ffffff !important;
}
/*
* Form elements (comment forms, search inputs, etc.). Set dark
* backgrounds, light text and muted borders for all input fields,
* textareas and selects. Avoid affecting inputs within the admin bar.
*/
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
background-color: var(--tdn-bg-soft) !important;
color: var(--tdn-text) !important;
border: 1px solid var(--border-color) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
color: var(--tdn-muted) !important;
}
/*
* Theme choice overlay
*
* The overlay covers the entire viewport when the site loads for the
* first time and no theme preference has been stored. It fades in
* using a transition on the opacity property. When the user picks
* light or dark mode the overlay fades out and is removed from the
* DOM. The variables have fallbacks to ensure reasonable colours
* even if CSS custom properties are not yet available in the light
* theme.
*/
#tdn-theme-prompt {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
#tdn-theme-prompt.show {
opacity: 1;
visibility: visible;
}
#tdn-theme-prompt .tdn-theme-prompt-content {
background-color: var(--tdn-bg-soft, #1d1d1d);
color: var(--tdn-text, #ffffff);
padding: 2rem 2.5rem;
border-radius: 8px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
max-width: 90%;
}
#tdn-theme-prompt .tdn-theme-prompt-heading {
margin-top: 0;
margin-bottom: 0.5rem;
font-size: 1.5rem;
color: var(--tdn-text, #ffffff);
}
#tdn-theme-prompt .tdn-theme-prompt-text {
margin: 0 0 1rem;
font-size: 1rem;
color: var(--tdn-muted, #cccccc);
}
#tdn-theme-prompt .tdn-theme-prompt-buttons {
display: flex;
justify-content: center;
gap: 1rem;
}
#tdn-theme-prompt .tdn-theme-prompt-buttons button {
padding: 0.5rem 1.5rem;
font-size: 1rem;
border: 1px solid var(--border-color, #444444);
background-color: var(--tdn-bg, #121212);
color: var(--tdn-text, #ffffff);
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
#tdn-theme-prompt .tdn-theme-prompt-buttons button:hover {
background-color: var(--tdn-red, #e54766);
color: #ffffff;
}
/*
* Archive and category pages
*
* Category and date archives output lists of posts as .recent-card articles
* within an .archive-grid and display a heading via .archive-title. These
* styles ensure the cards and header are consistent with the dark palette.
*/
html[data-theme="dark"] .archive-header {
border-bottom: 1px solid var(--tdn-border) !important;
margin-bottom: 2rem;
}
html[data-theme="dark"] .archive-title {
color: var(--tdn-text) !important;
}
html[data-theme="dark"] .archive-title span {
color: var(--tdn-red) !important;
}
html[data-theme="dark"] .recent-card {
background-color: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
color: var(--body-color) !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
border-radius: 4px !important;
}
html[data-theme="dark"] .recent-card .recent-card-body,
html[data-theme="dark"] .recent-card .recent-card-title,
html[data-theme="dark"] .recent-card .recent-card-excerpt {
color: var(--body-color) !important;
}
html[data-theme="dark"] .recent-card .recent-card-title a {
color: var(--heading-color) !important;
}
html[data-theme="dark"] .recent-card .recent-card-title a:hover {
color: var(--tdn-red) !important;
}