📦 NEW: Theme Shades of Purple (#2114)
Co-authored-by: Scott Densmore <scottdensmore@mac.com>
This commit is contained in:
Ahmad Awais ⌘
GitHub
parent
7b86a2015f
commit
19a9b50aab
|
|
@ -0,0 +1,348 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright 2025 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* Shades of Purple Theme — for Highlightjs.
|
||||
* @author Ahmad Awais <https://twitter.com/mrahmadawais/>
|
||||
*/
|
||||
import { type ColorsTheme, Theme } from './theme.js';
|
||||
|
||||
const shadesOfPurpleColors: ColorsTheme = {
|
||||
type: 'dark',
|
||||
// Required colors for ColorsTheme interface
|
||||
Background: '#2d2b57', // Main background
|
||||
Foreground: '#e3dfff', // Default text color (hljs, hljs-subst)
|
||||
LightBlue: '#847ace', // Light blue/purple accent
|
||||
AccentBlue: '#a599e9', // Borders, secondary blue
|
||||
AccentPurple: '#ac65ff', // Comments (main purple)
|
||||
AccentCyan: '#a1feff', // Names
|
||||
AccentGreen: '#A5FF90', // Strings and many others
|
||||
AccentYellow: '#fad000', // Title, main yellow
|
||||
AccentRed: '#ff628c', // Error/deletion accent
|
||||
Comment: '#B362FF', // Comment color (same as AccentPurple)
|
||||
Gray: '#726c86', // Gray color
|
||||
GradientColors: ['#4d21fc', '#847ace', '#ff628c'],
|
||||
};
|
||||
|
||||
// Additional colors from CSS that don't fit in the ColorsTheme interface
|
||||
const additionalColors = {
|
||||
AccentYellowAlt: '#f8d000', // Attr yellow (slightly different)
|
||||
AccentOrange: '#fb9e00', // Keywords, built_in, meta
|
||||
AccentPink: '#fa658d', // Numbers, literals
|
||||
AccentLightPurple: '#c991ff', // For params and properties
|
||||
AccentDarkPurple: '#6943ff', // For operators
|
||||
AccentTeal: '#2ee2fa', // For special constructs
|
||||
};
|
||||
|
||||
export const ShadesOfPurple = new Theme(
|
||||
'Shades Of Purple',
|
||||
'dark',
|
||||
{
|
||||
// Base styles
|
||||
hljs: {
|
||||
display: 'block',
|
||||
overflowX: 'auto',
|
||||
background: shadesOfPurpleColors.Background,
|
||||
color: shadesOfPurpleColors.Foreground,
|
||||
},
|
||||
|
||||
// Title elements
|
||||
'hljs-title': {
|
||||
color: shadesOfPurpleColors.AccentYellow,
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
|
||||
// Names
|
||||
'hljs-name': {
|
||||
color: shadesOfPurpleColors.AccentCyan,
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
|
||||
// Tags
|
||||
'hljs-tag': {
|
||||
color: shadesOfPurpleColors.Foreground,
|
||||
},
|
||||
|
||||
// Attributes
|
||||
'hljs-attr': {
|
||||
color: additionalColors.AccentYellowAlt,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
|
||||
// Built-ins, selector tags, sections
|
||||
'hljs-built_in': {
|
||||
color: additionalColors.AccentOrange,
|
||||
},
|
||||
'hljs-selector-tag': {
|
||||
color: additionalColors.AccentOrange,
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
'hljs-section': {
|
||||
color: additionalColors.AccentOrange,
|
||||
},
|
||||
|
||||
// Keywords
|
||||
'hljs-keyword': {
|
||||
color: additionalColors.AccentOrange,
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
|
||||
// Default text and substitutions
|
||||
'hljs-subst': {
|
||||
color: shadesOfPurpleColors.Foreground,
|
||||
},
|
||||
|
||||
// Strings and related elements (all green)
|
||||
'hljs-string': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-attribute': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-symbol': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-bullet': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-addition': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-code': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-regexp': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-selector-class': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-selector-attr': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-selector-pseudo': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-template-tag': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-quote': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-deletion': {
|
||||
color: shadesOfPurpleColors.AccentRed,
|
||||
},
|
||||
|
||||
// Meta elements
|
||||
'hljs-meta': {
|
||||
color: additionalColors.AccentOrange,
|
||||
},
|
||||
'hljs-meta-string': {
|
||||
color: additionalColors.AccentOrange,
|
||||
},
|
||||
|
||||
// Comments
|
||||
'hljs-comment': {
|
||||
color: shadesOfPurpleColors.AccentPurple,
|
||||
},
|
||||
|
||||
// Literals and numbers
|
||||
'hljs-literal': {
|
||||
color: additionalColors.AccentPink,
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
'hljs-number': {
|
||||
color: additionalColors.AccentPink,
|
||||
},
|
||||
|
||||
// Emphasis and strong
|
||||
'hljs-emphasis': {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'hljs-strong': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// Diff-specific classes
|
||||
'hljs-diff': {
|
||||
color: shadesOfPurpleColors.Foreground,
|
||||
},
|
||||
'hljs-meta.hljs-diff': {
|
||||
color: shadesOfPurpleColors.AccentBlue,
|
||||
},
|
||||
'hljs-ln': {
|
||||
color: shadesOfPurpleColors.Gray,
|
||||
},
|
||||
|
||||
// Additional elements that might be needed
|
||||
'hljs-type': {
|
||||
color: shadesOfPurpleColors.AccentYellow,
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
'hljs-variable': {
|
||||
color: shadesOfPurpleColors.AccentYellow,
|
||||
},
|
||||
'hljs-template-variable': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
'hljs-function .hljs-keyword': {
|
||||
color: additionalColors.AccentOrange,
|
||||
},
|
||||
'hljs-link': {
|
||||
color: shadesOfPurpleColors.LightBlue,
|
||||
},
|
||||
'hljs-doctag': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// Function parameters
|
||||
'hljs-params': {
|
||||
color: additionalColors.AccentLightPurple,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
|
||||
// Class definitions
|
||||
'hljs-class': {
|
||||
color: shadesOfPurpleColors.AccentCyan,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// Function definitions
|
||||
'hljs-function': {
|
||||
color: shadesOfPurpleColors.AccentCyan,
|
||||
},
|
||||
|
||||
// Object properties
|
||||
'hljs-property': {
|
||||
color: shadesOfPurpleColors.AccentBlue,
|
||||
},
|
||||
|
||||
// Operators
|
||||
'hljs-operator': {
|
||||
color: additionalColors.AccentDarkPurple,
|
||||
},
|
||||
|
||||
// Punctuation (if supported by the parser)
|
||||
'hljs-punctuation': {
|
||||
color: shadesOfPurpleColors.Gray,
|
||||
},
|
||||
|
||||
// CSS ID selectors
|
||||
'hljs-selector-id': {
|
||||
color: shadesOfPurpleColors.AccentYellow,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// Character literals
|
||||
'hljs-char': {
|
||||
color: shadesOfPurpleColors.AccentGreen,
|
||||
},
|
||||
|
||||
// Escape sequences
|
||||
'hljs-escape': {
|
||||
color: additionalColors.AccentPink,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// Meta keywords
|
||||
'hljs-meta-keyword': {
|
||||
color: additionalColors.AccentOrange,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// Built-in names
|
||||
'hljs-builtin-name': {
|
||||
color: additionalColors.AccentTeal,
|
||||
},
|
||||
|
||||
// Modules
|
||||
'hljs-module': {
|
||||
color: shadesOfPurpleColors.AccentCyan,
|
||||
},
|
||||
|
||||
// Namespaces
|
||||
'hljs-namespace': {
|
||||
color: shadesOfPurpleColors.LightBlue,
|
||||
},
|
||||
|
||||
// Important annotations
|
||||
'hljs-important': {
|
||||
color: shadesOfPurpleColors.AccentRed,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// Formulas (for LaTeX, etc.)
|
||||
'hljs-formula': {
|
||||
color: shadesOfPurpleColors.AccentCyan,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
|
||||
// Language-specific additions
|
||||
// Python decorators
|
||||
'hljs-decorator': {
|
||||
color: additionalColors.AccentTeal,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// Ruby symbols
|
||||
'hljs-symbol.ruby': {
|
||||
color: additionalColors.AccentPink,
|
||||
},
|
||||
|
||||
// SQL keywords
|
||||
'hljs-keyword.sql': {
|
||||
color: additionalColors.AccentOrange,
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
|
||||
// Markdown specific
|
||||
'hljs-section.markdown': {
|
||||
color: shadesOfPurpleColors.AccentYellow,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// JSON keys
|
||||
'hljs-attr.json': {
|
||||
color: shadesOfPurpleColors.AccentCyan,
|
||||
},
|
||||
|
||||
// XML/HTML specific
|
||||
'hljs-tag .hljs-name': {
|
||||
color: shadesOfPurpleColors.AccentRed,
|
||||
},
|
||||
'hljs-tag .hljs-attr': {
|
||||
color: additionalColors.AccentYellowAlt,
|
||||
},
|
||||
|
||||
// Line highlighting (if line numbers are enabled)
|
||||
'hljs.hljs-line-numbers': {
|
||||
borderRight: `1px solid ${shadesOfPurpleColors.Gray}`,
|
||||
},
|
||||
'hljs.hljs-line-numbers .hljs-ln-numbers': {
|
||||
color: shadesOfPurpleColors.Gray,
|
||||
paddingRight: '1em',
|
||||
},
|
||||
'hljs.hljs-line-numbers .hljs-ln-code': {
|
||||
paddingLeft: '1em',
|
||||
},
|
||||
|
||||
// Selection styling
|
||||
'hljs::selection': {
|
||||
background: shadesOfPurpleColors.AccentBlue + '40', // 40 = 25% opacity
|
||||
},
|
||||
'hljs ::-moz-selection': {
|
||||
background: shadesOfPurpleColors.AccentBlue + '40',
|
||||
},
|
||||
|
||||
// Highlighted lines (for emphasis)
|
||||
'hljs .hljs-highlight': {
|
||||
background: shadesOfPurpleColors.AccentPurple + '20', // 20 = 12.5% opacity
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
shadesOfPurpleColors,
|
||||
);
|
||||
|
|
@ -13,6 +13,7 @@ import { GitHubLight } from './github-light.js';
|
|||
import { GoogleCode } from './googlecode.js';
|
||||
import { DefaultLight } from './default-light.js';
|
||||
import { DefaultDark } from './default.js';
|
||||
import { ShadesOfPurple } from './shades-of-purple.js';
|
||||
import { XCode } from './xcode.js';
|
||||
import { Theme, ThemeType } from './theme.js';
|
||||
import { ANSI } from './ansi.js';
|
||||
|
|
@ -42,6 +43,7 @@ class ThemeManager {
|
|||
GitHubDark,
|
||||
GitHubLight,
|
||||
GoogleCode,
|
||||
ShadesOfPurple,
|
||||
XCode,
|
||||
ANSI,
|
||||
ANSILight,
|
||||
|
|
|
|||
Loading…
Reference in New Issue