diff --git a/resources/skins/solarized-dark/html_adblocked.html b/resources/skins/solarized-dark/html_adblocked.html new file mode 100644 index 000000000..b82730e92 --- /dev/null +++ b/resources/skins/solarized-dark/html_adblocked.html @@ -0,0 +1,4 @@ +
+

Error: %1

+
%2
+
diff --git a/resources/skins/solarized-dark/html_enclosure_every.html b/resources/skins/solarized-dark/html_enclosure_every.html new file mode 100644 index 000000000..21386fd63 --- /dev/null +++ b/resources/skins/solarized-dark/html_enclosure_every.html @@ -0,0 +1 @@ + / %2 \ No newline at end of file diff --git a/resources/skins/solarized-dark/html_enclosure_image.html b/resources/skins/solarized-dark/html_enclosure_image.html new file mode 100644 index 000000000..e049442a3 --- /dev/null +++ b/resources/skins/solarized-dark/html_enclosure_image.html @@ -0,0 +1,5 @@ + + %2 + \ No newline at end of file diff --git a/resources/skins/solarized-dark/html_single_message.html b/resources/skins/solarized-dark/html_single_message.html new file mode 100644 index 000000000..7aa4c3e5d --- /dev/null +++ b/resources/skins/solarized-dark/html_single_message.html @@ -0,0 +1,16 @@ +
+ +
+
%7
+ %2 +

%1%6 / URL

+ %5 +
+ +
+ +
+ %4 +
+ +
\ No newline at end of file diff --git a/resources/skins/solarized-dark/html_style.css b/resources/skins/solarized-dark/html_style.css new file mode 100644 index 000000000..0f019d934 --- /dev/null +++ b/resources/skins/solarized-dark/html_style.css @@ -0,0 +1,393 @@ +@charset "UTF-8"; +* { + font-family: inherit; + font-size: inherit; } + +body, h1, h2, h3, h4, h5, h6, +p, blockquote, pre, hr, +dl, dd, ol, ul, figure { + margin: 0; + padding: 0; } + +body { + background-color: #2F3134; + box-sizing: border-box; + color: #f5f5f5; + -webkit-text-size-adjust: 100%; + -webkit-font-feature-settings: "kern" 1; + font-feature-settings: "kern" 1; + font-kerning: normal; + padding: 10px !important; + min-height: 100vh; } + +::selection { + background-color: #647595; + text-shadow: none; } + +h1, h2, h3, h4, h5, h6, +p, blockquote, pre, +ul, ol, dl, figure, +details { + margin-bottom: 10px; } + +hr { + background-color: #545556; + border: none; + display: block; + height: 2px; + margin: 10px 0; } + +h1, h2, h3, h4, h5, h6 { + font-weight: 600 !important; } + +h1 { + font-size: 1.25rem !important; } + +h2 { + font-size: 1.20rem !important; } + +h3 { + font-size: 1.15rem !important; } + +h4 { + font-size: 1.1rem !important; } + +h5 { + font-size: 1rem !important; } + +h6 { + font-size: .95rem !important; } + +b { + font-weight: bold !important; } + +i { + font-style: italic !important; } + +strong { + font-weight: 800 !important; } + +em { + font-style: oblique !important; } + +mark { + background-color: #f8d08c66; } + +sub, +sup { + font-size: .8rem !important; } + +small { + font-size: .9rem !important; } + +abbr { + cursor: help; + font-style: italic !important; + font-weight: 100 !important; } + +q { + font-style: italic !important; } + q::before { + content: '“'; } + q::after { + content: '”'; } + +time { + font-weight: 450 !important; } + +var { + font-style: oblique !important; + font-weight: 500 !important; } + +a { + color: #647595; } + a:hover { + text-decoration: none; } + a:focus { + box-shadow: none; + outline: none; } + +cite { + font-style: italic !important; + font-weight: bold !important; } + +figure { + max-width: 100%; } + +figure > img { + display: block; } + +figcaption { + font-size: .8rem !important; } + +blockquote { + border-left: 0.3em solid #545556; + margin-left: 0; + padding: 0 10px; } + blockquote, + blockquote p { + color: #E2E2E2; } + +pre, +code { + border: 1px solid #222325; + border-radius: 0.3em; + color: #E2E2E2; + font-family: monospace; + font-size: .95rem !important; } + +code { + background-color: rgba(33, 35, 39, 0.4); + padding: 0 .25em; + word-break: break-word; } + +pre { + background-color: rgba(33, 35, 39, 0.4); + overflow-x: auto; + padding: 7px 13px; + tab-size: 2; + white-space: pre !important; + width: unset !important; } + pre > code { + background-color: unset; + border: none; + color: unset; + padding-right: 0; + padding-left: 0; + tab-size: 2; } + +kbd { + background: rgba(33, 35, 39, 0.4); + border: 1px solid #222325; + border-bottom: 3px solid #1b1c1d; + border-radius: 0.3em; + box-shadow: 0 2px 4px #202224, inset 0 1px #2F3134; + font-size: .9rem !important; + padding: .1em .4em .2em .4em; } + +select { + background-color: rgba(33, 35, 39, 0.4); + border: 1px solid #222325; + border-radius: 0.3em; + color: #f5f5f5; + padding: .04em .25em; + width: 100%; } + select:focus { + box-shadow: none; + outline: none; + background-color: #2F3134; } + select > option { + background-color: #2F3134; } + +table { + border-collapse: collapse; + width: 100% !important; } + +li { + display: list-item; } + +ul, +ol { + padding-left: 1.5em; } + +ul { + list-style-type: disc; } + ul li ul { + list-style-type: square; } + +ol { + list-style-type: decimal; } + ol li ol { + list-style-type: lower-roman; } + +details { + border: 1px solid rgba(33, 35, 39, 0.4); + border-radius: 0.3em; + padding: .5em .5em 0; } + details > summary { + background-color: rgba(33, 35, 39, 0.4); + border-radius: 0.27em; + cursor: pointer; + margin: -.5em -.5em 0; + padding-left: .5em; } + details > summary:focus { + box-shadow: none; + outline: none; } + details *:last-child { + margin-bottom: 0; } + +details[open] { + border-color: #222325; + padding: .5em; } + details[open] > summary { + border-bottom: 1px solid #222325; + border-radius: 0.27em 0.27em 0 0; + margin-bottom: .5em; } + +iframe { + max-width: 100%; + height: auto; + width: auto; } + +a:focus, +select:focus, +summary:focus { + background-color: #222325; + text-shadow: 0 -1px #2F3134; } + +:target { + outline: 1px solid #647595; } + +.rssguard-mwrapper { + padding: 0px !important; } + .rssguard-mwrapper .rssguard-mhead .msmall, + .rssguard-mwrapper .rssguard-mhead .mlinks { + opacity: .8; } + .rssguard-mwrapper .rssguard-mhead > h1 { + margin: 0; } + .rssguard-mwrapper .rssguard-mhead .msmall { + font-size: .9em; } + .rssguard-mwrapper .rssguard-mhead .mlinks .menc { + word-break: break-word; } + .rssguard-mwrapper .rssguard-mhead .mlinks .mwrapurl { + display: inline-flex; } + .rssguard-mwrapper .rssguard-mhead .mlinks .mwrapurl a[href=""], .rssguard-mwrapper .rssguard-mhead .mlinks .mwrapurl a[href=""] + span { + display: none; } + @media only screen and (max-width: 800px) { + .rssguard-mwrapper img, .rssguard-mwrapper video { + max-width: 100% !important; } } + +.rssguard-mbody { + word-break: break-word; } + +table { + word-break: normal; } + +html::before, +html::after, +body::before, +body::after { + content: ""; + background-color: #222325; + display: block; + position: fixed; + z-index: 5; } + +html::before { + height: 1px; + left: 0; + right: 0; + top: 0; } + +html::after { + width: 1px; + top: 0; + right: 0; + bottom: 0; } + +body::before { + height: 1px; + right: 0; + bottom: 0; + left: 0; } + +body::after { + width: 1px; + top: 0; + bottom: 0; + left: 0; } + +::-webkit-scrollbar { + height: 13px; + width: 14px; } + +::-webkit-scrollbar-track, +::-webkit-scrollbar-corner { + background-color: #313235; + box-shadow: inset 1px 1px #2c2d30; } + +::-webkit-scrollbar-corner { + border-radius: 0 0 0.3em 0; } + +::-webkit-scrollbar-thumb { + box-shadow: inset 1px 1px #515258, inset -1px -1px #515258, inset 0px 1px #515258, inset 0px -1px #515258, inset 1px 0px #515258, inset 1px -1px #515258, inset -1px 0px #515258, inset -1px 1px #515258; } + ::-webkit-scrollbar-thumb:horizontal { + background-image: linear-gradient(#3b3c40 5%, #36373b); + min-width: 25px; } + ::-webkit-scrollbar-thumb:horizontal:hover { + background-image: linear-gradient(#3d3e43 25%, #36373b); } + ::-webkit-scrollbar-thumb:vertical { + background-image: linear-gradient(to right, #3b3c40 5%, #36373b); + min-height: 25px; } + ::-webkit-scrollbar-thumb:vertical:hover { + background-image: linear-gradient(to right, #3d3e43 25%, #36373b); } + ::-webkit-scrollbar-thumb:active { + background-image: linear-gradient(#36373b, #36373b) !important; } + +:not(body)::-webkit-scrollbar-thumb:horizontal { + box-shadow: inset 1px 1px #515258, inset -1px -1px #515258, inset 0px 1px #515258, inset 0px -1px #515258, inset 1px 0px #515258, inset 1px -1px #515258, inset -1px 0px #515258, inset -1px 1px #515258, 1px 0px #222325, 1px 1px #222325, -1px 1px #222325, -1px 0px #222325; } +:not(body)::-webkit-scrollbar-thumb:vertical { + box-shadow: inset 1px 1px #515258, inset -1px -1px #515258, inset 0px 1px #515258, inset 0px -1px #515258, inset 1px 0px #515258, inset 1px -1px #515258, inset -1px 0px #515258, inset -1px 1px #515258, 0px -1px #222325, 1px -1px #222325, 1px 1px #222325, 0px 1px #222325; } + +::-webkit-scrollbar-thumb:horizontal, +::-webkit-scrollbar-track:horizontal { + border-top: 1px solid #222325; } +::-webkit-scrollbar-thumb:vertical, +::-webkit-scrollbar-track:vertical { + border-left: 1px solid #222325; } + +body::-webkit-scrollbar-thumb:horizontal, body::-webkit-scrollbar-thumb:vertical, +body::-webkit-scrollbar-track:horizontal, +body::-webkit-scrollbar-track:vertical { + border: 1px solid #222325; } +body::-webkit-scrollbar-thumb:horizontal, +body::-webkit-scrollbar-track:horizontal { + border-top: none; } +body::-webkit-scrollbar-thumb:vertical, +body::-webkit-scrollbar-track:vertical { + border-left: none; } + +body::-webkit-scrollbar-corner { + border: 1px solid #222325; + border-top: none; + border-left: none; } + +::-webkit-scrollbar-track:corner-present:horizontal, +::-webkit-scrollbar-thumb:corner-present:horizontal { + border-radius: 0 0 0 0.3em; } +::-webkit-scrollbar-track:corner-present:vertical, +::-webkit-scrollbar-thumb:corner-present:vertical { + border-radius: 0 0.3em 0 0; } +::-webkit-scrollbar-track:horizontal, +::-webkit-scrollbar-thumb:horizontal { + border-radius: 0 0 0.3em 0.3em; } +::-webkit-scrollbar-track:vertical, +::-webkit-scrollbar-thumb:vertical { + border-radius: 0 0.3em 0.3em 0; } + +/* Please enable JS for additional colouring features */ +:root { + --rssguard-red: 0; + --rssguard-green: 0; + --rssguard-blue: 0; + --rssguard-threshold: 0.5; } + +:root { + --rssguard-r: calc(var(--rssguard-red) * 0.2126); + --rssguard-g: calc(var(--rssguard-green) * 0.7152); + --rssguard-b: calc(var(--rssguard-blue) * 0.0722); + --rssguard-sum: + calc( + var(--rssguard-r) + + var(--rssguard-g) + + var(--rssguard-b) + ); + --rssguard-perceived-lightness: calc(var(--rssguard-sum) / 255); } + +body, +::selection, +mark, code, pre, pre > code, +blockquote, blockquote p { + color: hsla(0, 0%, calc( ( var(--rssguard-perceived-lightness) - var(--rssguard-threshold) ) * -10000000% ), 0.9); } + +/*# sourceMappingURL=html_style.css.map */ diff --git a/resources/skins/solarized-dark/html_style.scss b/resources/skins/solarized-dark/html_style.scss new file mode 100644 index 000000000..481e2e3a7 --- /dev/null +++ b/resources/skins/solarized-dark/html_style.scss @@ -0,0 +1,309 @@ +@charset "utf-8"; + +$qtbg-base: #2F3134 !default; // clr_basbg +$qtbg-button: #2C2D30 !default; // clr_altbg // button bg (scrollbar, alt bg) +$qcselbg: #647595 !default; // clr_selbg + +// {{{ Emulate Fusion colour processing (dark only) + +// Scrollbar colours + +//$qcbgbg: lighten($qtbg-button, 6%); // See toolbar bg +$bgscroll: lighten($qtbg-button, 2%) !default; // track and corner bg +$tr-border: darken($qtbg-button, 4%) !default; // track brdr + +// {{{ Scrollbar thumb + +// Thumb bg gradient + +// Normal +$thscrlin: lighten($qtbg-button, 6%) !default; +$thscrlout: lighten($qtbg-button, 4%) !default; + +// Hover +$thscrlhvin: lighten($qtbg-button, 7%) !default; +$thscrlhvout: $thscrlout; + +// Light outline +$th-border: lighten($qtbg-button, 15%) !default; + +// }}} + +// }}} + +// {{{ HTML palette (Colours) + +$cbg00: $qtbg-base; + +// {{{ Irrelevant, because colour switcher (see below) overrides all fg colours (either with JS on or off) +$cfg00: #f5f5f5 !default; +$cfg10: #E2E2E2 !default; +$cfg11: $cfg10; +// }}} + +$cbor2: #545556 !default; + +$ccodeblock: rgba(33, 35, 39, 0.4) !default; +$ccode: $ccodeblock; +$cbor3: $tr-border; +$cmark: #f8d08c66 !default; // 40% transparency + +$clink: $qcselbg; + +// }}} + +// Other + +$radius-unit: .3em !default; + +@import + "../nudus-base/html_style_base" +; + +// +// Dark CSS style has following additions: +// + +// {{{ Border around viewport + +// https://csswizardry.com/2010/12/simplified-page-borders-in-pure-css/ + +html::before, +html::after, +body::before, +body::after { + content: ""; + background-color: $tr-border; + display: block; + position: fixed; + z-index: 5; +} + +html::before { + height: 1px; + left: 0; + right: 0; + top: 0; +} + +html::after { + width: 1px; + top: 0; + right: 0; + bottom: 0; +} + +body::before { + height: 1px; + right: 0; + bottom: 0; + left: 0; +} + +body::after { + width: 1px; + top: 0; + bottom: 0; + left: 0; +} + +// }}} + +// {{{ Dark-coloured scrollbar + +::-webkit-scrollbar { + height: 13px; + width: 14px; +} + +::-webkit-scrollbar-track, +::-webkit-scrollbar-corner { + background-color: $bgscroll; + box-shadow: inset 1px 1px lighten($tr-border, 4%); +} + +// Part where vertical and horizontal scrollbars meet +::-webkit-scrollbar-corner { + border-radius: 0 0 $radius-unit 0; +} + +// TODO: Can be simplified to @include and function +$th-outline: + inset 1px 1px $th-border, + inset -1px -1px $th-border, + + inset 0px 1px $th-border, + inset 0px -1px $th-border, + + inset 1px 0px $th-border, + inset 1px -1px $th-border, + + inset -1px 0px $th-border, + inset -1px 1px $th-border +; + +::-webkit-scrollbar-thumb { + $th-min-unit: 25px; + box-shadow: $th-outline; + + &:horizontal { + background-image: linear-gradient($thscrlin 5%, $thscrlout); + min-width: $th-min-unit; + + &:hover { + background-image: linear-gradient($thscrlhvin 25%, $thscrlhvout); + } + } + + &:vertical { + background-image: linear-gradient(to right, $thscrlin 5%, $thscrlout); + min-height: $th-min-unit; + + &:hover { + background-image: linear-gradient(to right, $thscrlhvin 25%, $thscrlhvout); + } + } + + &:active { + background-image: linear-gradient($thscrlout, $thscrlout) !important; + } +} + +// Light and dark borders to outline the thumb +// Clockwise (x y) +:not(body)::-webkit-scrollbar-thumb { + + &:horizontal { + box-shadow: + $th-outline, + 1px 0px $tr-border, + 1px 1px $tr-border, + -1px 1px $tr-border, + -1px 0px $tr-border + ; + } + + &:vertical { + box-shadow: + $th-outline, + 0px -1px $tr-border, + 1px -1px $tr-border, + 1px 1px $tr-border, + 0px 1px $tr-border + ; + } +} + +::-webkit-scrollbar-thumb, +::-webkit-scrollbar-track { + + &:horizontal { + border-top: 1px solid $tr-border; + } + + &:vertical { + border-left: 1px solid $tr-border; + } +} + +// Complete the borders for body scrollbar +body::-webkit-scrollbar-thumb, +body::-webkit-scrollbar-track { + + &:horizontal, + &:vertical { + border: 1px solid $tr-border; + } + + &:horizontal { + border-top: none; + } + + &:vertical { + border-left: none; + } +} + +body::-webkit-scrollbar-corner { + border: 1px solid $tr-border; + border-top: none; + border-left: none; +} + +::-webkit-scrollbar-track, +::-webkit-scrollbar-thumb { + + &:corner-present { + + &:horizontal { + border-radius: 0 0 0 $radius-unit; + } + + &:vertical { + border-radius: 0 $radius-unit 0 0; + } + } + + &:horizontal { + border-radius: 0 0 $radius-unit $radius-unit; + } + + &:vertical { + border-radius: 0 $radius-unit $radius-unit 0; + } +} + +// }}} + +// {{{ Fg colour switcher + +// Thank you so much!! +// https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/ + +/* Please enable JS for additional colouring features */ +:root { + // Default RGB values for background colour + --rssguard-red: 0; + --rssguard-green: 0; + --rssguard-blue: 0; + // The threshold at which colours are considered "light + // Range: decimals from 0 to 1, recommended 0.5 - 0.6 + --rssguard-threshold: 0.5; +} + +:root { + // Calculates perceived lightness using the sRGB Luma method + // Luma = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255 + --rssguard-r: calc(var(--rssguard-red) * 0.2126); + --rssguard-g: calc(var(--rssguard-green) * 0.7152); + --rssguard-b: calc(var(--rssguard-blue) * 0.0722); + --rssguard-sum: + calc( + var(--rssguard-r) + + var(--rssguard-g) + + var(--rssguard-b) + ); + --rssguard-perceived-lightness: calc(var(--rssguard-sum) / 255); +} + +// Shows either white or black colour depending on perceived lightness +body, +::selection, +mark, code, pre, pre > code, +blockquote, blockquote p { // TODO: why did not I add 'blockquote p' here before? + color: + hsla( + 0, + 0%, + calc( + ( + var(--rssguard-perceived-lightness) - + var(--rssguard-threshold) + ) * + -10000000% + ), + .9 + ); +} +// }}} +// vim:foldmethod=marker diff --git a/resources/skins/solarized-dark/html_style_base.scss b/resources/skins/solarized-dark/html_style_base.scss new file mode 100644 index 000000000..d8a9322a3 --- /dev/null +++ b/resources/skins/solarized-dark/html_style_base.scss @@ -0,0 +1,423 @@ +// ___________________________ +// < I'm an expert in my field. > +// --------------------------- +// \ ^__^ +// \ (oo)\_______ +// (__)\ )\/\ +// ||----w | +// || || + +// +// Variables +// + +$base-unit: 10px !default; + +// +// Styling +// + +// Let the font be customised via RSS Guard settings +* { + font-family: inherit; + font-size: inherit; +} + +// +// Reset some basic elements +// + +body, h1, h2, h3, h4, h5, h6, +p, blockquote, pre, hr, +dl, dd, ol, ul, figure { + margin: 0; + padding: 0; +} + +// +// Add some basic styling +// + +body { + background-color: $cbg00; + + box-sizing: border-box; + color: $cfg00; + //cursor: default; + -webkit-text-size-adjust: 100%; + -webkit-font-feature-settings: "kern" 1; + font-feature-settings: "kern" 1; + font-kerning: normal; + padding: 10px !important; + min-height: 100vh; +} + +::selection { + background-color: $clink; + text-shadow: none; +} + +h1, h2, h3, h4, h5, h6, +p, blockquote, pre, +ul, ol, dl, figure, +details { + margin-bottom: $base-unit; +} + +hr { + background-color: $cbor2; + border: none; + display: block; + height: 2px; + margin: $base-unit 0; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: 600 !important; +} + +h1 { font-size: 1.25rem !important; } +h2 { font-size: 1.20rem !important; } +h3 { font-size: 1.15rem !important; } +h4 { font-size: 1.1rem !important; } +h5 { font-size: 1rem !important; } +h6 { font-size: .95rem !important; } + +b { + font-weight: bold !important; +} + +i { + font-style: italic !important; +} + +strong { + font-weight: 800 !important; +} + +em { + font-style: oblique !important; +} + +mark { + background-color: $cmark; +} + +sub, +sup { + font-size: .8rem !important; +} + +small { + font-size: .9rem !important; +} + +abbr { + cursor: help; + font-style: italic !important; + font-weight: 100 !important; +} + +q { + font-style: italic !important; + + &::before { + content: '“'; + } + + &::after { + content: '”'; + } +} + +time { + font-weight: 450 !important; +} + +var { + font-style: oblique !important; + font-weight: 500 !important; +} + +a { + color: $clink; + + &:hover { + text-decoration: none; + } + + &:focus { + box-shadow: none; + outline: none; + } +} + +cite { + font-style: italic !important; + font-weight: bold !important; +} + +// override if width is defined in element's style attribute +figure { + max-width: 100%; +} + +figure > img { + display: block; +} + +figcaption { + font-size: .8rem !important; +} + +blockquote { + border-left: .3em solid $cbor2; + margin-left: 0; + padding: 0 $base-unit; + + &, + p { + color: $cfg11; + } +} + +pre, +code { + border: 1px solid $cbor3; + border-radius: $radius-unit; + color: $cfg10; + //cursor: text; + + // Font for code blocks falls back to system default monospace + font-family: monospace; + font-size: .95rem !important; +} + +code { + background-color: $ccode; + padding: 0 .25em; + word-break: break-word; +} + +pre { + background-color: $ccodeblock; + overflow-x: auto; + padding: 7px 13px; + tab-size: 2; + // For 
+    white-space: pre !important;
+
+    // For 
+    width: unset !important;
+
+    > code {
+        background-color: unset;
+        border: none;
+        color: unset;
+        padding-right: 0;
+        padding-left: 0;
+        tab-size: 2;
+    }
+}
+
+kbd {
+    background: $ccode;
+    border: 1px solid $cbor3;
+    border-bottom: 3px solid darken($cbor3, 3%);
+    border-radius: $radius-unit;
+    box-shadow:
+        0 2px 4px darken($cbg00, 6%),
+        inset 0 1px $cbg00
+    ;
+    font-size: .9rem !important;
+    padding: .1em .4em .2em .4em;
+}
+
+select {
+    background-color: $ccodeblock;
+    border: 1px solid $cbor3;
+    border-radius: $radius-unit;
+    color: $cfg00;
+    padding: .04em .25em;
+    // Do not use max-width here
+    width: 100%;
+
+    &:focus {
+        box-shadow: none;
+        outline: none;
+
+        background-color: $cbg00;
+    }
+
+    > option {
+        background-color: $cbg00;
+    }
+}
+
+table {
+    border-collapse: collapse;
+    // `!important` is set to override something like 
+    width: 100% !important;
+}
+
+// Return this if something goes wrong, and return the JS override for dark theme
+//table,
+//th,
+//td {
+//    color: $cfg00;
+//}
+
+li {
+    display: list-item;
+}
+
+ul,
+ol {
+    padding-left: 1.5em;
+}
+
+ul {
+    list-style-type: disc;
+
+    li ul {
+        list-style-type: square;
+    }
+}
+
+ol {
+    list-style-type: decimal;
+
+    li ol {
+        list-style-type: lower-roman;
+    }
+}
+
+img {
+    // Let the width be defined (see .rssguard-mbody img), but keep aspect ratio
+    //height: auto;
+    // `width auto` creates many problems even if set as a fallback
+    //width: auto;
+}
+
+details {
+    border: 1px solid $ccodeblock;
+    border-radius: $radius-unit;
+    padding: .5em .5em 0;
+
+    > summary {
+        background-color: $ccodeblock;
+        border-radius: $radius-unit * 0.9;
+        cursor: pointer;
+        margin: -.5em -.5em 0;
+        padding-left: .5em;
+
+        &:focus {
+            box-shadow: none;
+            outline: none;
+        }
+    }
+
+    & *:last-child {
+        margin-bottom: 0;
+    }
+}
+
+details[open] {
+    border-color: $cbor3;
+    padding: .5em;
+
+    > summary {
+        border-bottom: 1px solid $cbor3;
+        border-radius: ($radius-unit * 0.9) ($radius-unit * 0.9) 0 0;
+        margin-bottom: .5em;
+    }
+}
+
+iframe {
+    max-width: 100%;
+    height: auto;
+    width: auto;
+}
+
+a,
+select,
+summary {
+
+    &:focus {
+        background-color: $cbor3;
+        text-shadow: 0 -1px $cbg00;
+    }
+}
+
+:target {
+    outline: 1px solid $clink;
+}
+
+// m* == message*
+.rssguard-mwrapper {
+    padding: 0px !important;
+
+    .rssguard-mhead {
+
+        .msmall,
+        .mlinks {
+            opacity: .8;
+        }
+
+        > h1 {
+            margin: 0;
+        }
+
+        .msmall {
+            font-size: .9em;
+        }
+
+        .mlinks {
+
+            .menc {
+                word-break: break-word;
+            }
+
+            .mwrapurl {
+                display: inline-flex;
+
+                a[href=""] {
+
+                    &,
+                    & + span {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+
+    img, video {
+        // Needs to be `!important` when max-width is defined by image style
+        // alt
+        //max-width: 450px !important;
+        // For cases when they both are set
+        //max-height: unset !important;
+
+        @media only screen and (max-width: 800px) {
+            // `!important` to override `!important` that is set above
+            max-width: 100% !important;
+        }
+    }
+}
+
+//
+// Other
+//
+
+// For articles without any html elements;
+// If not applied to _all_, *must* be applied to links in mbody
+// mbody == article body
+.rssguard-mbody {
+    word-break: break-word;
+}
+
+// Fix at least some mess produced by above
+table {
+    word-break: normal;
+}
diff --git a/resources/skins/solarized-dark/html_wrapper.html b/resources/skins/solarized-dark/html_wrapper.html
new file mode 100644
index 000000000..e9f5b6666
--- /dev/null
+++ b/resources/skins/solarized-dark/html_wrapper.html
@@ -0,0 +1,29 @@
+
+
+
+%1
+
+
+
+
+
+
+%2
+
+
+
+
+
\ No newline at end of file
diff --git a/resources/skins/solarized-dark/lite_html_enclosure_every.html b/resources/skins/solarized-dark/lite_html_enclosure_every.html
new file mode 100644
index 000000000..cf7567733
--- /dev/null
+++ b/resources/skins/solarized-dark/lite_html_enclosure_every.html
@@ -0,0 +1 @@
+ / %2
\ No newline at end of file
diff --git a/resources/skins/solarized-dark/lite_html_enclosure_image.html b/resources/skins/solarized-dark/lite_html_enclosure_image.html
new file mode 100644
index 000000000..ece447112
--- /dev/null
+++ b/resources/skins/solarized-dark/lite_html_enclosure_image.html
@@ -0,0 +1,4 @@
+
+  %2
+
+

\ No newline at end of file
diff --git a/resources/skins/solarized-dark/lite_html_single_message.html b/resources/skins/solarized-dark/lite_html_single_message.html
new file mode 100644
index 000000000..ab85bb344
--- /dev/null
+++ b/resources/skins/solarized-dark/lite_html_single_message.html
@@ -0,0 +1,15 @@
+

+
+

+  
%7

+  %2
+  
%1%6 / URL

+  %5
+

+
+

+
+

+%4
+

+

\ No newline at end of file
diff --git a/resources/skins/solarized-dark/lite_html_style.css b/resources/skins/solarized-dark/lite_html_style.css
new file mode 100644
index 000000000..a64e7e5aa
--- /dev/null
+++ b/resources/skins/solarized-dark/lite_html_style.css
@@ -0,0 +1,25 @@
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+hr,
+dl,
+dd,
+ol,
+ul,
+figure {
+  margin: 0;
+  padding: 0; }
+
+body {
+  background-color: #2F3134;
+  color: #f5f5f5; }
+
+a {
+  color: #647595; }
diff --git a/resources/skins/solarized-dark/lite_html_style.scss b/resources/skins/solarized-dark/lite_html_style.scss
new file mode 100644
index 000000000..7ca73f03b
--- /dev/null
+++ b/resources/skins/solarized-dark/lite_html_style.scss
@@ -0,0 +1,7 @@
+@charset "utf-8";
+
+$col_back: #2F3134 !default;
+$col_front: #f5f5f5 !default;
+$col_link: #647595 !default;
+
+@import "../nudus-base/lite_html_style_base";
\ No newline at end of file
diff --git a/resources/skins/solarized-dark/lite_html_style_base.scss b/resources/skins/solarized-dark/lite_html_style_base.scss
new file mode 100644
index 000000000..ef4522001
--- /dev/null
+++ b/resources/skins/solarized-dark/lite_html_style_base.scss
@@ -0,0 +1,28 @@
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+hr,
+dl,
+dd,
+ol,
+ul,
+figure {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: $col_back;
+  color: $col_front;
+}
+
+a {
+  color: $col_link;
+}
\ No newline at end of file
diff --git a/resources/skins/solarized-dark/metadata.xml b/resources/skins/solarized-dark/metadata.xml
new file mode 100644
index 000000000..073e929f3
--- /dev/null
+++ b/resources/skins/solarized-dark/metadata.xml
@@ -0,0 +1,61 @@
+
+
+  
+    martinrotter
+  
+  Dark variation of solarized theme.
+
+  
+    #acc2c5
+    #acc2c5
+    #B58900
+    #B58900
+    #DC322F
+    #DC322F
+    #586e75
+    #859900
+  
+
+  Fusion
+  true
+  
+  
+    
+      #002b36
+      #073642
+      #586e75
+      #001f27
+      #586e75
+      #657b83
+      #073642
+      #839496
+      #d33682
+
+      #073642
+      #073642
+
+      #96aaac
+      #ffffff
+      #ffffff
+      #586e75
+      #96aaac
+      #ffffff
+      #96aaac
+      #268bd2
+      #6c71c4
+
+      #073642
+    
+
+    
+      #002b36
+      #001f27
+      #073642
+      #586e75
+      #586e75
+      #586e75
+      #d33682
+    
+
+
+
\ No newline at end of file
diff --git a/resources/skins/solarized-dark/qt_style.qss b/resources/skins/solarized-dark/qt_style.qss
new file mode 100644
index 000000000..2a963a3a0
--- /dev/null
+++ b/resources/skins/solarized-dark/qt_style.qss
@@ -0,0 +1,4 @@
+QProgressBar {
+    background-color: palette(highlight);
+    color: palette(window);
+}
\ No newline at end of file
diff --git a/resources/skins/solarized-dark/qt_style_forced.qss b/resources/skins/solarized-dark/qt_style_forced.qss
new file mode 100644
index 000000000..57152d57e
--- /dev/null
+++ b/resources/skins/solarized-dark/qt_style_forced.qss
@@ -0,0 +1,24 @@
+QListWidget,
+QScrollArea {
+    border: 1px solid palette(light);
+}
+
+
+QPlainTextEdit:focus {
+    border: 1px solid palette(highlight);
+}
+
+QToolTip {
+    background-color: palette(window);
+    color: palette(text);
+    border: 1px solid palette(highlight);
+    border-radius: 2px;
+}
+
+QSplitter::handle {
+    background: palette(light);
+}
+
+QStatusBar::item {
+    border: none;
+}
diff --git a/src/librssguard/core/messagesmodel.cpp b/src/librssguard/core/messagesmodel.cpp
index e16357c21..ed3a2656f 100644
--- a/src/librssguard/core/messagesmodel.cpp
+++ b/src/librssguard/core/messagesmodel.cpp
@@ -94,7 +94,7 @@ QIcon MessagesModel::generateUnreadIcon() {
   QPointF center(64, 64);
   qreal radius = 32;
 
-  QColor custom_clr = qApp->skins()->colorForModel(SkinEnums::PaletteColors::FgNewMessages).value();
+  QColor custom_clr = qApp->skins()->colorForModel(SkinEnums::PaletteColors::FgInteresting).value();
 
   if (!custom_clr.isValid()) {
     custom_clr = QColor(RAD_COLOR);
diff --git a/src/librssguard/miscellaneous/skinfactory.cpp b/src/librssguard/miscellaneous/skinfactory.cpp
index 35e0ac6ac..154572c95 100644
--- a/src/librssguard/miscellaneous/skinfactory.cpp
+++ b/src/librssguard/miscellaneous/skinfactory.cpp
@@ -63,34 +63,18 @@ bool SkinFactory::isStyleGoodForAlternativeStylePalette(const QString& style_nam
 // This is here because in Qt 6.5.0, they hardcoded
 // DARK palette if user has enabled "dark mode" in OS.
 QPalette qt_fusionPalette(bool dark_appearance) {
-  // Define Solarized dark and light colors
-  const QColor solarized_base03 = QColor(0, 43, 54);    // Dark background for Solarized dark
-  const QColor solarized_base2 = QColor(238, 232, 213); // Light background for Solarized light
-  const QColor solarized_yellow = QColor(181, 137, 0);
-  const QColor solarized_orange = QColor(203, 75, 22);
-  const QColor solarized_red = QColor(220, 50, 47);
-  const QColor solarized_magenta = QColor(211, 54, 130);
-  const QColor solarized_violet = QColor(108, 113, 196);
-  const QColor solarized_blue = QColor(38, 139, 210);
-  const QColor solarized_cyan = QColor(42, 161, 152);
-  const QColor solarized_green = QColor(133, 153, 0);
-
-  // Choose background and text colors based on appearance
-  const QColor background = dark_appearance ? solarized_base03 : solarized_base2;
-  const QColor window_text = dark_appearance ? QColor(131, 148, 150) : QColor(0, 43, 54); // Adjusted for contrast
-  const QColor text = window_text;
-
-  // Derive other colors
-  const QColor light_color = background.lighter(150);
-  const QColor middle_color = (background.darker(130));
-  const QColor middle_light_color = middle_color.lighter(110);
-  const QColor base = dark_appearance ? background.darker(140) : QColor(253, 246, 227); // Solarized base2 for light
-  const QColor disabled_base = background;
+  const QColor window_text = dark_appearance ? QColor(240, 240, 240) : Qt::black;
+  const QColor background = dark_appearance ? QColor(50, 50, 50) : QColor(239, 239, 239);
+  const QColor light = background.lighter(150);
+  const QColor mid = (background.darker(130));
+  const QColor midlight = mid.lighter(110);
+  const QColor base = dark_appearance ? background.darker(140) : Qt::white;
+  const QColor disabled_base(background);
   const QColor dark = background.darker(150);
   const QColor disabled_dark = QColor(209, 209, 209).darker(110);
-  const QColor highlight = dark_appearance ? solarized_magenta : solarized_yellow; // Example highlight
-  const QColor disabled_highlight = QColor(145, 145, 145);
-  const QColor highlighted_text = dark_appearance ? window_text : QColor(0, 43, 54);
+  const QColor text = dark_appearance ? window_text : Qt::black;
+  const QColor highlight = QColor(48, 140, 198);
+  const QColor hightlighted_text = dark_appearance ? window_text : Qt::white;
   const QColor disabled_text = dark_appearance ? QColor(130, 130, 130) : QColor(190, 190, 190);
   const QColor button = background;
   const QColor shadow = dark.darker(135);
@@ -99,11 +83,11 @@ QPalette qt_fusionPalette(bool dark_appearance) {
   QColor placeholder = text;
   placeholder.setAlpha(128);
 
-  QPalette fusion_palette(window_text, background, light_color, dark, middle_color, text, base);
-  fusion_palette.setBrush(QPalette::Midlight, middle_light_color);
+  QPalette fusion_palette(window_text, background, light, dark, mid, text, base);
+  fusion_palette.setBrush(QPalette::Midlight, midlight);
   fusion_palette.setBrush(QPalette::Button, button);
   fusion_palette.setBrush(QPalette::Shadow, shadow);
-  fusion_palette.setBrush(QPalette::HighlightedText, highlighted_text);
+  fusion_palette.setBrush(QPalette::HighlightedText, hightlighted_text);
 
   fusion_palette.setBrush(QPalette::Disabled, QPalette::Text, disabled_text);
   fusion_palette.setBrush(QPalette::Disabled, QPalette::WindowText, disabled_text);
@@ -114,7 +98,7 @@ QPalette qt_fusionPalette(bool dark_appearance) {
 
   fusion_palette.setBrush(QPalette::Active, QPalette::Highlight, highlight);
   fusion_palette.setBrush(QPalette::Inactive, QPalette::Highlight, highlight);
-  fusion_palette.setBrush(QPalette::Disabled, QPalette::Highlight, disabled_highlight);
+  fusion_palette.setBrush(QPalette::Disabled, QPalette::Highlight, QColor(145, 145, 145));
 
   fusion_palette.setBrush(QPalette::PlaceholderText, placeholder);
 
@@ -125,61 +109,6 @@ QPalette qt_fusionPalette(bool dark_appearance) {
   return fusion_palette;
 }
 
-/*
- * QPalette qt_fusionPalette(bool dark_appearance) {
-  // Define pastel and well-readable colors depending on appearance
-  const QColor window_text = dark_appearance ? QColor(200, 200, 200) : QColor(30, 30, 30);
-  const QColor background = dark_appearance ? QColor(40, 40, 50) : QColor(245, 245, 245);
-  const QColor light_color = background.lighter(150);
-  const QColor middle_color = background.darker(130);
-  const QColor middle_light_color = middle_color.lighter(110);
-  const QColor base = dark_appearance ? background.darker(140) : QColor(255, 255, 255);
-  const QColor disabled_base = background;
-  const QColor dark = background.darker(150);
-  const QColor disabled_dark = QColor(180, 180, 180).darker(110);
-
-// Pastel accent colors for highlights
-const QColor highlight = dark_appearance ? QColor(150, 200, 225) : QColor(100, 180, 220);
-const QColor disabled_highlight = QColor(180, 180, 180);
-const QColor highlighted_text = dark_appearance ? window_text : QColor(255, 255, 255);
-const QColor disabled_text = dark_appearance ? QColor(130, 130, 130) : QColor(180, 180, 180);
-const QColor button = background;
-const QColor shadow = dark.darker(135);
-const QColor disabled_shadow = shadow.lighter(150);
-
-// Placeholder with semi-transparent effect
-QColor placeholder = highlighted_text;
-placeholder.setAlpha(128);
-
-QPalette fusion_palette(window_text, background, light_color, dark, middle_color, highlighted_text, base);
-fusion_palette.setBrush(QPalette::Midlight, middle_light_color);
-fusion_palette.setBrush(QPalette::Button, button);
-fusion_palette.setBrush(QPalette::Shadow, shadow);
-fusion_palette.setBrush(QPalette::HighlightedText, highlighted_text);
-
-// Disabled states
-fusion_palette.setBrush(QPalette::Disabled, QPalette::Text, disabled_text);
-fusion_palette.setBrush(QPalette::Disabled, QPalette::WindowText, disabled_text);
-fusion_palette.setBrush(QPalette::Disabled, QPalette::ButtonText, disabled_text);
-fusion_palette.setBrush(QPalette::Disabled, QPalette::Base, disabled_base);
-fusion_palette.setBrush(QPalette::Disabled, QPalette::Dark, disabled_dark);
-fusion_palette.setBrush(QPalette::Disabled, QPalette::Shadow, disabled_shadow);
-
-// Highlight states
-fusion_palette.setBrush(QPalette::Active, QPalette::Highlight, highlight);
-fusion_palette.setBrush(QPalette::Inactive, QPalette::Highlight, highlight);
-fusion_palette.setBrush(QPalette::Disabled, QPalette::Highlight, disabled_highlight);
-
-// Placeholder text
-fusion_palette.setBrush(QPalette::PlaceholderText, placeholder);
-
-if (dark_appearance) {
- fusion_palette.setBrush(QPalette::Link, highlight);
-}
-
-return fusion_palette;
-}*/
-
 void SkinFactory::loadSkinFromData(const Skin& skin, bool replace_existing_qss) {
 #if QT_VERSION >= 0x060500 // Qt >= 6.5.0
   auto system_color_scheme = qApp->styleHints()->colorScheme();
@@ -261,7 +190,7 @@ void SkinFactory::loadSkinFromData(const Skin& skin, bool replace_existing_qss)
     // colors are now derived from system.
 #if QT_VERSION >= 0x060500 // Qt >= 6.5.0
     else /*if (qApp->styleHints()->colorScheme() == Qt::ColorScheme::Light)*/ {
-      qApp->setPalette(qt_fusionPalette(true));
+      qApp->setPalette(qt_fusionPalette(false));
     }
 #endif
   }