Changes theme and adds new theme options

gatsby-browser.js

@@ -5,9 +5,12 @@ import "typeface-merriweather"
 import "./src/normalize.css"
 // custom CSS styles
 import "./src/style.scss"
+import "./src/prism-synthwave84.css"
+//import "./src/prism-duotone-sea.css"
+//import "./src/prism-holi-theme.css"
 
 // Highlighting for code blocks
-import "prismjs/themes/prism.css"
+//import "prismjs/themes/prism.css"
 
 // font
 import "typeface-barlow";

src/prism-duotone-sea.css

@@ -0,0 +1,172 @@
+/*
+Name: Duotone Sea
+Author: by Simurai, adapted from DuoTone themes by Simurai for Atom (http:https://simurai.com/projects/2016/01/01/duotone-themes)
+
+Conversion: Bram de Haan (http:https://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-sea-dark.css)
+Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
+*/
+
+code[class*="language-"],
+pre[class*="language-"] {
+ font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+ font-size: 14px;
+ line-height: 1.375;
+ direction: ltr;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+ background: #1d262f;
+ color: #57718e;
+}
+
+pre > code[class*="language-"] {
+ font-size: 1em;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+ text-shadow: none;
+ background: #004a9e;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+ text-shadow: none;
+ background: #004a9e;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+ padding: 1em;
+ margin: .5em 0;
+ overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+ padding: .1em;
+ border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: #4a5f78;
+}
+
+.token.punctuation {
+ color: #4a5f78;
+}
+
+.token.namespace {
+ opacity: .7;
+}
+
+.token.tag,
+.token.operator,
+.token.number {
+ color: #0aa370;
+}
+
+.token.property,
+.token.function {
+ color: #57718e;
+}
+
+.token.tag-id,
+.token.selector,
+.token.atrule-id {
+ color: #ebf4ff;
+}
+
+code.language-javascript,
+.token.attr-name {
+ color: #7eb6f6;
+}
+
+code.language-css,
+code.language-scss,
+.token.boolean,
+.token.string,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.language-scss .token.string,
+.style .token.string,
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit,
+.token.statement,
+.token.regex,
+.token.atrule {
+ color: #47ebb4;
+}
+
+.token.placeholder,
+.token.variable {
+ color: #47ebb4;
+}
+
+.token.deleted {
+ text-decoration: line-through;
+}
+
+.token.inserted {
+ border-bottom: 1px dotted #ebf4ff;
+ text-decoration: none;
+}
+
+.token.italic {
+ font-style: italic;
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+
+.token.important {
+ color: #7eb6f6;
+}
+
+.token.entity {
+ cursor: help;
+}
+
+pre > code.highlight {
+ outline: .4em solid #34659d;
+ outline-offset: .4em;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http:https://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers.line-numbers .line-numbers-rows {
+ border-right-color: #1f2932;
+}
+
+.line-numbers .line-numbers-rows > span:before {
+ color: #2c3847;
+}
+
+/* overrides color-values for the Line Highlight plugin
+* http:https://prismjs.com/plugins/line-highlight/
+*/
+.line-highlight.line-highlight {
+ background: rgba(10, 163, 112, 0.2);
+ background: -webkit-linear-gradient(left, rgba(10, 163, 112, 0.2) 70%, rgba(10, 163, 112, 0));
+ background: linear-gradient(to right, rgba(10, 163, 112, 0.2) 70%, rgba(10, 163, 112, 0));
+}

src/prism-holi-theme.css

@@ -0,0 +1,119 @@
+/**
+ * MIT License
+ * Copyright (c) 2021 Ayush Saini
+ * Holi Theme for prism.js
+ * @author Ayush Saini <@AyushCodes on Twitter>
+ */
+
+code[class*='language-'],
+pre[class*='language-'] {
+ color: #d6e7ff;
+ background: #030314;
+ text-shadow: none;
+ font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+ font-size: 1em;
+ line-height: 1.5;
+ letter-spacing: .2px;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ text-align: left;
+
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection,
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+ color: inherit;
+ background: #1d3b54;
+ text-shadow: none;
+}
+
+pre[class*='language-'] {
+ border: 1px solid #2a4555;
+ border-radius: 5px;
+ padding: 1.5em 1em;
+ margin: 1em 0;
+ overflow: auto;
+}
+
+:not(pre) > code[class*='language-'] {
+ color: #f0f6f6;
+ background: #2a4555;
+ padding: 0.2em 0.3em;
+ border-radius: 0.2em;
+ box-decoration-break: clone;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: #446e69;
+}
+
+.token.punctuation {
+ color: #d6b007;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+ color: #d6e7ff;
+}
+
+.token.selector,
+.token.attr-name,
+.token.builtin,
+.token.inserted {
+ color: #e60067;
+}
+
+.token.string,
+.token.char {
+ color: #49c6ec;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+ color: #ec8e01;
+ background: transparent;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+ color: #0fe468;
+}
+
+.token.function,
+.token.class-name {
+ color: #78f3e9;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+ color: #d6e7ff;
+}