/** * @file * Per-blog accent variants. * * field_blog_theme on the user account picks one of eleven colour schemes; 17 * accounts use one. FiveNineteen implemented each as a duplicated block of * rules (~600 lines). Here each variant only restates the tokens it changes. * * The class is added to by fivetwentysix_preprocess_html(). */ .blog-theme--orange, .blog-theme--orange-and-light-green { --accent: #e65100; --accent-contrast: #fff; --header-bg: #e65100; --footer-bg: #e65100; --link: #bf4300; --link-hover: #7f2c00; } .blog-theme--orange-and-light-green { --sidebar-bg: #f1f8e9; --sidebar-heading: #33691e; } .blog-theme--light-green { --accent: #689f38; --accent-contrast: #fff; --header-bg: #33691e; --footer-bg: #33691e; --sidebar-bg: #f1f8e9; --sidebar-heading: #33691e; --link: #33691e; --link-hover: #1b3a10; } .blog-theme--blue { --accent: #1565c0; --accent-contrast: #fff; --header-bg: #0d47a1; --footer-bg: #0d47a1; --sidebar-bg: #e8f0fe; --sidebar-heading: #0d47a1; --link: #0d47a1; --link-hover: #062a60; } .blog-theme--blue-grey { --accent: #546e7a; --accent-contrast: #fff; --header-bg: #37474f; --footer-bg: #37474f; --sidebar-bg: #eceff1; --sidebar-heading: #263238; --link: #37474f; --link-hover: #1c262b; } .blog-theme--grey { --accent: var(--grey-600); --accent-contrast: #fff; } .blog-theme--pink { --accent: #c2185b; --accent-contrast: #fff; --header-bg: #880e4f; --footer-bg: #880e4f; --sidebar-bg: #fce4ec; --sidebar-heading: #880e4f; --link: #880e4f; --link-hover: #4d0a2d; } .blog-theme--purple { --accent: #6a1b9a; --accent-contrast: #fff; --header-bg: #4a148c; --footer-bg: #4a148c; --sidebar-bg: #f3e5f5; --sidebar-heading: #4a148c; --link: #4a148c; --link-hover: #2b0c51; } .blog-theme--default, .blog-theme--teal, .blog-theme--teal-flourish { --accent: #00796b; --accent-contrast: #fff; --header-bg: #004d40; --footer-bg: #004d40; --sidebar-bg: #e0f2f1; --sidebar-heading: #004d40; --link: #00695c; --link-hover: #003d33; } .blog-theme--red-flourish { --accent: #941e22; --accent-contrast: #fff; --header-bg: #7f1a1d; --footer-bg: #7f1a1d; --sidebar-bg: #fdecec; --sidebar-heading: #7f1a1d; --link: #941e22; --link-hover: #5c1315; } /* The two "flourish" schemes added a decorative rule under block titles. */ .blog-theme--teal-flourish .page-sidebar .block__title, .blog-theme--red-flourish .page-sidebar .block__title { border-block-end-width: 3px; border-block-end-style: double; } /* In dark mode the accent stays but the chrome follows the dark surface, so a light blog scheme cannot punch a white hole in a dark page. */ @media (prefers-color-scheme: dark) { :root:not([data-color-scheme="light"]) [class*="blog-theme--"] { --header-bg: #101214; --footer-bg: #101214; --sidebar-bg: var(--surface-sunken); --sidebar-heading: var(--text-strong); --link: #b9c2c9; --link-hover: #fff; } }