Skip to content

Instantly share code, notes, and snippets.

@dnordberg
Created May 15, 2020 19:20
Show Gist options
  • Save dnordberg/46bbaa5866b214ccc1db19fae02567eb to your computer and use it in GitHub Desktop.
Save dnordberg/46bbaa5866b214ccc1db19fae02567eb to your computer and use it in GitHub Desktop.
''
'' superhero theme based off of the bootstrap theme of the same name
'' https://bootswatch.com/superhero/
''
'' Author: Brett Schwarz
'' Copyright (c) 2019 by Brett Schwarz
!$THEME = "superhero-outline"
!if %not(%variable_exists("$BGCOLOR"))
!$BGCOLOR = "black"
!endif
skinparam BackgroundColor $BGCOLOR
''
'' Colors taken from the css file of the BS theme
''
!$BLUE = "#08427b"
!$LIGHT_BLUE = "#196dbf"
!$INDIGO = "#6610f2"
!$PURPLE = "#6f42c1"
!$PINK = "#e83e8c"
!$RED = "#d9534f"
!$LIGHT_RED = "#e17572"
!$ORANGE = "#f0ad4e"
!$LIGHT_ORANGE = "#f3bd71"
!$YELLOW = "#f0ad4e"
!$GREEN = "#5cb85c"
!$TEAL = "#20c997"
!$CYAN = "#5bc0de"
!$WHITE = "#FFF"
!$GRAY = "#222"
!$GRAY_LIGHT = "#868e96"
!$BLACK = "#000"
!$SMOKE = "whitesmoke"
!$PRIMARY = $GRAY_LIGHT
!$SECONDARY = $GRAY
!$SUCCESS = $TEAL
!$INFO = $LIGHT_BLUE
!$WARNING = $ORANGE
!$DANGER = $RED
!$LIGHT = $GRAY_LIGHT
!$DARK = $GRAY
!$TEXT = $BLUE
'' *_DARK = tint (lighter) of the main color of 80%
'' where TINT is calculated by clr + (255-clr) * tint_factor
'' *_LIGHT = shade (darker) of the main color of 80%
'' and SHADE is calculated by clr * (1 - shade_factor)
''
!$FGCOLOR = $WHITE
!$PRIMARY_DARK = $LIGHT_BLUE
!$PRIMARY_LIGHT = $RED
!$PRIMARY_TEXT = $TEXT
!$SECONDARY_DARK = $LIGHT_BLUE
!$SECONDARY_LIGHT = $GRAY
!$SECONDARY_TEXT = $TEXT
!$INFO_DARK = $INFO
!$INFO_LIGHT = $INFO
!$INFO_TEXT = $INFO
!$SUCCESS_DARK = $GREEN
!$SUCCESS_LIGHT = $TEAL
!$SUCCESS_TEXT = $SUCCESS
!$WARNING_DARK = $LIGHT_ORANGE
!$WARNING_LIGHT = $ORANGE
!$WARNING_TEXT = $WARNING
!$DANGER_DARK = $LIGHT_RED
!$DANGER_LIGHT = $RED
!$DANGER_TEXT = $WHITE
!$DARK_DARK = $BLUE
!$DARK_LIGHT = $GRAY
!$LIGHT_DARK = $GRAY_LIGHT
!$LIGHT_LIGHT = $SMOKE
!procedure $success($msg)
<font color=$SUCCESS><b>$msg
!endprocedure
!procedure $failure($msg)
<font color=$DANGER><b>$msg
!endprocedure
!procedure $warning($msg)
<font color=$WARNING><b>$msg
!endprocedure
!procedure $primary_scheme()
FontColor $PRIMARY_TEXT
BorderColor $PRIMARY_DARK
BackgroundColor $BGCOLOR
!endprocedure
''
'' Global Default Values
''
skinparam defaultFontName "Arial"
skinparam defaultFontSize 12
skinparam dpi 100
skinparam shadowing false
skinparam roundcorner 8
skinparam ParticipantPadding 40
skinparam BoxPadding 40
skinparam Padding 5
skinparam TitleFontColor $DARK
skinparam TitleFontSize 20
skinparam TitleBorderThickness 0
skinparam ArrowColor $DARK
skinparam stereotype {
CBackgroundColor $SECONDARY_DARK
CBorderColor $SECONDARY_LIGHT
ABackgroundColor $SUCCESS_LIGHT
ABorderColor $SUCCESS_DARK
IBackgroundColor $DANGER_LIGHT
IBorderColor $DANGER_DARK
EBackgroundColor $WARNING_LIGHT
EBorderColor $WARNING_DARK
NBackgroundColor $INFO_LIGHT
NBorderColor $INFO_DARK
}
skinparam title {
' CHANGED FontColor $PRIMARY
FontColor $PRIMARY
BorderColor $SECONDARY_DARK
' FontSize 20
FontSize 16
' BorderRoundCorner 8
' BorderThickness 1
BackgroundColor $BGCOLOR
}
skinparam legend {
BackgroundColor $BGCOLOR
BorderColor $SECONDARY_DARK
FontColor $LIGHT
}
!startsub activity
skinparam activity {
$primary_scheme()
BarColor $SUCCESS
StartColor $INFO
EndColor $INFO
''
DiamondBackgroundColor $BGCOLOR
DiamondBorderColor $SECONDARY_DARK
DiamondFontColor $SECONDARY_TEXT
}
!endsub
!startsub participant
skinparam participant {
$primary_scheme()
ParticipantBorderThickness 2
}
!endsub
!startsub actor
skinparam actor {
$primary_scheme()
FontColor $PRIMARY
}
!endsub
!startsub arrow
skinparam arrow {
Thickness 3
Color $PRIMARY
FontColor $FGCOLOR
}
!endsub
!startsub sequence
skinparam sequence {
BorderColor $PRIMARY
' For some reason sequence title font color does not pick up from global
TitleFontColor $PRIMARY
BackgroundColor $BGCOLOR
StartColor $PRIMARY
EndColor $PRIMARY
''
BoxBackgroundColor $BGCOLOR
BoxBorderColor $DARK
BoxFontColor $DARk
''
LifeLineBorderColor $SECONDARY
LifeLineBorderThickness 2
LifeLineBackgroundColor $BGCOLOR
''
GroupBorderColor $DARK
GroupFontColor $DARK
GroupHeaderFontColor $INFO
GroupBackgroundColor $BGCOLOR
GroupHeaderBackgroundColor $BGCOLOR
''
DividerBackgroundColor $BGCOLOR
DividerBorderColor $DARK
DividerBorderThickness 2
DividerFontColor $LIGHT
''
ReferenceBackgroundColor $BGCOLOR
ReferenceBorderColor $LIGHT
ReferenceFontColor $LIGHT
ReferenceHeaderFontColor $INFO
ReferenceHeaderBackgroundColor $BGCOLOR
}
!endsub
!startsub partition
skinparam partition {
BorderColor $PRIMARY
FontColor $PRIMARY
BackgroundColor $BGCOLOR
}
!endsub
!startsub collections
skinparam collections {
$primary_scheme()
}
!endsub
!startsub control
skinparam control {
$primary_scheme()
}
!endsub
!startsub entity
skinparam entity {
$primary_scheme()
}
!endsub
!startsub boundary
skinparam boundary {
$primary_scheme()
}
!endsub
!startsub agent
skinparam agent {
BackgroundColor $BGCOLOR
BorderColor $WARNING_LIGHT
FontColor $DARK
}
!endsub
!startsub note
skinparam note {
BorderThickness 1
BackgroundColor $BGCOLOR
BorderColor $INFO_DARK
FontColor $INFO_DARK
}
!endsub
!startsub artifact
skinparam artifact {
BackgroundColor $BGCOLOR
BorderColor $DARK_DARK
FontColor $LIGHT
}
!endsub
!startsub component
skinparam component {
$primary_scheme()
}
!endsub
!startsub interface
skinparam interface {
BackgroundColor $BGCOLOR
BorderColor $DANGER
FontColor $DARK
}
!endsub
!startsub storage
skinparam storage {
BackgroundColor $BGCOLOR
BorderColor $WARNING_DARK
FontColor $WARNING_TEXT
}
!endsub
!startsub node
skinparam node {
BackgroundColor $BGCOLOR
BorderColor $LIGHT
FontColor $LIGHT
}
!endsub
!startsub cloud
skinparam cloud {
BackgroundColor $BGCOLOR
BorderColor #F2FCFE
FontColor $DARK
}
!endsub
!startsub database
skinparam database {
$primary_scheme()
FontColor $PRIMARY
}
!endsub
!startsub class
skinparam class {
$primary_scheme()
HeaderBackgroundColor $PRIMARY_LIGHT
StereotypeFontColor $DARK
BorderThickness 1
AttributeFontColor $DARK
AttributeFontSize 11
}
!endsub
!startsub object
skinparam object {
$primary_scheme()
StereotypeFontColor $DARK
BorderThickness 1
AttributeFontColor $SECONDARY_DARK
AttributeFontSize 11
}
!endsub
!startsub usecase
skinparam usecase {
$primary_scheme()
BorderThickness 2
StereotypeFontColor $PRIMARY
}
!endsub
!startsub rectangle
skinparam rectangle {
$primary_scheme()
BorderThickness 2
StereotypeFontColor $PRIMARY
}
!endsub
!startsub package
skinparam package {
BackgroundColor $BGCOLOR
BorderColor $PRIMARY
FontColor $PRIMARY
BorderThickness 2
}
!endsub
!startsub folder
skinparam folder {
BackgroundColor $BGCOLOR
BorderColor $WARNING
FontColor $WARNING
BorderThickness 2
}
!endsub
!startsub frame
skinparam frame {
BackgroundColor $BGCOLOR
BorderColor $INFO
FontColor $INFO
BorderThickness 2
}
!endsub
!startsub state
skinparam state {
$primary_scheme()
StartColor $INFO
EndColor $INFO
AttributeFontColor $SECONDARY_TEXT
AttributeFontSize 11
}
!endsub
!startsub queue
skinparam queue {
$primary_scheme()
}
!endsub
!startsub card
skinparam card {
BackgroundColor $BGCOLOR
BorderColor $INFO
FontColor $INFO_TEXT
}
!endsub
!startsub file
skinparam file {
BackgroundColor $BGCOLOR
BorderColor $LIGHT
FontColor $LIGHT
}
!endsub
!startsub stack
skinparam stack {
$primary_scheme()
}
!endsub
''
'' materia theme based off of the bootstrap theme of the same name
'' https://bootswatch.com/materia/
''
'' Author: Brett Schwarz
'' Copyright (c) 2019 by Brett Schwarz
!$THEME = "materia-outline"
!if %not(%variable_exists("$BGCOLOR"))
!$BGCOLOR = "transparent"
!endif
skinparam BackgroundColor $BGCOLOR
''
'' Colors taken from the css file of the BS theme
''
!$BLUE = "#2196F3"
!$INDIGO = "#6610f2"
!$PURPLE = "#6f42c1"
!$PINK = "#e83e8c"
!$RED = "#e51c23"
!$ORANGE = "#fd7e14"
!$YELLOW = "#ff9800"
!$GREEN = "#4CAF50"
!$TEAL = "#20c997"
!$CYAN = "#9C27B0"
!$WHITE = "#FFF"
!$GRAY_DARK = "#222"
!$GRAY = "#666"
!$PRIMARY = "#2196F3"
!$SECONDARY = "#fff"
!$SUCCESS = "#4CAF50"
!$INFO = "black"
!$WARNING = "#ff9800"
!$DANGER = "#e51c23"
!$LIGHT = "#fff"
!$DARK = "#222"
'' *_LIGHT = tint (lighter) of the main color of 80%
'' where TINT is calculated by clr + (255-clr) * tint_factor
'' *_DARK = shade (darker) of the main color of 80%
'' and SHADE is calculated by clr * (1 - shade_factor)
''
!$FGCOLOR = $DARK
!$PRIMARY_LIGHT = "#4dabf5"
!$PRIMARY_DARK = "#1a78c2"
!$PRIMARY_TEXT = $PRIMARY
!$SECONDARY_LIGHT = "#fff"
!$SECONDARY_DARK = "#cccccc"
!$SECONDARY_TEXT = $SECONDARY_DARK
!$INFO_LIGHT = "#b052c0"
!$INFO_DARK = "#7D1F8D"
!$INFO_TEXT = $INFO
!$SUCCESS_LIGHT = "#70bf73"
!$SUCCESS_DARK = "#3D8C40"
!$SUCCESS_TEXT = $SUCCESS
!$WARNING_LIGHT = "#ffad33"
!$WARNING_DARK = "#CC7A00"
!$WARNING_TEXT = $WARNING
!$DANGER_LIGHT = "#B7161C"
!$DANGER_TEXT = $DANGER
!procedure $success($msg)
<font color=$SUCCESS><b>$msg
!endprocedure
!procedure $failure($msg)
<font color=$DANGER><b>$msg
!endprocedure
!procedure $warning($msg)
<font color=$WARNING><b>$msg
!endprocedure
!procedure $primary_scheme()
FontColor $PRIMARY_TEXT
BorderColor $PRIMARY
BackgroundColor $BGCOLOR
!endprocedure
''
'' Global Default Values
''
skinparam TitleFontColor $DARK
skinparam TitleFontSize 20
skinparam TitleBorderThickness 0
skinparam ArrowColor $GRAY
skinparam stereotype {
CBackgroundColor $SECONDARY_LIGHT
CBorderColor $SECONDARY_DARK
ABackgroundColor $SUCCESS_LIGHT
ABorderColor $SUCCESS_DARK
IBackgroundColor $DANGER_LIGHT
IBorderColor $DANGER_DARK
EBackgroundColor $WARNING_LIGHT
EBorderColor $WARNING_DARK
NBackgroundColor $INFO_LIGHT
NBorderColor $INFO_DARK
}
skinparam title {
' FontColor $PRIMARY
' BorderColor $SECONDARY_DARK
' FontSize 20
' BorderRoundCorner 8
' BorderThickness 1
' BackgroundColor $BGCOLOR
}
skinparam legend {
BackgroundColor $BGCOLOR
BorderColor $SECONDARY_DARK
FontColor $DARK
}
!startsub activity
skinparam activity {
$primary_scheme()
' FontColor $PRIMARY_TEXT
' BorderColor $PRIMARY
' BackgroundColor $BGCOLOR
BarColor $SUCCESS
StartColor $INFO
EndColor $INFO
''
DiamondBackgroundColor $BGCOLOR
DiamondBorderColor $SECONDARY_DARK
DiamondFontColor $SECONDARY_TEXT
}
!endsub
!startsub participant
skinparam participant {
$primary_scheme()
ParticipantBorderThickness 2
}
!endsub
!startsub actor
skinparam actor {
$primary_scheme()
' FontColor $DARK
}
!endsub
!startsub arrow
skinparam arrow {
Thickness 3
Color $PRIMARY
FontColor $FGCOLOR
}
!endsub
!startsub sequence
skinparam sequence {
BorderColor $PRIMARY
' For some reason sequence title font color does not pick up from global
TitleFontColor $PRIMARY
BackgroundColor $BGCOLOR
StartColor $PRIMARY
EndColor $PRIMARY
''
BoxBackgroundColor $BGCOLOR
BoxBorderColor $GRAY
BoxFontColor $DARK
''
LifeLineBorderColor $SECONDARY_DARK
LifeLineBorderThickness 2
LifeLineBackgroundColor $BGCOLOR
''
GroupBorderColor $GRAY
GroupFontColor $DARK
GroupHeaderFontColor $INFO
''
DividerBackgroundColor $BGCOLOR
DividerBorderColor $GRAY
DividerBorderThickness 2
DividerFontColor $DARK
''
ReferenceBackgroundColor $BGCOLOR
ReferenceBorderColor $GRAY
ReferenceFontColor $DARK
ReferenceHeaderFontColor $INFO
}
!endsub
!startsub partition
skinparam partition {
BorderColor $PRIMARY
FontColor $PRIMARY
BackgroundColor $BGCOLOR
}
!endsub
!startsub collections
skinparam collections {
$primary_scheme()
' BackgroundColor $BGCOLOR
' BorderColor $PRIMARY
}
!endsub
!startsub control
skinparam control {
$primary_scheme()
' BackgroundColor $BGCOLOR
' BorderColor $PRIMARY_DARK
' FontColor $DARK
}
!endsub
!startsub entity
skinparam entity {
$primary_scheme()
FontColor white
' BackgroundColor $BGCOLOR
' BorderColor $PRIMARY_DARK
' FontColor $DARK
}
!endsub
!startsub boundary
skinparam boundary {
$primary_scheme()
' BackgroundColor $BGCOLOR
' BorderColor $PRIMARY_DARK
' FontColor $DARK
}
!endsub
!startsub agent
skinparam agent {
BackgroundColor $BGCOLOR
BorderColor #999999
FontColor #333333
}
!endsub
!startsub note
skinparam note {
BorderThickness 1
BackgroundColor $BGCOLOR
BorderColor $INFO
FontColor $INFO
}
!endsub
!startsub artifact
skinparam artifact {
BackgroundColor $BGCOLOR
BorderColor $GRAY
FontColor $GRAY
}
!endsub
!startsub component
skinparam component {
$primary_scheme()
' BackgroundColor $BGCOLOR
' BorderColor $SUCCESS
' FontColor $SUCCESS_TEXT
}
!endsub
!startsub interface
skinparam interface {
BackgroundColor $BGCOLOR
BorderColor $DANGER
FontColor $DARK
}
!endsub
!startsub storage
skinparam storage {
BackgroundColor $BGCOLOR
BorderColor $WARNING
FontColor $WARNING_TEXT
}
!endsub
!startsub node
skinparam node {
BackgroundColor $BGCOLOR
BorderColor $DARK
FontColor $DARK
}
!endsub
!startsub cloud
skinparam cloud {
BackgroundColor #F2FCFE-#eeeeee
BorderColor #F2FCFE
FontColor $DARK
}
!endsub
!startsub database
skinparam database {
$primary_scheme()
' BackgroundColor $BGCOLOR
' BorderColor $PRIMARY_DARK
' FontColor $DARK
}
!endsub
!startsub class
skinparam class {
$primary_scheme()
'CHANGED HeaderBackgroundColor $PRIMARY-$PRIMARY_DARK
HeaderBackgroundColor $PRIMARY
' CHANGED FontColor $PRIMARY_TEXT
FontColor $SMOKE
' BackgroundColor $BGCOLOR
' BorderColor $PRIMARY_DARK
StereotypeFontColor $DARK
BorderThickness 1
AttributeFontColor $DARK
AttributeFontSize 11
}
!endsub
!startsub object
skinparam object {
$primary_scheme()
' FontColor $SUCCESS
' BackgroundColor $BGCOLOR
' BorderColor $SECONDARY_DARK
StereotypeFontColor $DARK
BorderThickness 1
AttributeFontColor $SECONDARY_DARK
AttributeFontSize 11
}
!endsub
!startsub usecase
skinparam usecase {
$primary_scheme()
' BackgroundColor $BGCOLOR
' BorderColor $SECONDARY_DARK
BorderThickness 2
' FontColor $SECONDARY_TEXT
StereotypeFontColor $PRIMARY
}
!endsub
!startsub rectangle
skinparam rectangle {
$primary_scheme()
' BackgroundColor $BGCOLOR
' BorderColor $PRIMARY_DARK
BorderThickness 2
' FontColor $PRIMARY
StereotypeFontColor $PRIMARY
}
!endsub
!startsub package
skinparam package {
BackgroundColor $BGCOLOR
BorderColor $PRIMARY
FontColor $PRIMARY
BorderThickness 2
}
!endsub
!startsub folder
skinparam folder {
BackgroundColor $BGCOLOR
BorderColor $WARNING
FontColor $WARNING
BorderThickness 2
}
!endsub
!startsub frame
skinparam frame {
BackgroundColor $BGCOLOR
BorderColor $INFO
FontColor $INFO
BorderThickness 2
}
!endsub
!startsub state
skinparam state {
$primary_scheme()
StartColor $INFO
EndColor $INFO
' BackgroundColor $BGCOLOR
' BorderColor $SECONDARY_DARK
' FontColor $INFO
AttributeFontColor $SECONDARY_TEXT
AttributeFontSize 11
}
!endsub
!startsub queue
skinparam queue {
$primary_scheme()
' BackgroundColor $BGCOLOR
' BorderColor $WARNING_DARK
' FontColor $WARNING_TEXT
}
!endsub
!startsub card
skinparam card {
BackgroundColor $BGCOLOR
BorderColor $INFO
FontColor $INFO_TEXT
}
!endsub
!startsub file
skinparam file {
BackgroundColor $BGCOLOR
BorderColor $GRAY
FontColor $GRAY
}
!endsub
!startsub stack
skinparam stack {
$primary_scheme()
' BackgroundColor $BGCOLOR
' BorderColor $PRIMARY
' FontColor $PRIMARY_TEXT
}
!endsub
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment