From 4d5be0b458154b83122a0e2ce5d382801fa1f000 Mon Sep 17 00:00:00 2001
From: NGUYEN DINH Quoc-Huy <quochuy@gmail.com>
Date: Fri, 16 Apr 2021 19:06:06 +1000
Subject: [PATCH] Custom CSS for highlightjs styles to support nightmode
---
src/app/assets/stylesheets/_themes.scss | 6 +
src/app/assets/stylesheets/markdown.scss | 8 +-
src/app/components/all.scss | 1 +
src/app/components/cards/PostFull-code.scss | 153 ++++++++++++++++++++
src/app/components/cards/PostFull.jsx | 1 -
5 files changed, 166 insertions(+), 3 deletions(-)
create mode 100644 src/app/components/cards/PostFull-code.scss
diff --git a/src/app/assets/stylesheets/_themes.scss b/src/app/assets/stylesheets/_themes.scss
index 7478604ec..8a071012f 100755
--- a/src/app/assets/stylesheets/_themes.scss
+++ b/src/app/assets/stylesheets/_themes.scss
@@ -39,6 +39,8 @@ $themes: (
buttonBoxShadow: $color-transparent,
modalBackgroundColor: $color-background-almost-white,
modalTextColorPrimary: $color-text-dark,
+ htmlhtmlCodeColor: #333333,
+ htmlhtmlCodeBackgroundColor: #f4f4f4,
),
light: (
colorAccent: $color-hive-red,
@@ -81,6 +83,8 @@ $themes: (
buttonBoxShadowHover: $color-hive-black,
modalBackgroundColor: $color-white,
modalTextColorPrimary: $color-text-dark,
+ htmlCodeColor: #333333,
+ htmlCodeBackgroundColor: #f4f4f4,
),
dark: (
colorAccent: $color-hive-red,
@@ -124,6 +128,8 @@ $themes: (
inputPriceWarning: rgba(255, 153, 0, 0.83),
modalBackgroundColor: $color-background-dark,
modalTextColorPrimary: $color-text-white,
+ htmlCodeColor: #c5c8c6,
+ htmlCodeBackgroundColor: #1d1f21,
),
);
diff --git a/src/app/assets/stylesheets/markdown.scss b/src/app/assets/stylesheets/markdown.scss
index 606455d17..a0f53feb9 100644
--- a/src/app/assets/stylesheets/markdown.scss
+++ b/src/app/assets/stylesheets/markdown.scss
@@ -59,12 +59,16 @@
code {
padding: 0.2rem;
- font-size: 85%;
+ font-size: 0.90rem;
+ line-height: 1.2rem;
border-radius: 3px;
border: none;
- background-color: #F4F4F4;
font-weight: inherit;
overflow: scroll;
+ @include themify($themes) {
+ color: themed('htmlCodeColor');
+ background-color: themed('htmlCodeBackgroundColor');
+ }
}
pre > code {
diff --git a/src/app/components/all.scss b/src/app/components/all.scss
index 57d31ae66..03138c1cf 100644
--- a/src/app/components/all.scss
+++ b/src/app/components/all.scss
@@ -6,6 +6,7 @@
@import "./cards/MarkdownViewer";
@import "./cards/PostSummary";
@import "./cards/PostFull";
+@import "./cards/PostFull-code";
@import "./cards/PostsList";
@import "./cards/NotificationsList";
diff --git a/src/app/components/cards/PostFull-code.scss b/src/app/components/cards/PostFull-code.scss
new file mode 100644
index 000000000..35df55047
--- /dev/null
+++ b/src/app/components/cards/PostFull-code.scss
@@ -0,0 +1,153 @@
+.theme-light {
+ /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+
+ /* Tomorrow Comment */
+ .hljs-comment,
+ .hljs-quote {
+ color: #8e908c;
+ }
+
+ /* Tomorrow Red */
+ .hljs-variable,
+ .hljs-template-variable,
+ .hljs-tag,
+ .hljs-name,
+ .hljs-selector-id,
+ .hljs-selector-class,
+ .hljs-regexp,
+ .hljs-deletion {
+ color: #c82829;
+ }
+
+ /* Tomorrow Orange */
+ .hljs-number,
+ .hljs-built_in,
+ .hljs-builtin-name,
+ .hljs-literal,
+ .hljs-type,
+ .hljs-params,
+ .hljs-meta,
+ .hljs-link {
+ color: #f5871f;
+ }
+
+ /* Tomorrow Yellow */
+ .hljs-attribute {
+ color: #eab700;
+ }
+
+ /* Tomorrow Green */
+ .hljs-string,
+ .hljs-symbol,
+ .hljs-bullet,
+ .hljs-addition {
+ color: #718c00;
+ }
+
+ /* Tomorrow Blue */
+ .hljs-title,
+ .hljs-section {
+ color: #4271ae;
+ }
+
+ /* Tomorrow Purple */
+ .hljs-keyword,
+ .hljs-selector-tag {
+ color: #8959a8;
+ }
+
+ .hljs {
+ display: block;
+ overflow-x: auto;
+ background: white;
+ color: #4d4d4c;
+ padding: 0.5em;
+ }
+
+ .hljs-emphasis {
+ font-style: italic;
+ }
+
+ .hljs-strong {
+ font-weight: bold;
+ }
+
+}
+
+.theme-dark {
+ /* Tomorrow Night Theme */
+ /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+ /* Original theme - https://github.com/chriskempson/tomorrow-theme */
+ /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+
+ /* Tomorrow Comment */
+ .hljs-comment,
+ .hljs-quote {
+ color: #969896;
+ }
+
+ /* Tomorrow Red */
+ .hljs-variable,
+ .hljs-template-variable,
+ .hljs-tag,
+ .hljs-name,
+ .hljs-selector-id,
+ .hljs-selector-class,
+ .hljs-regexp,
+ .hljs-deletion {
+ color: #cc6666;
+ }
+
+ /* Tomorrow Orange */
+ .hljs-number,
+ .hljs-built_in,
+ .hljs-builtin-name,
+ .hljs-literal,
+ .hljs-type,
+ .hljs-params,
+ .hljs-meta,
+ .hljs-link {
+ color: #de935f;
+ }
+
+ /* Tomorrow Yellow */
+ .hljs-attribute {
+ color: #f0c674;
+ }
+
+ /* Tomorrow Green */
+ .hljs-string,
+ .hljs-symbol,
+ .hljs-bullet,
+ .hljs-addition {
+ color: #b5bd68;
+ }
+
+ /* Tomorrow Blue */
+ .hljs-title,
+ .hljs-section {
+ color: #81a2be;
+ }
+
+ /* Tomorrow Purple */
+ .hljs-keyword,
+ .hljs-selector-tag {
+ color: #b294bb;
+ }
+
+ .hljs {
+ display: block;
+ overflow-x: auto;
+ background: #1d1f21;
+ color: #c5c8c6;
+ padding: 0.5em;
+ }
+
+ .hljs-emphasis {
+ font-style: italic;
+ }
+
+ .hljs-strong {
+ font-weight: bold;
+ }
+}
diff --git a/src/app/components/cards/PostFull.jsx b/src/app/components/cards/PostFull.jsx
index 313a384cf..940b4bcc8 100644
--- a/src/app/components/cards/PostFull.jsx
+++ b/src/app/components/cards/PostFull.jsx
@@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router';
-import 'highlight.js/styles/tomorrow.css';
import TimeAgoWrapper from 'app/components/elements/TimeAgoWrapper';
import Icon from 'app/components/elements/Icon';
import { connect } from 'react-redux';
--
GitLab