diff --git a/packages/grafana-data/src/themes/themeDefinitions/gloom.ts b/packages/grafana-data/src/themes/themeDefinitions/gloom.ts new file mode 100644 index 00000000000..849d4ece51a --- /dev/null +++ b/packages/grafana-data/src/themes/themeDefinitions/gloom.ts @@ -0,0 +1,82 @@ +import { NewThemeOptions } from '../createTheme'; + +/** + * Torkel's GrafanaCon theme + * very WIP state + */ + +const whiteBase = `210, 210, 220`; +const secondaryBase = `210, 210, 220`; +//const brandMain = '#3d71d9'; +//const brandText = '#6e9fff'; +const brandMain = '#ff934d'; +const brandText = '#f99a5c'; + +const disabledText = `rgba(${whiteBase}, 0.6)`; + +const gloomTheme: NewThemeOptions = { + name: 'Gloom', + colors: { + mode: 'dark', + border: { + weak: `rgba(${whiteBase}, 0.08)`, + medium: `rgba(${whiteBase}, 0.15)`, + strong: `rgba(${whiteBase}, 0.30)`, + }, + + text: { + primary: `rgb(${whiteBase})`, + secondary: `rgba(${whiteBase}, 0.65)`, + disabled: disabledText, + link: brandText, + maxContrast: '#FFF', + }, + + primary: { + main: brandMain, + text: brandText, + border: brandMain, + name: 'primary', + }, + + secondary: { + main: `rgba(${secondaryBase}, 0.10)`, + shade: `rgba(${secondaryBase}, 0.14)`, + transparent: `rgba(${secondaryBase}, 0.08)`, + text: `rgba(${secondaryBase})`, + contrastText: `rgb(${secondaryBase})`, + border: `rgba(${secondaryBase}, 0.08)`, + }, + + background: { + canvas: '#000', + primary: '#0d0b14', + secondary: '#19171f', + }, + + action: { + hover: `rgba(${secondaryBase}, 0.10)`, + selected: `rgba(${secondaryBase}, 0.12)`, + selectedBorder: brandMain, + focus: `rgba(${secondaryBase}, 0.10)`, + hoverOpacity: 0.05, + disabledText: disabledText, + disabledBackground: `rgba(${whiteBase}, 0.04)`, + disabledOpacity: 0.38, + }, + + // gradients: { + // brandHorizontal: 'linear-gradient(270deg, #ff934d 0%, #FEAC34 100%)', + // brandVertical: 'linear-gradient(0.01deg, #ff934d 0.01%, #FEAC34 99.99%)', + // }, + + contrastThreshold: 3, + hoverFactor: 0.03, + tonalOffset: 0.15, + }, + shape: { + borderRadius: 5, + }, +}; + +export default gloomTheme; diff --git a/packages/grafana-data/src/themes/themeDefinitions/index.ts b/packages/grafana-data/src/themes/themeDefinitions/index.ts index f0277312fe4..151ae00593e 100644 --- a/packages/grafana-data/src/themes/themeDefinitions/index.ts +++ b/packages/grafana-data/src/themes/themeDefinitions/index.ts @@ -9,3 +9,4 @@ export { default as synthwave } from './synthwave'; export { default as tron } from './tron'; export { default as victorian } from './victorian'; export { default as zen } from './zen'; +export { default as gloom } from './gloom'; diff --git a/pkg/services/preference/themes.go b/pkg/services/preference/themes.go index 4e88235d5d2..73366b64d6d 100644 --- a/pkg/services/preference/themes.go +++ b/pkg/services/preference/themes.go @@ -21,6 +21,7 @@ var themes = []ThemeDTO{ {ID: "tron", Type: "dark", IsExtra: true}, {ID: "victorian", Type: "dark", IsExtra: true}, {ID: "zen", Type: "light", IsExtra: true}, + {ID: "gloom", Type: "dark", IsExtra: true}, } func GetThemeByID(id string) *ThemeDTO { diff --git a/public/app/core/components/SharedPreferences/SharedPreferences.tsx b/public/app/core/components/SharedPreferences/SharedPreferences.tsx index 16d91551060..fa23e066c7a 100644 --- a/public/app/core/components/SharedPreferences/SharedPreferences.tsx +++ b/public/app/core/components/SharedPreferences/SharedPreferences.tsx @@ -92,6 +92,7 @@ export class SharedPreferences extends PureComponent { allowedExtraThemes.push('gildedgrove'); allowedExtraThemes.push('sapphiredusk'); allowedExtraThemes.push('tron'); + allowedExtraThemes.push('gloom'); } this.themeOptions = getBuiltInThemes(allowedExtraThemes).map((theme) => ({