From aa727baf3ef15647fae145e79d120ea49f4ec3e1 Mon Sep 17 00:00:00 2001 From: Etcetera_ Date: Fri, 15 May 2026 12:19:25 -0600 Subject: [PATCH 01/45] umm starting! --- src/themes.js | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/themes.js diff --git a/src/themes.js b/src/themes.js new file mode 100644 index 000000000..4149928ca --- /dev/null +++ b/src/themes.js @@ -0,0 +1 @@ +// adding this! \ No newline at end of file From 4c223498001915be5f24cc373e60a3779ed15e77 Mon Sep 17 00:00:00 2001 From: Etcetera_ Date: Fri, 15 May 2026 12:42:50 -0600 Subject: [PATCH 02/45] adding everything in themes.js in adding explanations in! --- src/themes.js | 1143 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 1142 insertions(+), 1 deletion(-) diff --git a/src/themes.js b/src/themes.js index 4149928ca..4a69f7392 100644 --- a/src/themes.js +++ b/src/themes.js @@ -1 +1,1142 @@ -// adding this! \ No newline at end of file +import { global } from './vars.js'; +import { loc } from './locale.js'; +import { vBind } from './functions.js'; +export var themes={ + variables:{ + // Named colors + 'black': '#000', + 'white': '#fff', + + // Named bulma colors + 'bulma-success': '#48c774', + 'bulma-danger': '#f14668', + 'bulma-info': '#167df0', + 'bulma-dark': '#363636', + 'bulma-warning': '#ffdd57', + 'bulma-link': '#4a4a4a', + 'bulma-link-active': '#B86BFF', + 'bulma-link-hover': '#363636', + 'bulma-label': '#363636', + 'bulma-checkbox-hover': '#363636', + }, + dark:{ + // Theme colors { + 'html-background': '#1f2424', + 'primary-border': '#ccc', + 'secondary-border': 'var(--theme-primary-border)', + 'primary-color': 'var(--theme-white)', + 'secondary-color': '#3a4344', + + 'link': '#1abc9c', + 'link-hover': '#f2f2f2', + 'enabled': '#00af0f', + 'disabled': '#c20000', + // } + + // .has-text-xxx + 'has-text-advanced': '#00ac95', + 'has-text-alert': '#af5d00', + 'has-text-caution': '#ffa500', + 'has-text-danger': 'var(--theme-bulma-danger)', + 'has-text-fade': '#5e5e5e', + 'has-text-flair': 'var(--theme-has-text-special)', + 'has-text-label': '#ffff9e', + 'has-text-special': '#91006c', + 'has-text-info': 'var(--theme-bulma-info)', + 'has-text-success': 'var(--theme-bulma-success)', + 'has-text-warning': 'var(--theme-bulma-warning)', + + // .popper + 'popper': '#363636', + 'popper-has-text-label': '#1100ff', + 'popper-has-text-success': '#1c7e21', + 'popper-has-text-warning': '#776425', + 'modal-child-popper-background': '#f5f5f5', + 'modal-child-popper-border': 'var(--theme-black)', + + /* AFP 2021 + // .fool + 'fool-has-text-danger': '#23d160', + 'fool-has-text-success': '#ff3860', + 'fool-popper-has-text-danger': 'var(--theme-popper-has-text-success)', + 'fool-span-on': 'var(--theme-disabled)', + 'fool-span-off': 'var(--theme-enabled)', + */ + + // .tabs + 'tabs-li-is-active-link-border': 'var(--theme-link)', + 'tabs-li-is-active-link': 'var(--theme-link)', + + // .button + 'button-background': '#282f2f', + 'button': 'var(--theme-primary-color)', + 'button-hover-background': 'var(--theme-secondary-color)', + 'button-hover': 'var(--theme-link-hover)', + 'button-focus-border': '#dbdbdb', + + // .basic-button + 'basic-button-border-hover-background': 'var(--theme-secondary-color)', + 'basic-button-border-hover': '#eee', + + // .label + 'label': '#dbdee0', + + // .checkbox + 'checkbox-hover': 'var(--theme-link)', + + // .dropdown + 'dropdown-content-background': '#1f2424', + + // .b-tooltip + 'b-tooltip-accent': 'var(--theme-link-hover)', + 'b-tooltip-is-primary-background': 'var(--theme-b-tooltip-accent)', + 'b-tooltip-is-primary-border': '#f5f5f5', + 'b-tooltip-is-primary': 'var(--theme-black)', + + // UI Bars + 'bars-background': 'var(--theme-secondary-color)', + + // .meter + 'meter-low': '#cc0000', + 'meter-neutral': '#c0ce00', + 'meter-high': '#00af0f', + + // .main + 'div-special-border': '#282f2f', + 'div-special-gear-fill': '#ad5f12', + 'div-special-hover-border': 'var(--theme-secondary-color)', + 'div-special-hover-gear-fill': '#d4af37', + 'span-on-border': '#282f2f', + 'span-on': 'var(--theme-enabled)', + 'span-on-warn': '#af5d00', + 'span-off-border': '#282f2f', + 'span-off': 'var(--theme-disabled)', + 'span-on-off-hover-border': 'var(--theme-secondary-color)', + 'hl-button-border': 'var(--theme-enabled)', + 'link-button-background': '#181818', + 'special-on-off-border': '#181818', + 'oldTech': 'var(--theme-primary-color)', + 'cnam-aTitle': '#975f5f', + + // .fort + 'fort-patrol-check-background': 'var(--theme-black)', + + // .market-item + 'market-item-background': '#0f1414', + 'market-item-order-hover-background': 'var(--theme-secondary-color)', + 'market-item-order-hover-border': '#eee', + + // .resource + 'resource-overlay-color': 'hsl(from var(--theme-html-background) h s calc(l - 15))', + 'resource-overlay-color-alt': 'hsl(from var(--theme-market-item-background) h s calc(l - 15))', + + // .modalBox + 'modalBox-background': '#282f2f', + + // Stars + 'star-2-fill': 'var(--theme-white)', + 'star-3-fill': '#cd7f32', + 'star-4-fill': '#c0c0c0', + 'star-5-fill': '#d4af37', + + // -webkit-scrollbar + 'webkit-scrollbar-background': 'var(--theme-html-background)', + 'webkit-scrollbar-thumb-background': '#F5F5F5', + }, + // Light theme + light: { + // Theme colors { + 'html-background': 'var(--theme-white)', + 'primary-border': 'var(--theme-black)', + 'secondary-border': '#4e4e4e', + 'primary-color': 'var(--theme-black)', + 'secondary-color': '#3a4344', + + 'link': 'var(--theme-bulma-link)', + 'link-hover': 'var(--theme-bulma-link-hover)', + 'enabled': '#008f0c', + 'disabled': '#800000', + // } + + // .has-text-xxx + 'has-text-advanced': '#0098a3', + 'has-text-alert': '#743e00', + 'has-text-caution': '#966100', + 'has-text-danger': '#470303', + 'has-text-fade': '#5e5e5e', + 'has-text-flair': 'var(--theme-has-text-special)', + 'has-text-info': 'var(--theme-bulma-info)', + 'has-text-label': '#1100ff', + 'has-text-special': '#91006c', + 'has-text-success': '#082412', + 'has-text-warning': '#7a6304', + + // .popper + 'popper': '#363636', + 'popper-has-text-label': 'var(--theme-has-text-label)', + 'popper-has-text-success': '#1c7e21', + 'popper-has-text-warning': 'var(--theme-has-text-warning)', + 'modal-child-popper-background': '#f5f5f5', + 'modal-child-popper-border': 'var(--theme-black)', + + /* AFP 2021 + // .fool + 'fool-has-text-danger': 'var(--theme-has-text-success)', + 'fool-has-text-success': 'var(--theme-has-text-danger)', + 'fool-popper-has-text-danger': 'var(--theme-fool-has-text-danger)', + 'fool-span-on': 'var(--theme-disabled)', + 'fool-span-off': 'var(--theme-enabled)', + */ + + // .tabs + 'tabs-li-is-active-link-border': 'var(--theme-bulma-link-active)', + 'tabs-li-is-active-link': 'var(--theme-bulma-link-active)', + + // .button + 'button-background': 'var(--theme-html-background)', + 'button': 'var(--theme-primary-color)', + 'button-hover-background': '#ccc', + 'button-hover': 'var(--theme-primary-color)', + 'button-focus-border': 'var(--theme-primary-color)', + + // .basic-button + 'basic-button-border-hover-background': '#ccc', + 'basic-button-border-hover': '#333', + + // .label + 'label': 'var(--theme-bulma-label)', + + // .checkbox + 'checkbox-hover': 'var(--theme-bulma-checkbox-hover)', + + // .dropdown + 'dropdown-content-background': 'var(--theme-html-background)', + + // .b-tooltip + 'b-tooltip-accent': '#f2f2f2', + 'b-tooltip-is-primary-background': 'var(--theme-b-tooltip-accent)', + 'b-tooltip-is-primary-border': '#f5f5f5', + 'b-tooltip-is-primary': 'var(--theme-black)', + + // UI Bars + 'bars-background': '#c7c7c7', + + // .meter + 'meter-low': '#cc0000', + 'meter-neutral': '#c0ce00', + 'meter-high': '#00af0f', + + // .main + 'div-special-border': '#3a4344', + 'div-special-gear-fill': '#3a4344', + 'div-special-hover-border': 'var(--theme-primary-border)', + 'div-special-hover-gear-fill': '#4a5354', + 'span-on-border': 'var(--theme-primary-border)', + 'span-on': 'var(--theme-enabled)', + 'span-on-warn': '#743e00', + 'span-off-border': 'var(--theme-primary-border)', + 'span-off': 'var(--theme-disabled)', + 'span-on-off-hover-border': 'var(--theme-primary-border)', + 'hl-button-border': 'var(--theme-disabled)', + 'link-button-background': '#ddd', + 'special-on-off-border': 'var(--theme-primary-border)', + 'oldTech': 'var(--theme-primary-color)', + 'cnam-aTitle': '#900', + + // .fort + 'fort-patrol-check-background': 'var(--theme-white)', + + // .market-item + 'market-item-background': '#ddd', + 'market-item-order-hover-background': '#ccc', + 'market-item-order-hover-border': '#333', + + // .resource + 'resource-overlay-color': 'hsl(from var(--theme-html-background) h s calc(l - 25))', + 'resource-overlay-color-alt': 'hsl(from var(--theme-market-item-background) h s calc(l - 25))', + + // .modalBox + 'modalBox-background': 'var(--theme-white)', + + // Stars + 'star-2-fill': 'var(--theme-black)', + 'star-3-fill': '#cd7f32', + 'star-4-fill': '#c0c0c0', + 'star-5-fill': '#d4af37', + + // -webkit-scrollbar + 'webkit-scrollbar-background': '#F5F5F5', + 'webkit-scrollbar-thumb-background': 'var(--theme-black)', + }, + + // Night theme + night: { + 'parent':['dark',], + // Theme colors { + 'html-background': 'var(--theme-black)', + // } + + // .has-text-xxx + 'has-text-flair': '#d39753', + 'has-text-special': '#e500b4', + + // .popper + 'popper': 'var(--theme-white)', + 'popper-has-text-label': '#ffff9e', + 'popper-has-text-success': '#23d160', + 'popper-has-text-warning': '#ffdd57', + 'modal-child-popper-background': '#0f0f0f', + 'modal-child-popper-border': '#999', + + // .b-tooltip + 'b-tooltip-accent': '#999', + 'b-tooltip-is-primary-background': '#0f0f0f', + 'b-tooltip-is-primary-border': '#999', + 'b-tooltip-is-primary': 'var(--theme-white)', + + // .market-item + 'market-item-background': '#1b1b1b', + + // .resource + 'resource-overlay-color': 'hsl(from var(--theme-html-background) h s calc(l + 10))', + 'resource-overlay-color-alt': 'hsl(from var(--theme-market-item-background) h s calc(l - 15))', + + // -webkit-scrollbar + 'webkit-scrollbar-thumb-background': '#727272', + }, + + // Red Green CB theme + redgreen:{ + 'parent':['night'], + // .has-text-xxx + 'has-text-danger': '#9900cc', + 'has-text-flair': 'var(--theme-has-text-success)', + 'has-text-special': '#ffff9e', + 'has-text-success': '#00ff00', + 'has-text-warning': '#ffcc00', + + // .popper + 'tabs-li-is-active-link': '#167df0', + + /* AFP 2021 + // .fool + 'fool-has-text-danger': 'var(--theme-has-text-success)', + 'fool-has-text-success': 'var(--theme-has-text-danger)', + 'fool-span-on': 'var(--theme-has-text-danger)', + 'fool-span-off': 'var(--theme-has-text-success)', + */ + + // .meter + 'meter-low': '#167df0', + 'meter-neutral': '#00af0f', + 'meter-high': 'var(--theme-white)', + + // .main + 'span-on': 'var(--theme-has-text-success)', + 'span-off': 'var(--theme-has-text-danger)', + }, + + // Dark Night theme + darkNight: { + 'parent':['night',], + // Theme colors { + 'primary-color': '#b8b8b8', + // } + + // .popper + 'popper': 'var(--theme-primary-color)', + + // .button + 'button': '#ccc', + + // .b-tooltip + 'b-tooltip-is-primary': 'var(--theme-primary-color)', + + //has-text-xxxx + 'has-text-warning': '#d6b220', + }, + + // GruvBox Light + gruvboxLight: { + 'parent':['light',], + // Theme colors { + 'html-background': '#fbf1c7', + 'primary-border': '#3c3836', + 'secondary-border': 'var(--theme-primary-border)', + 'primary-color': '#3c3836', + 'secondary-color': '#d5c4a1', + + 'link': '#427b58', + 'link-hover': '#689d6a', + 'enabled': '#79740e', + 'disabled': '#9d0006', + // } + + // .has-text-xxx + 'has-text-advanced': '#458588', + 'has-text-alert': '#af5d00', + 'has-text-caution': '#af3a03', + 'has-text-danger': 'var(--theme-disabled)', + 'has-text-fade': '#898B87', + 'has-text-flair': 'var(--theme-has-text-special)', + 'has-text-info': '#076678', + 'has-text-label': '#076678', + 'has-text-special': '#8f3f71', + 'has-text-success': 'var(--theme-enabled)', + 'has-text-warning': '#b57614', + + // .popper + 'popper': 'var(--theme-primary-color)', + 'popper-has-text-label': 'var(--theme-has-text-label)', + 'popper-has-text-success': 'var(--theme-has-text-success)', + 'popper-has-text-warning': 'var(--theme-has-text-warning)', + 'modal-child-popper-background': '#fbf1c7', + 'modal-child-popper-border': 'var(--theme-secondary-border)', + + /* AFP 2021 + // .fool + 'fool-has-text-danger': 'var(--theme-has-text-success)', + 'fool-has-text-success': 'var(--theme-has-text-danger)', + 'fool-popper-has-text-danger': 'var(--theme-popper-has-text-success)', + 'fool-span-on': 'var(--theme-disabled)', + 'fool-span-off': 'var(--theme-enabled)', + */ + + // .tabs + 'tabs-li-is-active-link-border': 'var(--theme-link)', + 'tabs-li-is-active-link': 'var(--theme-link)', + + // .button + 'button-background': '#d5c4a1', + 'button': 'var(--theme-primary-color)', + 'button-hover-background': 'var(--theme-secondary-color)', + 'button-hover': 'var(--theme-link-hover)', + 'button-focus-border': 'var(--theme-secondary-border)', + + // .basic-button + 'basic-button-border-hover-background': '#f2e5bc', + 'basic-button-border-hover': 'var(--theme-link)', + + // .label + 'label': 'var(--theme-primary-color)', + + // .checkbox + 'checkbox-hover': 'var(--theme-link)', + + // .dropdown + 'dropdown-content-background': 'var(--theme-button-background)', + + // .b-tooltip + 'b-tooltip-accent': '#fbf1c7', + 'b-tooltip-is-primary-background': 'var(--theme-b-tooltip-accent)', + 'b-tooltip-is-primary-border': 'var(--theme-primary-border)', + 'b-tooltip-is-primary': 'var(--theme-black)', + + // UI Bars + 'bars-background': 'var(--theme-secondary-color)', + + // .meter + 'meter-low': 'var(--theme-disabled)', + 'meter-neutral': 'var(--theme-has-text-caution)', + 'meter-high': 'var(--theme-has-text-info)', + + // .main + 'div-special-border': 'var(--theme-primary-border)', + 'div-special-gear-fill': 'var(--theme-link)', + 'div-special-hover-border': 'var(--theme-secondary-color)', + 'div-special-hover-gear-fill': '#F09D51', + 'span-on-border': 'var(--theme-primary-border)', + 'span-on': 'var(--theme-enabled)', + 'span-on-warn': '#af5d00', + 'span-off-border': 'var(--theme-primary-border)', + 'span-off': 'var(--theme-disabled)', + 'span-on-off-hover-border': 'var(--theme-secondary-color)', + 'hl-button-border': 'var(--theme-enabled)', + 'link-button-background': '#a89984', + 'special-on-off-border': 'var(--theme-primary-border)', + 'oldTech': 'var(--theme-primary-color)', + 'cnam-aTitle': 'var(--theme-disabled)', + + // .fort + 'fort-patrol-check-background': 'var(--theme-black)', + + // .market-item + 'market-item-background': '#f9f5d7', + 'market-item-order-hover-background': 'var(--theme-secondary-color)', + 'market-item-order-hover-border': 'var(--theme-link-hover)', + + // .resource + 'resource-overlay-color': 'hsl(from var(--theme-html-background) h s calc(l - 15))', + 'resource-overlay-color-alt': 'hsl(from var(--theme-market-item-background) h s calc(l - 15))', + + // .modalBox + 'modalBox-background': 'var(--theme-html-background)', + + // Stars + 'star-2-fill': 'var(--theme-white)', + 'star-3-fill': '#cd7f32', + 'star-4-fill': '#c0c0c0', + 'star-5-fill': '#d4af37', + + // -webkit-scrollbar + 'webkit-scrollbar-background': 'var(--theme-html-background)', + 'webkit-scrollbar-thumb-background': 'var(--theme-primary-border)', + }, + + // GruvBox Dark + gruvboxDark: { + 'parent':['dark',], + // Theme colors { + 'html-background': '#282828', + 'primary-border': '#3c3836', + 'secondary-border': '#665c54', + 'primary-color': '#ebdbb2', + 'secondary-color': '#504945', + + 'link': '#8ec07c', + 'link-hover': '#689d6a', + 'enabled': '#b8bb26', + 'disabled': '#fb4934', + // } + + // .has-text-xxx + 'has-text-advanced': '#458588', + 'has-text-alert': '#af5d00', + 'has-text-caution': '#fe8019', + 'has-text-danger': 'var(--theme-disabled)', + 'has-text-fade': '#898B87', + 'has-text-flair': 'var(--theme-has-text-special)', + 'has-text-info': '#83a598', + 'has-text-label': '#458588', + 'has-text-special': '#d3869b', + 'has-text-success': 'var(--theme-enabled)', + 'has-text-warning': '#fabd2f', + + // .popper + 'popper': 'var(--theme-primary-color)', + 'popper-has-text-label': 'var(--theme-has-text-label)', + 'popper-has-text-success': 'var(--theme-has-text-success)', + 'popper-has-text-warning': 'var(--theme-has-text-warning)', + 'modal-child-popper-background': '#282828', + 'modal-child-popper-border': 'var(--theme-secondary-border)', + + /* AFP 2021 + // .fool + 'fool-has-text-danger': 'var(--theme-has-text-success)', + 'fool-has-text-success': 'var(--theme-has-text-danger)', + 'fool-popper-has-text-danger': 'var(--theme-popper-has-text-success)', + 'fool-span-on': 'var(--theme-disabled)', + 'fool-span-off': 'var(--theme-enabled)', + */ + + // .tabs + 'tabs-li-is-active-link-border': 'var(--theme-link)', + 'tabs-li-is-active-link': 'var(--theme-link)', + + // .button + 'button-background': '#3c3836', + 'button': 'var(--theme-primary-color)', + 'button-hover-background': 'var(--theme-secondary-color)', + 'button-hover': 'var(--theme-link-hover)', + 'button-focus-border': 'var(--theme-secondary-border)', + + // .basic-button + 'basic-button-border-hover-background': '#1d2021', + 'basic-button-border-hover': 'var(--theme-link)', + + // .label + 'label': 'var(--theme-primary-color)', + + // .checkbox + 'checkbox-hover': 'var(--theme-link)', + + // .dropdown + 'dropdown-content-background': 'var(--theme-button-background)', + + // .b-tooltip + 'b-tooltip-accent': '#282828', + 'b-tooltip-is-primary-background': 'var(--theme-b-tooltip-accent)', + 'b-tooltip-is-primary-border': 'var(--theme-primary-border)', + 'b-tooltip-is-primary': 'var(--theme-primary-color)', + + // UI Bars + 'bars-background': 'var(--theme-secondary-color)', + + // .meter + 'meter-low': 'var(--theme-disabled)', + 'meter-neutral': 'var(--theme-has-text-caution)', + 'meter-high': 'var(--theme-has-text-info)', + + // .main + 'div-special-border': 'var(--theme-primary-border)', + 'div-special-gear-fill': '#f09d51', + 'div-special-hover-border': 'var(--theme-secondary-color)', + 'div-special-hover-gear-fill': 'var(--theme-link)', + 'span-on-border': 'var(--theme-primary-border)', + 'span-on': 'var(--theme-enabled)', + 'span-on-warn': '#af5d00', + 'span-off-border': 'var(--theme-primary-border)', + 'span-off': 'var(--theme-disabled)', + 'span-on-off-hover-border': 'var(--theme-secondary-color)', + 'hl-button-border': 'var(--theme-enabled)', + 'link-button-background': '#1d2021', + 'special-on-off-border': 'var(--theme-primary-border)', + 'oldTech': 'var(--theme-primary-color)', + 'cnam-aTitle': 'var(--theme-disabled)', + + // .fort + 'fort-patrol-check-background': 'var(--theme-black)', + + // .market-item + 'market-item-background': '#1d2021', + 'market-item-order-hover-background': 'var(--theme-secondary-color)', + 'market-item-order-hover-border': 'var(--theme-link-hover)', + + // .resource + 'resource-overlay-color': 'hsl(from var(--theme-html-background) h s calc(l - 15))', + 'resource-overlay-color-alt': 'hsl(from var(--theme-market-item-background) h s calc(l - 15))', + + //'html-background': '#282828', + + // .modalBox + 'modalBox-background': 'var(--theme-html-background)', + + // Stars + 'star-2-fill': 'var(--theme-primary-border)', + 'star-3-fill': '#cd7f32', + 'star-4-fill': '#c0c0c0', + 'star-5-fill': '#d4af37', + + // -webkit-scrollbar + 'webkit-scrollbar-background': 'var(--theme-html-background)', + 'webkit-scrollbar-thumb-background': 'var(--theme-primary-border)', + }, + + // GruvBox Dark Red Green CB theme + gruvboxDarkRG: { + 'parent':['gruvboxDark',], + // .has-text-xxx + 'has-text-danger': '#c409bb', + 'has-text-flair': 'var(--theme-has-text-success)', + 'has-text-special': '#ffff9e', + 'has-text-success': '#00ff00', + 'has-text-warning': '#ffcc00', + 'has-text-caution': '#9ab8ff', + 'has-text-info': '#83a598', + 'disabled': '#ffe940', + + // .popper + 'tabs-li-is-active-link': '#82bdff', + + // .switch input[type=checkbox]:checked+.check { + // background: #a28cdf; + // } + + // .meter + 'meter-low': 'var(--theme-disabled)', + 'meter-neutral': 'var(--theme-has-text-caution)', + 'meter-high': 'var(--theme-has-text-info)', + + // .main + 'span-on': 'var(--theme-has-text-success)', + 'span-off': 'var(--theme-has-text-danger)', + + 'cnam-aTitle': 'var(--theme-disabled)', + }, + + // Orange Soda theme + orangeSoda: { + // Theme colors { + 'html-background': '#131516', + 'primary-border': '#313638', + 'secondary-border': 'var(--theme-primary-border)', + 'primary-color': '#EBDBB2', + 'secondary-color': '#313638', + + 'link': '#F06543', + 'link-hover': '#D09376', + 'enabled': '#35A7FF', + 'disabled': '#C21E83', + // } + + // .has-text-xxx + 'has-text-advanced': '#00ac95', + 'has-text-alert': '#af5d00', + 'has-text-caution': '#F09D51', + 'has-text-danger': 'var(--theme-disabled)', + 'has-text-fade': '#898B87', + 'has-text-flair': 'var(--theme-has-text-special)', + 'has-text-info': 'var(--theme-bulma-info)', + 'has-text-label': '#35A7FF', + 'has-text-special': '#91006c', + 'has-text-success': 'var(--theme-enabled)', + 'has-text-warning': 'var(--theme-link)', + + // .popper + 'popper': 'var(--theme-primary-color)', + 'popper-has-text-label': 'var(--theme-has-text-label)', + 'popper-has-text-success': 'var(--theme-has-text-success)', + 'popper-has-text-warning': 'var(--theme-has-text-warning)', + 'modal-child-popper-background': '#292929', + 'modal-child-popper-border': 'var(--theme-secondary-border)', + + /* AFP 2021 + // .fool + 'fool-has-text-danger': 'var(--theme-has-text-success)', + 'fool-has-text-success': 'var(--theme-has-text-danger)', + 'fool-popper-has-text-danger': 'var(--theme-popper-has-text-success)', + 'fool-span-on': 'var(--theme-disabled)', + 'fool-span-off': 'var(--theme-enabled)', + */ + + // .tabs + 'tabs-li-is-active-link-border': 'var(--theme-link)', + 'tabs-li-is-active-link': 'var(--theme-link)', + + // .button + 'button-background': '#1C2021', + 'button': 'var(--theme-primary-color)', + 'button-hover-background': 'var(--theme-secondary-color)', + 'button-hover': 'var(--theme-link-hover)', + 'button-focus-border': 'var(--theme-secondary-border)', + + // .basic-button + 'basic-button-border-hover-background': '#292929', + 'basic-button-border-hover': 'var(--theme-link)', + + // .label + 'label': 'var(--theme-primary-color)', + + // .checkbox + 'checkbox-hover': 'var(--theme-link)', + + // .dropdown + 'dropdown-content-background': 'var(--theme-button-background)', + + // .b-tooltip + 'b-tooltip-accent': 'var(--theme-link-hover)', + 'b-tooltip-is-primary-background': 'var(--theme-b-tooltip-accent)', + 'b-tooltip-is-primary-border': 'var(--theme-primary-border)', + 'b-tooltip-is-primary': 'var(--theme-black)', + + // UI Bars + 'bars-background': 'var(--theme-secondary-color)', + + // .meter + 'meter-low': 'var(--theme-disabled)', + 'meter-neutral': '#38618C', + 'meter-high': '#35A7FF', + + // .main + 'div-special-border': 'var(--theme-primary-border)', + 'div-special-gear-fill': 'var(--theme-link)', + 'div-special-hover-border': 'var(--theme-secondary-color)', + 'div-special-hover-gear-fill': '#F09D51', + 'span-on-border': 'var(--theme-primary-border)', + 'span-on': 'var(--theme-enabled)', + 'span-on-warn': '#af5d00', + 'span-off-border': 'var(--theme-primary-border)', + 'span-off': 'var(--theme-disabled)', + 'span-on-off-hover-border': 'var(--theme-secondary-color)', + 'hl-button-border': 'var(--theme-enabled)', + 'link-button-background': '#181818', + 'special-on-off-border': 'var(--theme-primary-border)', + 'oldTech': 'var(--theme-primary-color)', + 'cnam-aTitle': 'var(--theme-disabled)', + + // .fort + 'fort-patrol-check-background': 'var(--theme-black)', + + // .market-item + 'market-item-background': '#292929', + 'market-item-order-hover-background': 'var(--theme-secondary-color)', + 'market-item-order-hover-border': 'var(--theme-link-hover)', + + // .resource + 'resource-overlay-color': 'hsl(from var(--theme-html-background) h s calc(l - 13))', + 'resource-overlay-color-alt': 'hsl(from var(--theme-market-item-background) h s calc(l - 15))', + + // .modalBox + 'modalBox-background': 'var(--theme-html-background)', + + // Stars + 'star-2-fill': 'var(--theme-white)', + 'star-3-fill': '#cd7f32', + 'star-4-fill': '#c0c0c0', + 'star-5-fill': '#d4af37', + + // -webkit-scrollbar + 'webkit-scrollbar-background': 'var(--theme-html-background)', + 'webkit-scrollbar-thumb-background': 'var(--theme-primary-border)', + }, + + // Dracula + dracula: { + 'parent':['dark',], + // Theme colors { + 'html-background': '#282a36', + 'primary-border': '#44475a', + 'secondary-border': '#44475a', + 'primary-color': '#f8f8f2', + 'secondary-color': '#6272a4', + 'dark-background': '#1a1c24', + + 'link': '#bd93f9', + 'link-hover': '#9573c5', + 'enabled': '#50fa7b', + 'disabled': '#ff5555', + // } + + // .has-text-xxx + 'has-text-advanced': '#8be9fd', + 'has-text-alert': '#e0a361', + 'has-text-caution': '#ffa26c', + 'has-text-danger': 'var(--theme-disabled)', + 'has-text-fade': '#6272a4', + 'has-text-flair': 'var(--theme-has-text-special)', + 'has-text-info': '#bd93f9', + 'has-text-label': '#7dcbdd', + 'has-text-special': '#ff79c6', + 'has-text-success': 'var(--theme-enabled)', + 'has-text-warning': '#f1fa8c', + + // .popper + 'popper': 'var(--theme-primary-color)', + 'popper-has-text-label': 'var(--theme-has-text-label)', + 'popper-has-text-success': 'var(--theme-has-text-success)', + 'popper-has-text-warning': 'var(--theme-has-text-warning)', + 'modal-child-popper-background': 'var(--theme-dark-background)', + 'modal-child-popper-border': 'var(--theme-secondary-border)', + + /* AFP 2021 + // .fool + 'fool-has-text-danger': 'var(--theme-has-text-success)', + 'fool-has-text-success': 'var(--theme-has-text-danger)', + 'fool-popper-has-text-danger': 'var(--theme-popper-has-text-success)', + 'fool-span-on': 'var(--theme-disabled)', + 'fool-span-off': 'var(--theme-enabled)', + */ + + // .tabs + 'tabs-li-is-active-link-border': 'var(--theme-link)', + 'tabs-li-is-active-link': 'var(--theme-link)', + + // .button + 'button-background': '#3f4253', + 'button': 'var(--theme-primary-color)', + 'button-hover-background': 'var(--theme-secondary-border)', + 'button-hover': 'var(--theme-link-hover)', + 'button-focus-border': 'var(--theme-secondary-border)', + + // .basic-button + 'basic-button-border-hover-background': 'var(--theme-dark-background)', + 'basic-button-border-hover': 'var(--theme-link)', + + // .label + 'label': 'var(--theme-primary-color)', + + // .checkbox + 'checkbox-hover': 'var(--theme-link)', + + // .dropdown + 'dropdown-content-background': 'var(--theme-button-background)', + + // .b-tooltip + 'b-tooltip-accent': '#282828', + 'b-tooltip-is-primary-background': 'var(--theme-b-tooltip-accent)', + 'b-tooltip-is-primary-border': 'var(--theme-primary-border)', + 'b-tooltip-is-primary': 'var(--theme-primary-color)', + + // UI Bars + 'bars-background': 'var(--theme-secondary-color)', + + // .meter + 'meter-low': 'var(--theme-disabled)', + 'meter-neutral': 'var(--theme-has-text-caution)', + 'meter-high': 'var(--theme-has-text-info)', + + // .main + 'div-special-border': 'var(--theme-primary-border)', + 'div-special-gear-fill': '#f09d51', + 'div-special-hover-border': 'var(--theme-secondary-color)', + 'div-special-hover-gear-fill': 'var(--theme-link)', + 'span-on-border': 'var(--theme-primary-border)', + 'span-on': 'var(--theme-enabled)', + 'span-on-warn': '#af5d00', + 'span-off-border': 'var(--theme-primary-border)', + 'span-off': 'var(--theme-disabled)', + 'span-on-off-hover-border': 'var(--theme-secondary-color)', + 'hl-button-border': 'var(--theme-enabled)', + 'link-button-background': 'var(--theme-dark-background)', + 'special-on-off-border': 'var(--theme-primary-border)', + 'oldTech': 'var(--theme-primary-color)', + 'cnam-aTitle': 'var(--theme-disabled)', + + // .fort + 'fort-patrol-check-background': 'var(--theme-black)', + + // .market-item + 'market-item-background': '#1d2021', + 'market-item-order-hover-background': 'var(--theme-secondary-color)', + 'market-item-order-hover-border': 'var(--theme-link-hover)', + + // .resource + 'resource-overlay-color': 'hsl(from var(--theme-html-background) h s calc(l - 15))', + 'resource-overlay-color-alt': 'hsl(from var(--theme-market-item-background) h s calc(l - 15))', + + // .modalBox + 'modalBox-background': 'var(--theme-html-background)', + + // Stars + 'star-2-fill': 'var(--theme-white)', + 'star-3-fill': '#cd7f32', + 'star-4-fill': '#c0c0c0', + 'star-5-fill': '#d4af37', + + // -webkit-scrollbar + 'webkit-scrollbar-background': 'var(--theme-html-background)', + 'webkit-scrollbar-thumb-background': 'var(--theme-primary-border)', + }, +} + +//theme settings for the changinator +export var theme_settings={ + get cur_theme(){return global.settings.theme}, + curThemeVar:'html-background', + themeSection:'button', + themeEditorOpen:false, + curThemeColor: '#00f', + pos:{ + x:0, + y:0, + }, +} + +//sort the theme variables into sections +export let theme_variables={ + 'button':{drop:'',dat:[]}, + 'border':{drop:'',dat:[]}, + 'has-text':{drop:'',dat:[]}, + 'popper':{drop:'',dat:[]}, + 'hover':{drop:'',dat:[]}, + 'link':{drop:'',dat:[]}, + 'background':{drop:'',dat:[]}, + 'b-tooltip':{drop:'',dat:[]}, + 'meter':{drop:'',dat:[]}, + 'div':{drop:'',dat:[]}, + 'span':{drop:'',dat:[]}, + 'market':{drop:'',dat:[]}, + 'star':{drop:'',dat:[]}, + 'scrollbar':{drop:'',dat:[]}, + 'misc':{drop:'',dat:[]}, +}; + +//load all from global (will be changed in a bit) +export function loadAllThemes(){ + for(let theme_name in global['custom_theme']){ + themes[theme_name]=global['custom_theme'][theme_name] + } +} + +//set each variable in the dom +function set_var(var_name,value){ + document.documentElement.style.setProperty(`--theme-${var_name}`,value); +} + +//set a theme +//how it works is it first tries to set the variable, and then tries to set any variables in the parent that havent been set +var theme=''; +export function set_theme(theme_name,has_set){ + let theme_dat = themes[theme_name] + if(!theme_dat){ + console.error(`Custom theme (${theme_name}) does not exist! Defaulting to 'Dark'.`) + global.settings.theme='dark'; + set_theme('dark') + return; + } + has_set = has_set ?? ['parent']; + + for(let key in themes.variables){ + set_var(key,themes.variables[key]); + } + + for(let key in theme_dat){ + let val=theme_dat[key] + if (has_set.includes(key)) continue; + set_var(key, val); + has_set.push(key); + } + + if(theme_dat.hasOwnProperty('parent')){ + theme_dat.parent.forEach(parent=>{ + has_set=set_theme(parent,has_set); + }); + } + theme = theme_name; + return has_set; +} + +//not needed soon +export function createNewCustom(){ + themes['new_theme']={ + parent:[global.settings.theme], + } + global.custom_theme['new_theme']=themes['new_theme'] +} + +//get the the value associated with a var, should be called getVar but whatever +export let broke_color='#0ff00f'; +export function getThemeVar(name,theme_name){ + if(!theme_name && !global.hasOwnProperty('settings')){return broke_color;} + let theme_dat=themes[theme_name ?? global.settings.theme]; + if(theme_dat.hasOwnProperty(name)){ + return theme_dat[name]; + } + if(theme_dat.hasOwnProperty('parent')){ + for(let i in theme_dat.parent){ + let parent=theme_dat.parent[i]; + let val=getThemeVar(name,parent) + if(val!=broke_color){ + return val; + } + } + } + if(themes.variables.hasOwnProperty(name)){ + return themes.variables[name] + } + return broke_color; +} + +//uhh imma have to check again what this does +export let var_regx=/var\(--theme-(.*?)\)/; +export function getVar(name,theme_name){ + let val=getThemeVar(name,theme_name); + return val[0]=="#" ? val : getVar(val.match(var_regx)[1]); +} + +//set the value for a variable, in both the theme and dom +export function setThemeVar(name,value){ + themes[global.settings.theme][name]=value; + set_var(name,value) +} + +//load the theme picker html stuff (at least most of it) +export function loadCustomThemeHTML(){ + //dark theme has all the variables + let vals=Object.keys(themes.dark) + //dropdown items + for(let i in vals){ + let var_dropdown=`{{ 'theme_var_${vals[i]}' | label }}` + let added_any=false; + //add them to the theme sections + Object.keys(theme_variables).forEach(theme_section=>{ + if(vals[i].includes(theme_section)){ + theme_variables[theme_section].dat.push(var_dropdown) + added_any=true; + } + }); + //if not added anywhere, misc is the place + if(!added_any){ + theme_variables['misc'].dat.push(var_dropdown) + } + } + + let all_theme_sections='';//each individual section + let theme_section_sel='';//section selector + Object.keys(theme_variables).forEach(theme_section=>{ + let section_variables=theme_variables[theme_section].dat.join(''); + all_theme_sections+=` + + ${section_variables} + ` + theme_section_sel+=`{{ 'theme_section_${theme_section}' | label }}`; + }); + //add to the end of the body + document.querySelector('body').insertAdjacentHTML('beforeend', + `
+ Theme Editor + +
+ + + ${theme_section_sel} + + ${all_theme_sections} + +
+ +
`); + + vBind({ + el:'#themeColorPicker', + data:{ + t:theme_settings, + }, + methods:{ + newCustomTheme(){ + createNewCustom() + }, + setCurThemeVar(name,t){ + t.curThemeVar=name; + let val=getThemeVar(name); + if(val.includes('var')){ + let nval=val.match(/var\(([a-zA-Z-]+)\)/)[1]; + + val=getComputedStyle(document.documentElement).getPropertyValue(nval).trim(); + } + if(val.length==4){ + val=`#${val[1]}${val[1]}${val[2]}${val[2]}${val[3]}${val[3]}` + } + t.curThemeColor=val + }, + changeThemeColor(t){ + // console.log(t.curThemeVar,t.curThemeColor); + setThemeVar(t.curThemeVar,t.curThemeColor); + }, + startDrag(e){ + startDrag(e) + }, + }, + filters: { + label(lbl){ + return loc(lbl); + }, + } + }); +} + +//move the color picker! +let mouseX=0, mouseY=0; +function startDrag(event) { + // Record initial mouse position + mouseX = event.clientX + mouseY = event.clientY + console.log("started!") + + // Attach listeners to window so movement stays smooth even if mouse leaves the div + window.addEventListener('mousemove', drag) + window.addEventListener('mouseup', stopDrag) +} +function drag(event) { + // Calculate how far the mouse moved + const deltaX = event.clientX - mouseX + const deltaY = event.clientY - mouseY + + // Update our reactive coordinates + theme_settings.pos.x += deltaX + theme_settings.pos.y += deltaY + + // Reset initial mouse position for the next frame + mouseX = event.clientX + mouseY = event.clientY +} +function stopDrag() { + window.removeEventListener('mousemove', drag) + window.removeEventListener('mouseup', stopDrag) +} \ No newline at end of file From 26def2ce4dc7a4c3396d384cf058244012db7eba Mon Sep 17 00:00:00 2001 From: Etcetera_ Date: Fri, 15 May 2026 12:58:04 -0600 Subject: [PATCH 03/45] added wiki/themes.js --- src/wiki/themes.js | 132 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 src/wiki/themes.js diff --git a/src/wiki/themes.js b/src/wiki/themes.js new file mode 100644 index 000000000..7a891610f --- /dev/null +++ b/src/wiki/themes.js @@ -0,0 +1,132 @@ +import { global } from './../vars.js'; +import { loc } from './../locale.js'; +import { clearElement, svgIcons, svgViewBox, format_emblem, getBaseIcon, sLevel } from './../functions.js'; +import { vBind, popover } from './../functions.js'; +import { theme_variables, themes, getThemeVar, broke_color, var_regx, getVar } from './../themes.js'; + +import { sideMenu, infoBoxBuilder, createRevealSection, createCalcSection, getSolarName } from './functions.js'; + +let name_regx=/custom_themes_(.*?)$/; +export function buildThemesPages(page_name){ + //get the actaul page name, not the wiki page name + if (name_regx.test(page_name)){ + page_name=page_name.match(name_regx)[1] + } + + let content=$('#content'); + clearElement(content); + content.append(page_data); + let mainContent=sideMenu('create',content); + + //only the intro page is special + if(page_name=='intro'){ + buildIntroPage(mainContent) + } + else{ + buildPage(mainContent,page_name) + } +} + +//contrast with background color, so colors are easy to see +let contrast_color='#fff'; +function buildPage(mainContent,page_name){ + contrast_color=invCol(getVar('html-background')); + + let page_label=loc(`theme_section_${page_name}`); + let page_main_text=loc(`wiki_custom_theme_page_maintext`,[page_label]); + let page_sub_text='';//loc(`wiki_custom_theme_${page_name}-include`) + mainContent.append(` +
+

${page_label}

+
+ ${page_main_text} +
+
+ ${page_sub_text} +
+ +
`); + sideMenu('add',`custom_themes_${page_name}`,'intro',loc(`theme_section_intro`),) + + theme_variables[page_name].dat.forEach(elm=>{ + buildOneElm(mainContent,elm,page_name) + }); +} + +//build one box / variable +function buildOneElm(mainContent,elm,section_name){ + let name=`theme_var_${elm}`; + let col_path=get_color_path(elm);//what does it get the color from (other variables?) + + let col_disp=col_path.map(path_val=>{ + let path_name=path_val[0]=="#" ? (path_val==broke_color ? '' : `${colorBox(path_val)}${path_val}`) : loc(`theme_var_${path_val}`); + return `${path_name}`; + }).join(' -> ');//to display that path + + let side_elm=elm.replaceAll("-","_"); + let include_text=loc(name+'_wiki').split(";").map(elm=>`
  • - ${elm}
    • `); + let true_include_text=loc('theme_var_includes'); + + mainContent.append(` +
    +

    ${loc(name)} (${elm})

    +
    + ${true_include_text} +
      ${include_text.join('')}
    +
    +
    + Current Color: ${col_disp} +
    + +
    `); + sideMenu('add',`custom_themes-${section_name}`,side_elm,loc(name)); +} +function colorBox(col){ + return ` ` +} + +function buildIntroPage(mainContent){ + { + infoBoxBuilder(mainContent,{ + name:`intro-intro`, + template:'custom_theme', + label:loc(`theme_section_intro`), + paragraphs:4, + break:[1,3], + h_level:2, + }); + sideMenu('add',`custom_themes_intro`,'intro',loc(`theme_section_intro`),) + } +} + +//get the full color path! +function get_color_path(var_name,colors,theme_name){ + let theme_dat=themes[theme_name ?? global.settings.theme]; + colors=colors ?? []; + + let cur_val = getThemeVar(var_name,theme_name); + + + if(var_regx.test(cur_val)){ + cur_val=cur_val.match(var_regx)[1] + colors.push(cur_val); + let n_val=get_color_path(cur_val,colors,theme_name); + colors=n_val + } + else{ + colors.push(cur_val) + } + + return colors +} + +//Black / White contrast to help with readability +function invCol(hex){ + // https://stackoverflow.com/a/3943023/112731 + hex=hex.slice(1); + if(hex.length==3){ + hex=hex[0].count(2)+hex[1].count(2)+hex[2].count(2); + } + let [r,g,b]=[hex.slice(0,2),hex.slice(2,4),hex.slice(4,6)].map(hex_col=>parseInt(hex_col,16)); + return (r * 0.299 + g * 0.587 + b * 0.114) > 186 ? '#000000' : '#ffffff'; +} From 73c83efb3728216155f5cff3707283da4ace52d0 Mon Sep 17 00:00:00 2001 From: Etcetera_ Date: Fri, 15 May 2026 13:14:03 -0600 Subject: [PATCH 04/45] just a test --- src/wiki/themes.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/wiki/themes.js b/src/wiki/themes.js index 7a891610f..455982a27 100644 --- a/src/wiki/themes.js +++ b/src/wiki/themes.js @@ -6,6 +6,7 @@ import { theme_variables, themes, getThemeVar, broke_color, var_regx, getVar } f import { sideMenu, infoBoxBuilder, createRevealSection, createCalcSection, getSolarName } from './functions.js'; +//testing testing let name_regx=/custom_themes_(.*?)$/; export function buildThemesPages(page_name){ //get the actaul page name, not the wiki page name From 309bb4447b9e29fea44e61803f71b2b53e615950 Mon Sep 17 00:00:00 2001 From: Etcetera_ Date: Fri, 15 May 2026 13:21:54 -0600 Subject: [PATCH 05/45] adding the wiki pages and adding the ability for a page name to be overriden, so some names can be used multiple times --- src/wiki/wiki.js | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/src/wiki/wiki.js b/src/wiki/wiki.js index 89f26aa84..7bf896a53 100644 --- a/src/wiki/wiki.js +++ b/src/wiki/wiki.js @@ -1,4 +1,5 @@ import { global, setGlobal, save } from './../vars.js'; +import { set_theme, loadAllThemes, themes, theme_variables } from './../themes.js'; import { loc } from './../locale.js'; import {} from './init.js'; import {} from './../achieve.js'; @@ -15,8 +16,11 @@ import { eventsPage } from './events.js'; import { arpaPage } from './arpa.js'; import { changeLog } from './change.js'; import { cancelSearchIndexing, search } from './search.js'; +import { buildThemesPages } from './themes.js'; $('body').empty(); +loadAllThemes(); +set_theme(global.settings.theme); initPage(); function initPage(){ @@ -144,6 +148,16 @@ function initPage(){ { key: 'feats' } ] }, + { + key:'custom_themes', + submenu:[ + { + key:'custom_themes_intro', + override_text:'theme_section_intro', + }, + ...Object.keys(theme_variables).map(item=>{return {key:`custom_themes_${item}`,override_text:`theme_section_${item}`}}) + ], + }, { key: 'changelog', }, @@ -278,7 +292,10 @@ async function menuDispatch(main,sub,frag){ } setWindowHash(main,sub,frag); break; - + case 'custom_themes': + buildThemesPages(sub); + setWindowHash(main,sub,frag); + break; case 'changelog': changeLog(); setWindowHash(main, sub, frag); @@ -316,17 +333,17 @@ function buiildMenu(items,set,parent){ let menu = ``; for (let i=0; i 1 && hash[1] === items[i].key) ? ` :active="true" expanded` : ''; - menu = menu + ``; + menu = menu + ``; menu = menu + buiildMenu(items[i].submenu,false,items[i].key); menu = menu + ``; } else { let active = (!hash && set && i === 0) || (hash && hash[0] === items[i].key) ? ` :active="true"` : ''; let args = parent ? `'${parent}','${items[i].key}'` : `'${items[i].key}',false`; - menu = menu + `` + menu = menu + `` } } return menu; From 148f9ba1b17cf95384c29a8ad53d1b50afb79746 Mon Sep 17 00:00:00 2001 From: Etcetera_ Date: Fri, 15 May 2026 13:59:36 -0600 Subject: [PATCH 06/45] adding custom themes to index.js adding stuff to the .less, and making it work in the style setter (including in main.js, and var.js) If their is no custom_theme in global, its added now I BELIEVE THIS IS ALL! (i have not run it yet, so time to see what i broke!) SOME FIXES: The wiki said "has-text-caution" was the non-limiting insuficient resource, but it was "has-text-alert" Fixed building costList's checking if a res has 'has-text-danger' OR 'has-text-alert' (limiting or non-limiting, insufuicient res) but only removed 'has-text-danger'. now removes both --- src/evolve.less | 1723 +++++++++++------------------------------ src/index.js | 25 +- src/main.js | 9 +- src/vars.js | 9 + src/wiki/mechanics.js | 2 +- 5 files changed, 480 insertions(+), 1288 deletions(-) diff --git a/src/evolve.less b/src/evolve.less index f0db46e31..52893fc21 100644 --- a/src/evolve.less +++ b/src/evolve.less @@ -49,889 +49,256 @@ Misc ---------> Main template @bulma-link-hover: #363636; @bulma-label: #363636; @bulma-checkbox-hover: #363636; +//all the variables +:root{ + --theme-html-background: #fff; + --theme-primary-border: #fff; + --theme-secondary-border: #fff; + --theme-primary-color: #fff; + --theme-secondary-color: #fff; + + --theme-link: #fff; + --theme-link-hover: #fff; + --theme-enabled: #fff; + --theme-disabled: #fff; + + // .has-text-xxx + --theme-has-text-advanced: #fff; + --theme-has-text-alert: #fff; + --theme-has-text-caution: #fff; + --theme-has-text-danger: #fff; + --theme-has-text-fade: #fff; + --theme-has-text-flair: #fff; + --theme-has-text-label: #fff; + --theme-has-text-special: #fff; + --theme-has-text-info: #fff; + --theme-has-text-success: #fff; + --theme-has-text-warning: #fff; + + // .popper + + --theme-popper: #fff; + --theme-popper-has-text-label: #fff; + --theme-popper-has-text-success: #fff; + --theme-popper-has-text-warning: #fff; + --theme-modal-child-popper-background: #fff; + --theme-modal-child-popper-border: #fff; + + /* AFP 2021 + // .fool + --theme-fool-has-text-danger: #fff; + --theme-fool-has-text-success: #fff; + --theme-fool-popper-has-text-danger: #fff; + --theme-fool-span-on: #fff; + --theme-fool-span-off: #fff; + */ + + // .tabs + --theme-tabs-li-is-active-link-border: #fff; + --theme-tabs-li-is-active-link: #fff; -// Library containing all theme colors -#lib { - .themes() { - - // Dark theme - .dark() { - // Theme colors { - @html-background: #1f2424; - @primary-border: #ccc; - @secondary-border: @primary-border; - @primary-color: @white; - @secondary-color: #3a4344; - - @link: #1abc9c; - @link-hover: #f2f2f2; - @enabled: #00af0f; - @disabled: #c20000; - // } - - // .has-text-xxx - @has-text-advanced: #00ac95; - @has-text-alert: #af5d00; - @has-text-caution: #ffa500; - @has-text-danger: @bulma-danger; - @has-text-fade: #5e5e5e; - @has-text-flair: @has-text-special; - @has-text-label: #ffff9e; - @has-text-special: #91006c; - @has-text-info: @bulma-info; - @has-text-success: @bulma-success; - @has-text-warning: @bulma-warning; - - // .popper - @popper: #363636; - @popper-has-text-label: #1100ff; - @popper-has-text-success: #1c7e21; - @popper-has-text-warning: #776425; - @modal-child-popper-background: #f5f5f5; - @modal-child-popper-border: @black; - - /* AFP 2021 - // .fool - @fool-has-text-danger: #23d160; - @fool-has-text-success: #ff3860; - @fool-popper-has-text-danger: @popper-has-text-success; - @fool-span-on: @disabled; - @fool-span-off: @enabled; - */ - - // .tabs - @tabs-li-is-active-link-border: @link; - @tabs-li-is-active-link: @link; - - // .button - @button-background: #282f2f; - @button: @primary-color; - @button-hover-background: @secondary-color; - @button-hover: @link-hover; - @button-focus-border: #dbdbdb; - - // .basic-button - @basic-button-border-hover-background: @secondary-color; - @basic-button-border-hover: #eee; - - // .label - @label: #dbdee0; - - // .checkbox - @checkbox-hover: @link; - - // .dropdown - @dropdown-content-background: #1f2424; - - // .b-tooltip - @b-tooltip-accent: @link-hover; - @b-tooltip-is-primary-background: @b-tooltip-accent; - @b-tooltip-is-primary-border: #f5f5f5; - @b-tooltip-is-primary: @black; - - // UI Bars - @bars-background: @secondary-color; - - // .meter - @meter-low: #cc0000; - @meter-neutral: #c0ce00; - @meter-high: #00af0f; - - // .main - @div-special-border: #282f2f; - @div-special-gear-fill: #ad5f12; - @div-special-hover-border: @secondary-color; - @div-special-hover-gear-fill: #d4af37; - @span-on-border: #282f2f; - @span-on: @enabled; - @span-on-warn: #af5d00; - @span-off-border: #282f2f; - @span-off: @disabled; - @span-on-off-hover-border: @secondary-color; - @hl-button-border: @enabled; - @link-button-background: #181818; - @special-on-off-border: #181818; - @oldTech: @primary-color; - @cnam-aTitle: #975f5f; - - // .fort - @fort-patrol-check-background: @black ; - - // .market-item - @market-item-background: #0f1414; - @market-item-order-hover-background: @secondary-color; - @market-item-order-hover-border: #eee; - - // .resource - @resource-overlay-color: darken(@html-background, 15%); - @resource-overlay-color-alt: darken(@market-item-background, 15%); - - // .modalBox - @modalBox-background: #282f2f; - - // Stars - @star-2-fill: @white; - @star-3-fill: #cd7f32; - @star-4-fill: #c0c0c0; - @star-5-fill: #d4af37; - - // -webkit-scrollbar - @webkit-scrollbar-background: @html-background; - @webkit-scrollbar-thumb-background: #F5F5F5; - } - - // Light theme - .light() { - // Theme colors { - @html-background: @white; - @primary-border: @black; - @secondary-border: #4e4e4e; - @primary-color: @black; - @secondary-color: #3a4344; - - @link: @bulma-link; - @link-hover: @bulma-link-hover; - @enabled: #008f0c; - @disabled: #800000; - // } - - // .has-text-xxx - @has-text-advanced: #0098a3; - @has-text-alert: #743e00; - @has-text-caution: #966100; - @has-text-danger: #470303; - @has-text-fade: #5e5e5e; - @has-text-flair: @has-text-special; - @has-text-info: @bulma-info; - @has-text-label: #1100ff; - @has-text-special: #91006c; - @has-text-success: #082412; - @has-text-warning: #7a6304; - - // .popper - @popper: #363636; - @popper-has-text-label: @has-text-label; - @popper-has-text-success: #1c7e21; - @popper-has-text-warning: @has-text-warning; - @modal-child-popper-background: #f5f5f5; - @modal-child-popper-border: @black; - - /* AFP 2021 - // .fool - @fool-has-text-danger: @has-text-success; - @fool-has-text-success: @has-text-danger; - @fool-popper-has-text-danger: @fool-has-text-danger; - @fool-span-on: @disabled; - @fool-span-off: @enabled; - */ - - // .tabs - @tabs-li-is-active-link-border: @bulma-link-active; - @tabs-li-is-active-link: @bulma-link-active; - - // .button - @button-background: @html-background; - @button: @primary-color; - @button-hover-background: #ccc; - @button-hover: @primary-color; - @button-focus-border: @primary-color; - - // .basic-button - @basic-button-border-hover-background: #ccc; - @basic-button-border-hover: #333; - - // .label - @label: @bulma-label; - - // .checkbox - @checkbox-hover: @bulma-checkbox-hover; - - // .dropdown - @dropdown-content-background: @html-background; - - // .b-tooltip - @b-tooltip-accent: #f2f2f2; - @b-tooltip-is-primary-background: @b-tooltip-accent; - @b-tooltip-is-primary-border: #f5f5f5; - @b-tooltip-is-primary: @black; - - // UI Bars - @bars-background: #c7c7c7; - - // .meter - @meter-low: #cc0000; - @meter-neutral: #c0ce00; - @meter-high: #00af0f; - - // .main - @div-special-border: #3a4344; - @div-special-gear-fill: #3a4344; - @div-special-hover-border: @primary-border; - @div-special-hover-gear-fill: #4a5354; - @span-on-border: @primary-border; - @span-on: @enabled; - @span-on-warn: #743e00; - @span-off-border: @primary-border; - @span-off: @disabled; - @span-on-off-hover-border: @primary-border; - @hl-button-border: @disabled; - @link-button-background: #ddd; - @special-on-off-border: @primary-border; - @oldTech: @primary-color; - @cnam-aTitle: #900; - - // .fort - @fort-patrol-check-background: @white ; - - // .market-item - @market-item-background: #ddd; - @market-item-order-hover-background: #ccc; - @market-item-order-hover-border: #333; - - // .resource - @resource-overlay-color: darken(@html-background, 25%); - @resource-overlay-color-alt: darken(@market-item-background, 25%); - - // .modalBox - @modalBox-background: @white; - - // Stars - @star-2-fill: @black; - @star-3-fill: #cd7f32; - @star-4-fill: #c0c0c0; - @star-5-fill: #d4af37; - - // -webkit-scrollbar - @webkit-scrollbar-background: #F5F5F5; - @webkit-scrollbar-thumb-background: @black; - } - - // Night theme - .night() { - // Theme colors { - @html-background: @black; - // } - - // .has-text-xxx - @has-text-flair: #d39753; - @has-text-special: #e500b4; - - // .popper - @popper: @white ; - @popper-has-text-label: #ffff9e; - @popper-has-text-success: #23d160; - @popper-has-text-warning: #ffdd57; - @modal-child-popper-background: #0f0f0f; - @modal-child-popper-border: #999; - - // .b-tooltip - @b-tooltip-accent: #999; - @b-tooltip-is-primary-background: #0f0f0f; - @b-tooltip-is-primary-border: #999; - @b-tooltip-is-primary: @white; - - // .market-item - @market-item-background: #1b1b1b; - - // .resource - @resource-overlay-color: lighten(@html-background, 10%); - @resource-overlay-color-alt: darken(@market-item-background, 15%); - - // -webkit-scrollbar - @webkit-scrollbar-thumb-background: #727272; - } - - // Red Green CB theme - .redgreen() { - // .has-text-xxx - @has-text-danger: #9900cc; - @has-text-flair: @has-text-success; - @has-text-special: #ffff9e; - @has-text-success: #00ff00; - @has-text-warning: #ffcc00; - - // .popper - @tabs-li-is-active-link: #167df0; - - /* AFP 2021 - // .fool - @fool-has-text-danger: @has-text-success; - @fool-has-text-success: @has-text-danger; - @fool-span-on: @has-text-danger; - @fool-span-off: @has-text-success; - */ - - // .meter - @meter-low: #167df0; - @meter-neutral: #00af0f; - @meter-high: @white; - - // .main - @span-on: @has-text-success; - @span-off: @has-text-danger; - } - - // Dark Night theme - .darkNight() { - // Theme colors { - @primary-color: #b8b8b8; - // } - - // .popper - @popper: @primary-color ; - - // .button - @button: #ccc; - - // .b-tooltip - @b-tooltip-is-primary: @primary-color; - } - - // GruvBox Light - .gruvboxLight() { - // Theme colors { - @html-background: #fbf1c7; - @primary-border: #3c3836; - @secondary-border: @primary-border; - @primary-color: #3c3836; - @secondary-color: #d5c4a1; - - @link: #427b58; - @link-hover: #689d6a; - @enabled: #79740e; - @disabled: #9d0006; - // } - - // .has-text-xxx - @has-text-advanced: #458588; - @has-text-alert: #af5d00; - @has-text-caution: #af3a03; - @has-text-danger: @disabled ; - @has-text-fade: #898B87; - @has-text-flair: @has-text-special; - @has-text-info: #076678; - @has-text-label: #076678; - @has-text-special: #8f3f71; - @has-text-success: @enabled ; - @has-text-warning: #b57614 ; - - // .popper - @popper: @primary-color ; - @popper-has-text-label: @has-text-label ; - @popper-has-text-success: @has-text-success ; - @popper-has-text-warning: @has-text-warning ; - @modal-child-popper-background: #fbf1c7; - @modal-child-popper-border: @secondary-border; - - /* AFP 2021 - // .fool - @fool-has-text-danger: @has-text-success; - @fool-has-text-success: @has-text-danger; - @fool-popper-has-text-danger: @popper-has-text-success; - @fool-span-on: @disabled; - @fool-span-off: @enabled; - */ - - // .tabs - @tabs-li-is-active-link-border: @link; - @tabs-li-is-active-link: @link; - - // .button - @button-background: #d5c4a1; - @button: @primary-color; - @button-hover-background: @secondary-color; - @button-hover: @link-hover; - @button-focus-border: @secondary-border; - - // .basic-button - @basic-button-border-hover-background: #f2e5bc; - @basic-button-border-hover: @link; - - // .label - @label: @primary-color; - - // .checkbox - @checkbox-hover: @link; - - // .dropdown - @dropdown-content-background: @button-background; - - // .b-tooltip - @b-tooltip-accent: #fbf1c7; - @b-tooltip-is-primary-background: @b-tooltip-accent; - @b-tooltip-is-primary-border: @primary-border; - @b-tooltip-is-primary: @black; - - // UI Bars - @bars-background: @secondary-color; - - // .meter - @meter-low: @disabled; - @meter-neutral: @has-text-caution; - @meter-high: @has-text-info; - - // .main - @div-special-border: @primary-border; - @div-special-gear-fill: @link; - @div-special-hover-border: @secondary-color; - @div-special-hover-gear-fill: #F09D51; - @span-on-border: @primary-border; - @span-on: @enabled; - @span-on-warn: #af5d00; - @span-off-border: @primary-border; - @span-off: @disabled; - @span-on-off-hover-border: @secondary-color; - @hl-button-border: @enabled; - @link-button-background: #a89984; - @special-on-off-border: @primary-border; - @oldTech: @primary-color; - @cnam-aTitle: @disabled; - - // .fort - @fort-patrol-check-background: @black ; - - // .market-item - @market-item-background: #f9f5d7; - @market-item-order-hover-background: @secondary-color; - @market-item-order-hover-border: @link-hover; - - // .resource - @resource-overlay-color: darken(@html-background, 15%); - @resource-overlay-color-alt: darken(@market-item-background, 15%); - - // .modalBox - @modalBox-background: @html-background; - - // Stars - @star-2-fill: @black; - @star-3-fill: #cd7f32; - @star-4-fill: #c0c0c0; - @star-5-fill: #d4af37; - - // -webkit-scrollbar - @webkit-scrollbar-background: @html-background; - @webkit-scrollbar-thumb-background: @primary-border; - } - - // GruvBox Dark - .gruvboxDark() { - // Theme colors { - @html-background: #282828; - @primary-border: #3c3836; - @secondary-border: #665c54; - @primary-color: #ebdbb2; - @secondary-color: #504945; - - @link: #8ec07c; - @link-hover: #689d6a; - @enabled: #b8bb26; - @disabled: #fb4934; - // } - - // .has-text-xxx - @has-text-advanced: #458588; - @has-text-alert: #af5d00; - @has-text-caution: #fe8019; - @has-text-danger: @disabled ; - @has-text-fade: #898B87; - @has-text-flair: @has-text-special; - @has-text-info: #83a598; - @has-text-label: #458588; - @has-text-special: #d3869b; - @has-text-success: @enabled ; - @has-text-warning: #fabd2f ; - - // .popper - @popper: @primary-color ; - @popper-has-text-label: @has-text-label ; - @popper-has-text-success: @has-text-success ; - @popper-has-text-warning: @has-text-warning ; - @modal-child-popper-background: #282828; - @modal-child-popper-border: @secondary-border; - - /* AFP 2021 - // .fool - @fool-has-text-danger: @has-text-success; - @fool-has-text-success: @has-text-danger; - @fool-popper-has-text-danger: @popper-has-text-success; - @fool-span-on: @disabled; - @fool-span-off: @enabled; - */ - - // .tabs - @tabs-li-is-active-link-border: @link; - @tabs-li-is-active-link: @link; - - // .button - @button-background: #3c3836; - @button: @primary-color; - @button-hover-background: @secondary-color; - @button-hover: @link-hover; - @button-focus-border: @secondary-border; - - // .basic-button - @basic-button-border-hover-background: #1d2021; - @basic-button-border-hover: @link; - - // .label - @label: @primary-color; + // .button + --theme-button-background: #fff; + --theme-button: #fff; + --theme-button-hover-background: #fff; + --theme-button-hover: #fff; + --theme-button-focus-border: #fff; - // .checkbox - @checkbox-hover: @link; + // .basic-button + --theme-basic-button-border-hover-background: #fff; + --theme-basic-button-border-hover: #fff; - // .dropdown - @dropdown-content-background: @button-background; + // .label + --theme-label: #fff; - // .b-tooltip - @b-tooltip-accent: #282828; - @b-tooltip-is-primary-background: @b-tooltip-accent; - @b-tooltip-is-primary-border: @primary-border; - @b-tooltip-is-primary: @primary-color; + // .checkbox + --theme-checkbox-hover: #fff; - // UI Bars - @bars-background: @secondary-color; + // .dropdown + --theme-dropdown-content-background: #fff; - // .meter - @meter-low: @disabled; - @meter-neutral: @has-text-caution; - @meter-high: @has-text-info; + // .b-tooltip + --theme-b-tooltip-accent: #fff; + --theme-b-tooltip-is-primary-background: #fff; + --theme-b-tooltip-is-primary-border: #fff; + --theme-b-tooltip-is-primary: #fff; - // .main - @div-special-border: @primary-border; - @div-special-gear-fill: #f09d51; - @div-special-hover-border: @secondary-color; - @div-special-hover-gear-fill: @link; - @span-on-border: @primary-border; - @span-on: @enabled; - @span-on-warn: #af5d00; - @span-off-border: @primary-border; - @span-off: @disabled; - @span-on-off-hover-border: @secondary-color; - @hl-button-border: @enabled; - @link-button-background: #1d2021; - @special-on-off-border: @primary-border; - @oldTech: @primary-color; - @cnam-aTitle: @disabled; - - // .fort - @fort-patrol-check-background: @black ; - - // .market-item - @market-item-background: #1d2021; - @market-item-order-hover-background: @secondary-color; - @market-item-order-hover-border: @link-hover; - - // .resource - @resource-overlay-color: darken(@html-background, 15%); - @resource-overlay-color-alt: darken(@market-item-background, 15%); - - //@html-background: #282828; - - // .modalBox - @modalBox-background: @html-background; - - // Stars - @star-2-fill: @white; - @star-3-fill: #cd7f32; - @star-4-fill: #c0c0c0; - @star-5-fill: #d4af37; - - // -webkit-scrollbar - @webkit-scrollbar-background: @html-background; - @webkit-scrollbar-thumb-background: @primary-border; - } - - // GruvBox Dark Red Green CB theme - .gruvboxDarkRG() { - // .has-text-xxx - @has-text-danger: #c409bb; - @has-text-flair: @has-text-success; - @has-text-special: #ffff9e; - @has-text-success: #00ff00; - @has-text-warning: #ffcc00; - @has-text-caution: #9ab8ff; - @has-text-info: #83a598; - @disabled: #ffe940; - - // .popper - @tabs-li-is-active-link: #82bdff; - - .switch input[type=checkbox]:checked+.check { - background: #a28cdf; - } - - /* AFP 2021 - // .fool - @fool-has-text-danger: @has-text-success; - @fool-has-text-success: @has-text-danger; - @fool-span-on: @has-text-danger; - @fool-span-off: @has-text-success; - */ - - // .meter - @meter-low: @disabled; - @meter-neutral: @has-text-caution; - @meter-high: @has-text-info; + // UI Bars + --theme-bars-background: #fff; - // .main - @span-on: @has-text-success; - @span-off: @has-text-danger; + // .meter + --theme-meter-low: #fff; + --theme-meter-neutral: #fff; + --theme-meter-high: #fff; - @cnam-aTitle: @disabled; - } + // .main + --theme-div-special-border: #fff; + --theme-div-special-gear-fill: #fff; + --theme-div-special-hover-border: #fff; + --theme-div-special-hover-gear-fill: #fff; + --theme-span-on-border: #fff; + --theme-span-on: #fff; + --theme-span-on-warn: #fff; + --theme-span-off-border: #fff; + --theme-span-off: #fff; + --theme-span-on-off-hover-border: #fff; + --theme-hl-button-border: #fff; + --theme-link-button-background: #fff; + --theme-special-on-off-border: #fff; + --theme-oldTech: #fff; + --theme-cnam-aTitle: #fff; + + // .fort + --theme-fort-patrol-check-background: #fff; + + // .market-item + --theme-market-item-background: #fff; + --theme-market-item-order-hover-background: #fff; + --theme-market-item-order-hover-border: #fff; + + // .resource + --theme-resource-overlay-color: #fff; + --theme-resource-overlay-color-alt: #fff; + + // .modalBox + --theme-modalBox-background: #fff; + + // Stars + --theme-star-2-fill: #fff; + --theme-star-3-fill: #fff; + --theme-star-4-fill: #fff; + --theme-star-5-fill: #fff; + + // -webkit-scrollbar + --theme-webkit-scrollbar-background: #fff; + --theme-webkit-scrollbar-thumb-background: #fff; +} - // Orange Soda theme - .orangeSoda() { - // Theme colors { - @html-background: #131516; - @primary-border: #313638; - @secondary-border: @primary-border; - @primary-color: #EBDBB2; - @secondary-color: #313638; - - @link: #F06543; - @link-hover: #D09376; - @enabled: #35A7FF; - @disabled: #C21E83; - // } - - // .has-text-xxx - @has-text-advanced: #00ac95; - @has-text-alert: #af5d00; - @has-text-caution: #F09D51; - @has-text-danger: @disabled ; - @has-text-fade: #898B87; - @has-text-flair: @has-text-special; - @has-text-info: @bulma-info; - @has-text-label: #35A7FF; - @has-text-special: #91006c; - @has-text-success: @enabled ; - @has-text-warning: @link ; - - // .popper - @popper: @primary-color ; - @popper-has-text-label: @has-text-label ; - @popper-has-text-success: @has-text-success ; - @popper-has-text-warning: @has-text-warning ; - @modal-child-popper-background: #292929; - @modal-child-popper-border: @secondary-border; - - /* AFP 2021 - // .fool - @fool-has-text-danger: @has-text-success; - @fool-has-text-success: @has-text-danger; - @fool-popper-has-text-danger: @popper-has-text-success; - @fool-span-on: @disabled; - @fool-span-off: @enabled; - */ - - // .tabs - @tabs-li-is-active-link-border: @link; - @tabs-li-is-active-link: @link; +// Library containing all theme colors +#lib { + //the one theme + .theme(){ + @html-background: var(--theme-html-background); + @primary-border: var(--theme-primary-border); + @secondary-border: var(--theme-secondary-border); + @primary-color: var(--theme-primary-color); + @secondary-color: var(--theme-secondary-color); + + @link: var(--theme-link); + @link-hover: var(--theme-link-hover); + @enabled: var(--theme-enabled); + @disabled: var(--theme-disabled); - // .button - @button-background: #1C2021; - @button: @primary-color; - @button-hover-background: @secondary-color; - @button-hover: @link-hover; - @button-focus-border: @secondary-border; + // .has-text-xxx + @has-text-advanced: var(--theme-has-text-advanced); + @has-text-alert: var(--theme-has-text-alert); + @has-text-caution: var(--theme-has-text-caution); + @has-text-danger: var(--theme-has-text-danger); + @has-text-fade: var(--theme-has-text-fade); + @has-text-flair: var(--theme-has-text-flair); + @has-text-label: var(--theme-has-text-label); + @has-text-special: var(--theme-has-text-special); + @has-text-info: var(--theme-has-text-info); + @has-text-success: var(--theme-has-text-success); + @has-text-warning: var(--theme-has-text-warning); - // .basic-button - @basic-button-border-hover-background: #292929; - @basic-button-border-hover: @link; + // .popper + + @popper: var(--theme-popper); + @popper-has-text-label: var(--theme-popper-has-text-label); + @popper-has-text-success: var(--theme-popper-has-text-success); + @popper-has-text-warning: var(--theme-popper-has-text-warning); + @modal-child-popper-background: var(--theme-modal-child-popper-background); + @modal-child-popper-border: var(--theme-modal-child-popper-border); + + /* AFP 2021 + // .fool + @fool-has-text-danger: var(--theme-fool-has-text-danger); + @fool-has-text-success: var(--theme-fool-has-text-success); + @fool-popper-has-text-danger: var(--theme-fool-popper-has-text-danger); + @fool-span-on: var(--theme-fool-span-on); + @fool-span-off: var(--theme-fool-span-off); + */ - // .label - @label: @primary-color; + // .tabs + @tabs-li-is-active-link-border: var(--theme-tabs-li-is-active-link-border); + @tabs-li-is-active-link: var(--theme-tabs-li-is-active-link); - // .checkbox - @checkbox-hover: @link; + // .button + @button-background: var(--theme-button-background); + @button: var(--theme-button); + @button-hover-background: var(--theme-button-hover-background); + @button-hover: var(--theme-button-hover); + @button-focus-border: var(--theme-button-focus-border); - // .dropdown - @dropdown-content-background: @button-background; + // .basic-button + @basic-button-border-hover-background: var(--theme-basic-button-border-hover-background); + @basic-button-border-hover: var(--theme-basic-button-border-hover); - // .b-tooltip - @b-tooltip-accent: @link-hover; - @b-tooltip-is-primary-background: @b-tooltip-accent; - @b-tooltip-is-primary-border: @primary-border; - @b-tooltip-is-primary: @black; + // .label + @label: var(--theme-label); - // UI Bars - @bars-background: @secondary-color; + // .checkbox + @checkbox-hover: var(--theme-checkbox-hover); - // .meter - @meter-low: @disabled; - @meter-neutral: #38618C; - @meter-high: #35A7FF; + // .dropdown + @dropdown-content-background: var(--theme-dropdown-content-background); - // .main - @div-special-border: @primary-border; - @div-special-gear-fill: @link; - @div-special-hover-border: @secondary-color; - @div-special-hover-gear-fill: #F09D51; - @span-on-border: @primary-border; - @span-on: @enabled; - @span-on-warn: #af5d00; - @span-off-border: @primary-border; - @span-off: @disabled; - @span-on-off-hover-border: @secondary-color; - @hl-button-border: @enabled; - @link-button-background: #181818; - @special-on-off-border: @primary-border; - @oldTech: @primary-color; - @cnam-aTitle: @disabled; - - // .fort - @fort-patrol-check-background: @black ; - - // .market-item - @market-item-background: #292929; - @market-item-order-hover-background: @secondary-color; - @market-item-order-hover-border: @link-hover; - - // .resource - @resource-overlay-color: darken(@html-background, 13%); - @resource-overlay-color-alt: darken(@market-item-background, 15%); - - // .modalBox - @modalBox-background: @html-background; - - // Stars - @star-2-fill: @white; - @star-3-fill: #cd7f32; - @star-4-fill: #c0c0c0; - @star-5-fill: #d4af37; - - // -webkit-scrollbar - @webkit-scrollbar-background: @html-background; - @webkit-scrollbar-thumb-background: @primary-border; - } - - // Dracula - .dracula() { - // Theme colors { - @html-background: #282a36; - @primary-border: #44475a; - @secondary-border: #44475a; - @primary-color: #f8f8f2; - @secondary-color: #6272a4; - @dark-background: #1a1c24; - - @link: #bd93f9; - @link-hover: #9573c5; - @enabled: #50fa7b; - @disabled: #ff5555; - // } - - // .has-text-xxx - @has-text-advanced: #8be9fd; - @has-text-alert: #e0a361; - @has-text-caution: #ffa26c; - @has-text-danger: @disabled ; - @has-text-fade: #6272a4; - @has-text-flair: @has-text-special; - @has-text-info: #bd93f9; - @has-text-label: #7dcbdd; - @has-text-special: #ff79c6; - @has-text-success: @enabled ; - @has-text-warning: #f1fa8c ; - - // .popper - @popper: @primary-color ; - @popper-has-text-label: @has-text-label ; - @popper-has-text-success: @has-text-success ; - @popper-has-text-warning: @has-text-warning ; - @modal-child-popper-background: @dark-background; - @modal-child-popper-border: @secondary-border; - - /* AFP 2021 - // .fool - @fool-has-text-danger: @has-text-success; - @fool-has-text-success: @has-text-danger; - @fool-popper-has-text-danger: @popper-has-text-success; - @fool-span-on: @disabled; - @fool-span-off: @enabled; - */ - - // .tabs - @tabs-li-is-active-link-border: @link; - @tabs-li-is-active-link: @link; + // .b-tooltip + @b-tooltip-accent: var(--theme-b-tooltip-accent); + @b-tooltip-is-primary-background: var(--theme-b-tooltip-is-primary-background); + @b-tooltip-is-primary-border: var(--theme-b-tooltip-is-primary-border); + @b-tooltip-is-primary: var(--theme-b-tooltip-is-primary); - // .button - @button-background: #3f4253; - @button: @primary-color; - @button-hover-background: @secondary-border; - @button-hover: @link-hover; - @button-focus-border: @secondary-border; + // UI Bars + @bars-background: var(--theme-bars-background); - // .basic-button - @basic-button-border-hover-background: @dark-background; - @basic-button-border-hover: @link; + // .meter + @meter-low: var(--theme-meter-low); + @meter-neutral: var(--theme-meter-neutral); + @meter-high: var(--theme-meter-high); - // .label - @label: @primary-color; + // .main + @div-special-border: var(--theme-div-special-border); + @div-special-gear-fill: var(--theme-div-special-gear-fill); + @div-special-hover-border: var(--theme-div-special-hover-border); + @div-special-hover-gear-fill: var(--theme-div-special-hover-gear-fill); + @span-on-border: var(--theme-span-on-border); + @span-on: var(--theme-span-on); + @span-on-warn: var(--theme-span-on-warn); + @span-off-border: var(--theme-span-off-border); + @span-off: var(--theme-span-off); + @span-on-off-hover-border: var(--theme-span-on-off-hover-border); + @hl-button-border: var(--theme-hl-button-border); + @link-button-background: var(--theme-link-button-background); + @special-on-off-border: var(--theme-special-on-off-border); + @oldTech: var(--theme-oldTech); + @cnam-aTitle: var(--theme-cnam-aTitle); - // .checkbox - @checkbox-hover: @link; + // .fort + @fort-patrol-check-background: var(--theme-fort-patrol-check-background); - // .dropdown - @dropdown-content-background: @button-background; + // .market-item + @market-item-background: var(--theme-market-item-background); + @market-item-order-hover-background: var(--theme-market-item-order-hover-background); + @market-item-order-hover-border: var(--theme-market-item-order-hover-border); - // .b-tooltip - @b-tooltip-accent: #282828; - @b-tooltip-is-primary-background: @b-tooltip-accent; - @b-tooltip-is-primary-border: @primary-border; - @b-tooltip-is-primary: @primary-color; + // .resource + @resource-overlay-color: var(--theme-resource-overlay-color); + @resource-overlay-color-alt: var(--theme-resource-overlay-color-alt); - // UI Bars - @bars-background: @secondary-color; + // .modalBox + @modalBox-background: var(--theme-modalBox-background); - // .meter - @meter-low: @disabled; - @meter-neutral: @has-text-caution; - @meter-high: @has-text-info; + // Stars + @star-2-fill: var(--theme-star-2-fill); + @star-3-fill: var(--theme-star-3-fill); + @star-4-fill: var(--theme-star-4-fill); + @star-5-fill: var(--theme-star-5-fill); - // .main - @div-special-border: @primary-border; - @div-special-gear-fill: #f09d51; - @div-special-hover-border: @secondary-color; - @div-special-hover-gear-fill: @link; - @span-on-border: @primary-border; - @span-on: @enabled; - @span-on-warn: #af5d00; - @span-off-border: @primary-border; - @span-off: @disabled; - @span-on-off-hover-border: @secondary-color; - @hl-button-border: @enabled; - @link-button-background: @dark-background; - @special-on-off-border: @primary-border; - @oldTech: @primary-color; - @cnam-aTitle: @disabled; - - // .fort - @fort-patrol-check-background: @black ; - - // .market-item - @market-item-background: #1d2021; - @market-item-order-hover-background: @secondary-color; - @market-item-order-hover-border: @link-hover; - - // .resource - @resource-overlay-color: darken(@html-background, 15%); - @resource-overlay-color-alt: darken(@market-item-background, 15%); - - // .modalBox - @modalBox-background: @html-background; - - // Stars - @star-2-fill: @white; - @star-3-fill: #cd7f32; - @star-4-fill: #c0c0c0; - @star-5-fill: #d4af37; - - // -webkit-scrollbar - @webkit-scrollbar-background: @html-background; - @webkit-scrollbar-thumb-background: @primary-border; - } + // -webkit-scrollbar + @webkit-scrollbar-background: var(--theme-webkit-scrollbar-background); + @webkit-scrollbar-thumb-background: var(--theme-webkit-scrollbar-thumb-background); } // Main template @@ -1866,499 +1233,293 @@ Misc ---------> Main template } } -// Dark theme -html.dark { - #lib.themes.dark(); // Highest priority - #lib.mainTemplate(); - // Theme specific - .modal .action { - #lib.mainTemplate.main.content.action(); - } - - .pop-desc { - .has-text-caution { - color: #a30500; - } - } - - .popper { - .grad-from-left { - background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%); - } - .grad-from-left-warn { - background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%); - } - .grad-from-right { - background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%); - } - } - - .modal .buttonList .is-selected { - border-color: @enabled; - } -} +// Base CSS +html { + overflow-y: hidden; + box-sizing: border-box; + font-size: 16px; -// Light theme -html.light { - #lib.themes.light(); // Highest priority - #lib.mainTemplate(); + // adding the themes all in + &.theme{ + #lib.theme(); + #lib.mainTemplate(); - // Theme specific - .modal .action { - #lib.mainTemplate.main.content.action(); - } + &.dark { + .pop-desc .has-text-caution { + color: #a30500; + } - body { - font-weight: 500; - } + } - // .button - .button, - .button:hover { - border: solid .0625rem @black; - } + // Light theme + &.light { - // UI Bars - .topBar { - .calendar { - .wi-thermometer-exterior { - color: #00d6b2; + body { + font-weight: 500; } - .wi-day-sunny, - .wi-day-windy { - color: #fffb00; + // .button + .button, + .button:hover { + border: solid .0625rem @black; } - .wi-cloud, - .wi-cloudy-gusts { - color: #dfe2d3; - } + // UI Bars + .topBar { + .calendar { + .wi-thermometer-exterior { + color: #00d6b2; + } - .wi-rain, - .wi-storm-showers { - color: #00b0e6; - } + .wi-day-sunny, + .wi-day-windy { + color: #fffb00; + } - .wi-snow, - .wi-snow-wind { - color: #fff; - } - } - } + .wi-cloud, + .wi-cloudy-gusts { + color: #dfe2d3; + } - // .main - .main { - .content { - .action { - a.button { - span.count { - border-bottom: .0625rem solid #000; - border-left: .0625rem solid #000; + .wi-rain, + .wi-storm-showers { + color: #00b0e6; + } + + .wi-snow, + .wi-snow-wind { + color: #fff; } } } - .action.cna:not(.cnam) { - span.aTitle { - color: #282828; + // .main + .main { + .content { + .action { + a.button { + span.count { + border-bottom: .0625rem solid #000; + border-left: .0625rem solid #000; + } + } + } + + .action.cna:not(.cnam) { + span.aTitle { + color: #282828; + } + } } } - } - } - - // .industry - .industry { - background: none; - .smelting { - border-top: 0; - } + // .industry + .industry { + background: none; - .header { - border-bottom: #4e4e4e solid .0625rem; - } - } + .smelting { + border-top: 0; + } - .progress::-webkit-progress-value, - .progress::-moz-progress-bar { - background-color: #898989; - } + .header { + border-bottom: #4e4e4e solid .0625rem; + } + } - .popper { - .grad-from-left { - background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%); - } - .grad-from-left-warn { - background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%); - } - .grad-from-right { - background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%); + .progress::-webkit-progress-value, + .progress::-moz-progress-bar { + background-color: #898989; + } } - } - - .modal .buttonList .is-selected { - border-color: @enabled; - } - .modal .buttonList .is-focused { - color: @primary-color; - } -} - -// Night theme -html.night { - #lib.themes.night(); // Highest priority - #lib.themes.dark(); // Lowest priority - #lib.mainTemplate(); - // Theme specific - .modal .action { - #lib.mainTemplate.main.content.action(); - } - - .popper { - .grad-from-left { - background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%); - } - .grad-from-left-warn { - background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%); + // Custom / Night / None theme + //for if the theme has no theme specific items + &.none{ + @worthless-var:#fff; } - .grad-from-right { - background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%); - } - } - - .modal .buttonList .is-selected { - border-color: @enabled; - } -} -// Red Green CB theme -html.redgreen { - #lib.themes.redgreen(); // Highest priority - #lib.themes.night(); - #lib.themes.dark(); // Lowest priority - #lib.mainTemplate(); + // Red Green CB theme + &.redgreen { + #lib.theme(); + #lib.mainTemplate(); - // Theme specific - .modal .action { - #lib.mainTemplate.main.content.action(); - } + .main>div.popper, + body .modal>div.popper { + .has-text-danger { + color: #aa00aa; + } + } - .main>div.popper, - body .modal>div.popper { - .has-text-danger { - color: #aa00aa; - } - } + #powerStatus .has-text-warning { + color: #9900cc; + } - #powerStatus .has-text-warning { - color: #9900cc; - } + // Trade + .trade { + .has-text-danger { + color: #167df0; + color: #aa00ff; + } - // Trade - .trade { - .has-text-danger { - color: #167df0; - color: #aa00ff; - } + .has-text-warning { + color: #fff; + } + } - .has-text-warning { - color: #fff; - } - } + // UI Bars + .topBar { + .calendar { + .wi-thermometer-exterior { + color: #00e6d2; + } - // UI Bars - .topBar { - .calendar { - .wi-thermometer-exterior { - color: #00e6d2; + .wi-thermometer { + color: #fffb00; + } + } } - .wi-thermometer { - color: #fffb00; + .mad { + background: repeating-linear-gradient(45deg, + #8a8b49, + #8a8b49 10px, + #000000 10px, + #000000 20px); } - } - } - - .mad { - background: repeating-linear-gradient(45deg, - #8a8b49, - #8a8b49 10px, - #000000 10px, - #000000 20px); - } - .armed .mad { - background: repeating-linear-gradient(45deg, - #fbfd84, - #fbfd84 10px, - #000000 10px, - #000000 20px); - } + .armed .mad { + background: repeating-linear-gradient(45deg, + #fbfd84, + #fbfd84 10px, + #000000 10px, + #000000 20px); + } - .popper { - .grad-from-left { - background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%); - } - .grad-from-left-warn { - background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%); - } - .grad-from-right { - background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%); } - } - - .modal .buttonList .is-selected { - border-color: @enabled; - } -} - -// Dark Night theme -html.darkNight { - #lib.themes.darkNight(); // Highest priority - #lib.themes.night(); - #lib.themes.dark(); // Lowest priority - #lib.mainTemplate(); - - // Theme specific - .has-text-warning { - color: #d6b220; - } - input, - select, - textarea { - background: @primary-color; - } + // Dark Night theme + &.darkNight { - .popper { - .grad-from-left { - background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%); - } - .grad-from-left-warn { - background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%); - } - .grad-from-right { - background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%); + // Theme specific + input, + select, + textarea { + background: @primary-color; + } } - } - - .modal .buttonList .is-selected { - border-color: @enabled; - } -} - -// GruvBox Light theme -html.gruvboxLight { - #lib.themes.gruvboxLight(); // Highest priority - #lib.themes.light(); // Lowest priority - #lib.mainTemplate(); - input, - select, - textarea, - .notification { - background: @secondary-color; - } + // GruvBox Light theme + &.gruvboxLight { - .popper { - .grad-from-left { - background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%); - } - .grad-from-left-warn { - background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%); - } - .grad-from-right { - background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%); + input, + select, + textarea, + .notification { + background: @secondary-color; + } } - } - .modal .buttonList .is-selected { - border-color: @enabled; - } -} - -// GruvBox Dark theme -html.gruvboxDark { - #lib.themes.gruvboxDark(); // Highest priority - #lib.themes.dark(); // Lowest priority - #lib.mainTemplate(); + // GruvBox Dark theme + &.gruvboxDark { - input, - select, - textarea, - .notification { - background: @primary-color; - } + input, + select, + textarea, + .notification { + background: @primary-color; + } - .add, - .sub { - border: @secondary-border solid .0625rem; - } + .add, + .sub { + border: @secondary-border solid .0625rem; + } - .current { - border-top: @secondary-border solid .0625rem; - border-bottom: @secondary-border solid .0625rem; - } - .current.infoOnly { - border: @secondary-border solid .0625rem; - } + .current { + border-top: @secondary-border solid .0625rem; + border-bottom: @secondary-border solid .0625rem; + } + .current.infoOnly { + border: @secondary-border solid .0625rem; + } - .popper { - .grad-from-left { - background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%); - } - .grad-from-left-warn { - background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%); } - .grad-from-right { - background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%); - } - } - - .modal .buttonList .is-selected { - border-color: @enabled; - } -} -// GruvBox Dark Red Green theme -html.gruvboxDarkRG { - #lib.themes.gruvboxDarkRG(); // Highest priority - #lib.themes.gruvboxDark(); // Higher priority - #lib.themes.dark(); // Lowest priority - #lib.mainTemplate(); + // GruvBox Dark Red Green theme + &.gruvboxDarkRG { + #lib.theme(); + #lib.mainTemplate(); - input, - select, - textarea, - .notification { - background: @primary-color; - } - - .add, - .sub { - border: @secondary-border solid .0625rem; - } + input, + select, + textarea, + .notification { + background: @primary-color; + } - .current { - border-top: @secondary-border solid .0625rem; - border-bottom: @secondary-border solid .0625rem; - } - .current.infoOnly { - border: @secondary-border solid .0625rem; - } + .add, + .sub { + border: @secondary-border solid .0625rem; + } - .popper { - .grad-from-left { - background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%); - } - .grad-from-left-warn { - background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%); - } - .grad-from-right { - background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%); + .current { + border-top: @secondary-border solid .0625rem; + border-bottom: @secondary-border solid .0625rem; + } + .current.infoOnly { + border: @secondary-border solid .0625rem; + } } - } - - .modal .buttonList .is-selected { - border-color: @enabled; - } -} - -// Orange Soda theme -html.orangeSoda { - #lib.themes.orangeSoda(); // Highest priority - #lib.mainTemplate(); - // Theme specific - .modal .action { - #lib.mainTemplate.main.content.action(); - } + // Orange Soda theme + &.orangeSoda { - .has-text-info { - color: #F09D51; - } + // Theme specific + .modal .action { + #lib.mainTemplate.main.content.action(); + } - .pop-desc { - .has-text-caution { - color: @has-text-danger; - } - } + .has-text-info { + color: #F09D51; + } - input, - select, - textarea, - .notification { - background: @primary-color; - } + .pop-desc { + .has-text-caution { + color: @has-text-danger; + } + } - .popper { - .grad-from-left { - background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%); - } - .grad-from-left-warn { - background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%); - } - .grad-from-right { - background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%); + input, + select, + textarea, + .notification { + background: @primary-color; + } } - } - - .modal .buttonList .is-selected { - border-color: @enabled; - } -} + // Dracula theme + &.dracula { -// Dracula theme -html.dracula { - #lib.themes.dracula(); // Highest priority - #lib.themes.dark(); // Lowest priority - #lib.mainTemplate(); - - input, - select, - textarea, - .notification { - background: @primary-color; - } - - .add, - .sub { - border: @secondary-border solid .0625rem; - } + input, + select, + textarea, + .notification { + background: @primary-color; + } - .current { - border-top: @secondary-border solid .0625rem; - border-bottom: @secondary-border solid .0625rem; - } - .current.infoOnly { - border: @secondary-border solid .0625rem; - } + .add, + .sub { + border: @secondary-border solid .0625rem; + } - .popper { - .grad-from-left { - background-image: linear-gradient(90deg, @has-text-danger 45%, @popper 55%); - } - .grad-from-left-warn { - background-image: linear-gradient(90deg, @has-text-alert 45%, @has-text-danger 55%); - } - .grad-from-right { - background-image: linear-gradient(90deg, @popper 45%, @has-text-danger 55%); + .current { + border-top: @secondary-border solid .0625rem; + border-bottom: @secondary-border solid .0625rem; + } + .current.infoOnly { + border: @secondary-border solid .0625rem; + } } } - - .modal .buttonList .is-selected { - border-color: @enabled; - } -} - -// Base CSS -html { - overflow-y: hidden; - box-sizing: border-box; - font-size: 16px; } body, diff --git a/src/index.js b/src/index.js index a105c41f0..f11c00e83 100644 --- a/src/index.js +++ b/src/index.js @@ -14,12 +14,14 @@ import { renderFortress, buildFortress, drawMechLab, clearMechDrag, drawHellObse import { renderEdenic } from './edenic.js'; import { drawShipYard, clearShipDrag, renderTauCeti } from './truepath.js'; import { arpa, clearGeneticsDrag } from './arpa.js'; +import { themes, set_theme, createNewCustom, getThemeVar, setThemeVar, theme_settings, theme_variables, loadCustomThemeHTML } from './themes.js'; export function mainVue(){ vBind({ el: '#mainColumn div.content', data: { - s: global.settings + s: global.settings, + t: theme_settings, }, methods: { swapTab(tab) { @@ -170,12 +172,22 @@ export function mainVue(){ } window.location.reload(); }, - setTheme(theme){ + setTheme(theme,set_none){ + set_theme(theme); global.settings.theme = theme; $('html').removeClass(); - $('html').addClass(theme); + $('html').addClass('theme'); + $('html').addClass(set_none ? 'none' : theme); $('html').addClass(global.settings.font); }, + openCloseThemeEditor(e){ + // theme_settings.themeEditorOpen=!theme_settings.themeEditorOpen; + if(theme_settings.themeEditorOpen){ + // theme_settings.pos.x=e.clientX; + // theme_settings.pos.y=e.clientY; + console.log('setting pos to',theme_settings.pos,e) + } + }, numNotation(notation){ global.settings.affix = notation; }, @@ -1241,7 +1253,7 @@ export function index(){ {{ label('theme_dark') }} {{ label('theme_light') }} - {{ label('theme_night') }} + {{ label('theme_night') }} {{ label('theme_darkNight') }} {{ label('theme_redgreen') }} {{ label('theme_gruvboxLight') }} @@ -1249,6 +1261,8 @@ export function index(){ {{ label('theme_gruvboxDarkRG') }} {{ label('theme_orangeSoda') }} {{ label('theme_dracula') }} + {{ label('theme_custom1') }} + {{ label('theme_custom2') }} ${hideEgg} @@ -1389,6 +1403,9 @@ export function index(){ +
    + {{ 'open_themeEditor' | label }} +
    `); diff --git a/src/main.js b/src/main.js index 350934b4f..e908511e7 100644 --- a/src/main.js +++ b/src/main.js @@ -21,7 +21,6 @@ import { vacuumCollapse } from './resets.js'; import { index, mainVue, initTabs, loadTab } from './index.js'; import { setWeather, seasonDesc, astrologySign, astroVal } from './seasons.js'; import { getTopChange } from './wiki/change.js'; -import { enableDebug, updateDebugData } from './debug.js'; { $(document).ready(function() { @@ -211,6 +210,8 @@ if (global.r_queue.display){ calcRQueueMax(); } +loadAllThemes(); +set_theme(global.settings.theme); mainVue(); if (global['new']){ @@ -11433,10 +11434,14 @@ function midLoop(){ elm.addClass('has-text-danger'); } } - else if (elm.hasClass('has-text-danger') || elm.hasClass('has-text-alert')){ + else if (elm.hasClass('has-text-danger')){ elm.removeClass('has-text-danger'); elm.addClass(avail); } + else if(elm.hasClass('has-text-alert')){ + elm.removeClass('has-text-alert'); + elm.addClass(avail); + } } } }); diff --git a/src/vars.js b/src/vars.js index b832aba9e..2398fc617 100644 --- a/src/vars.js +++ b/src/vars.js @@ -1,3 +1,4 @@ +// import { themes } from './themes.js'; export var save = window.localStorage; export var global = { seed: 1, @@ -1802,6 +1803,7 @@ if (!global.settings['q_resize']){ global.settings.q_resize = 'auto'; } +$('html').addClass('theme'); $('html').addClass(global.settings.theme); $('html').addClass(global.settings.queuestyle); @@ -2003,6 +2005,13 @@ if (!global.civic['d_job']){ global.settings.animated = true; global.settings.disableReset = false; +if(!global.hasOwnProperty("custom_theme")){ + global['custom_theme']={ + 'custom-1':{}, + 'custom-2':{}, + } +} + if (global['arpa'] && global.arpa['launch_facility'] && global.arpa.launch_facility.rank > 0 && !global.tech['space']){ global.tech['space'] = 1; } diff --git a/src/wiki/mechanics.js b/src/wiki/mechanics.js index b2276c303..5bfd17e82 100644 --- a/src/wiki/mechanics.js +++ b/src/wiki/mechanics.js @@ -171,7 +171,7 @@ export function mechanicsPage(content){ }, data_color: { 2: ['danger'], - 3: ['caution'], + 3: ['alert'], 5: ['danger'], } }); From c38d0dbe87b518b885aa9d43d8efdf2f61f48511 Mon Sep 17 00:00:00 2001 From: Etcetera_ Date: Fri, 15 May 2026 14:10:44 -0600 Subject: [PATCH 07/45] strings added, trying to figure out some stuff also forgot an import lol does not work rn because i think its not actaully adding the theme editor itself --- index.html | 2 +- src/index.js | 3 +- src/main.js | 1 + strings/strings.json | 228 ++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 231 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 417a94406..d53d7d859 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@ - +