Skip to content

Commit

Permalink
Added Solarized Color Pallete Port for Prism as CSS Snippet
Browse files Browse the repository at this point in the history
  • Loading branch information
damiankorcz committed May 26, 2024
1 parent f830b0d commit 9e851e0
Showing 1 changed file with 135 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
/*
Solarized Color Pallete Port to the Prism Theme for Obsidian.md (Version: 1.0.0)
Port of the Solarized color pallete by Ethan Schoonover (https://ethanschoonover.com/solarized/)
Solarized is distributed under the MIT License: https://github.com/altercation/solarized/blob/master/LICENSE
The original colors have been converted to HSL. Inline comments refer to the color names used by Solarized
that have been used as-is. Anything else has been made from scratch trying to match them well since Prism
uses 3 shades per colour and has grey and mint colors.
Guide to use this Colour Scheme: https://github.com/damiankorcz/Prism-Theme/wiki/Creating-a-Custom-Colour-Scheme-CSS-Snippet
Theme Code is distributed under the MIT License.
See https://github.com/damiankorcz/Obsidian-Prism/blob/main/LICENSE for more information.
Copyright (c) 2021-2024 Damian Korcz <https://github.com/damiankorcz>
*/

.theme-light.pt-color-scheme-custom-lt {
/* The color variables below are comma separated HSL values. This format is necessary for using these
variables down the line in the theme and being able to create variants with varying alpha values (HSLA). */

/* Base colours are used for the backgrounds in the accented color areas. */
--color-grey-base-hsl: 0, 0%, 90%;
--color-red-base-hsl: 1.04, 71.19%, 90.35%;
--color-orange-base-hsl: 17.57, 73.44%, 89.12%;
--color-yellow-base-hsl: 45.41, 55%, 85.49%;
--color-green-base-hsl: 67.84, 45%, 85%;
--color-mint-base-hsl: 155.84, 41%, 87%;
--color-cyan-base-hsl: 175.46, 50.62%, 85.8%;
--color-blue-base-hsl: 204.77, 62.35%, 90.63%;
--color-purple-base-hsl: 236.59, 48.72%, 92.61%;
--color-pink-base-hsl: 330.96, 64.08%, 90.96%;

/* Tint colours are used for the borders in the accented color areas. */
--color-grey-tint-hsl: 0, 0%, 68%;
--color-red-tint-hsl: 1.04, 71.19%, 72.35%;
--color-orange-tint-hsl: 17.57, 73.44%, 64.12%;
--color-yellow-tint-hsl: 45.41, 55%, 52.49%;
--color-green-tint-hsl: 67.84, 40%, 50%;
--color-mint-tint-hsl: 155.84, 41%, 55%;
--color-cyan-tint-hsl: 175.46, 50.62%, 48.8%;
--color-blue-tint-hsl: 204.77, 62.35%, 65.63%;
--color-purple-tint-hsl: 236.59, 48.72%, 75.61%;
--color-pink-tint-hsl: 330.96, 64.08%, 71.96%;

/* Text colours are used for the Text in the accented color areas and other Text areas which use the theme colours.
e.g. Syntax Highlighting, Mark Highlight System, etc. */
--color-grey-text-hsl: 0, 0%, 46%;
--color-red-text-hsl: 1.04, 71.19%, 52.35%; /* red */
--color-orange-text-hsl: 17.57, 80.44%, 44.12%; /* orange */
--color-yellow-text-hsl: 45.41, 100%, 35.49%; /* yellow */
--color-green-text-hsl: 67.84, 100%, 30%; /* green */
--color-mint-text-hsl: 155.84, 100%, 30%;
--color-cyan-text-hsl: 175.46, 58.62%, 39.8%; /* cyan */
--color-blue-text-hsl: 204.77, 69.35%, 48.63%; /* blue */
--color-purple-text-hsl: 236.59, 42.72%, 59.61%; /* violet */
--color-pink-text-hsl: 330.96, 64.08%, 51.96%; /* magenta */

/* Default theme variable overwrites for different shades of text used in the editor and around the UI. */
--text-normal-hsl: 192.2, 80.82%, 14.31%; /* base02 */
--text-muted-hsl: 194.48, 14.15%, 40.2%; /* base01 */
--text-faint-hsl: 196, 12.93%, 45.49%; /* base01 */

/* Default theme variable overwrites for the UI background colours. */
--background-primary-hsl: 43.85, 86.67%, 94.12%; /* base3 */
--background-primary-alt-hsl: 45.6, 42.37%, 88.43%; /* base2 */
--background-secondary-hsl: 45.6, 42.37%, 88.43%; /* base2 */
--background-secondary-blur-hsl: 45.6, 42.37%, 89.43%; /* base2 but 1% darker to better match blur to normal background-secondary */
--background-secondary-alt-hsl: 180, 6.93%, 60.39%; /* base1 */

/* Default theme variable overwrites for shadows used on modals and popups. */
--shadow-color-hsl: 0, 0%, 0%;
--shadow-s: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px 0;
--shadow-l: hsla(var(--shadow-color-hsl), 3%) 0 1px 2px, hsla(var(--shadow-color-hsl), 3%) 0 2px 4px, hsla(var(--shadow-color-hsl), 3%) 0 4px 8px, hsla(var(--shadow-color-hsl), 3%) 0 6px 12px;
}

.theme-dark.pt-color-scheme-custom-dt {
/* The color variables below are comma separated HSL values. This format is necessary for using these
variables down the line in the theme and being able to create variants with varying alpha values (HSLA). */

/* Base colours are used for the backgrounds in the accented color areas. */
--color-grey-base-hsl: 0, 0%, 18%;
--color-red-base-hsl: 1.04, 62.19%, 16.35%;
--color-orange-base-hsl: 17.57, 80.44%, 13.12%;
--color-yellow-base-hsl: 45.41, 100%, 10.49%;
--color-green-base-hsl: 67.84, 92%, 9%;
--color-mint-base-hsl: 155.84, 68%, 11%;
--color-cyan-base-hsl: 175.46, 58.62%, 11.8%;
--color-blue-base-hsl: 204.77, 60.35%, 13.63%;
--color-purple-base-hsl: 236.59, 31.72%, 15.61%;
--color-pink-base-hsl: 330.96, 53.08%, 13.96%;

/* Tint colours are used for the borders in the accented color areas. */
--color-grey-tint-hsl: 0, 0%, 39%;
--color-red-tint-hsl: 1.04, 62.19%, 37.35%;
--color-orange-tint-hsl: 17.57, 80.44%, 31.12%;
--color-yellow-tint-hsl: 45.41, 100%, 22.49%;
--color-green-tint-hsl: 67.84, 92%, 22%;
--color-mint-tint-hsl: 155.84, 88%, 24%;
--color-cyan-tint-hsl: 175.46, 58.62%, 26.8%;
--color-blue-tint-hsl: 204.77, 60.35%, 34.63%;
--color-purple-tint-hsl: 236.59, 33.72%, 44.61%;
--color-pink-tint-hsl: 330.96, 55.08%, 33.96%;

/* Text colours are used for the Text in the accented color areas and other Text areas which use the theme colours.
e.g. Syntax Highlighting, Mark Highlight System, etc. */
--color-grey-text-hsl: 0, 0%, 60%;
--color-red-text-hsl: 1.04, 71.19%, 52.35%; /* red */
--color-orange-text-hsl: 17.57, 80.44%, 44.12%; /* orange */
--color-yellow-text-hsl: 45.41, 100%, 35.49%; /* yellow */
--color-green-text-hsl: 67.84, 100%, 30%; /* green */
--color-mint-text-hsl: 155.84, 100%, 30%;
--color-cyan-text-hsl: 175.46, 58.62%, 39.8%; /* cyan */
--color-blue-text-hsl: 204.77, 69.35%, 48.63%; /* blue */
--color-purple-text-hsl: 236.59, 42.72%, 59.61%; /* violet */
--color-pink-text-hsl: 330.96, 64.08%, 51.96%; /* magenta */

/* Default theme variable overwrites for different shades of text used in the editor and around the UI. */
--text-normal-hsl: 43.85, 86.67%, 94.12%; /* base3 */
--text-muted-hsl: 45.6, 42.37%, 88.43%; /* base2 */
--text-faint-hsl: 180, 6.93%, 60.39%; /* base1 */

/* Default theme variable overwrites for the UI background colours. */
--background-primary-hsl: 192.2, 80.82%, 14.31%; /* base02 */
--background-primary-alt-hsl: 194.48, 14.15%, 40.2%; /* base01 */
--background-secondary-hsl: 192.2, 80.82%, 14.31%; /* base02 */
--background-secondary-blur-hsl: 192.2, 80.82%, 15.31%; /* base02 but 1% darker to better match blur to normal background-secondary */
--background-secondary-alt-hsl: 192.22, 100%, 10.59%; /* base03 */

/* Default theme variable overwrites for shadows used on modals and popups. */
--shadow-color-hsl: 0, 0%, 0%;
--shadow-s: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px 0;
--shadow-l: hsla(var(--shadow-color-hsl), 5%) 0 1px 2px, hsla(var(--shadow-color-hsl), 5%) 0 2px 4px, hsla(var(--shadow-color-hsl), 5%) 0 4px 8px, hsla(var(--shadow-color-hsl), 5%) 0 6px 12px;
}

0 comments on commit 9e851e0

Please sign in to comment.