From 6e38df366f4278d261162b713e98ac928d428177 Mon Sep 17 00:00:00 2001 From: Zak Saunders Date: Tue, 18 Oct 2022 00:51:55 +0100 Subject: [PATCH] New: Darkmode * New: Native Theme Engine Co-Authored-By: Zak Saunders (cherry picked from commit 2291f3e00eb2ff9268a0b2f49da8dde82ee13c04) * Update CSS for themes * Fixup CSS values * Fixup remove duped Color-Impaired setting * Fixup Link Colors Co-Authored-By: Qstick --- frontend/postcss.config.js | 1 - frontend/src/Activity/Queue/ProtocolLabel.css | 8 +- frontend/src/App/App.js | 9 +- frontend/src/App/ApplyTheme.js | 49 ++++ .../Delete/DeleteAuthorModalContent.css | 2 +- frontend/src/Author/Details/AuthorDetails.css | 8 +- .../Author/Details/AuthorDetailsHeader.css | 8 +- .../Author/Details/AuthorDetailsSeason.css | 10 +- .../Author/Details/AuthorDetailsSeries.css | 10 +- .../Delete/DeleteAuthorModalContent.css | 2 +- .../src/Author/Index/AuthorIndexFooter.css | 12 +- .../Index/Overview/AuthorIndexOverview.css | 10 +- .../Index/Posters/AuthorIndexPoster.css | 19 +- .../Index/Posters/AuthorIndexPosterInfo.css | 2 +- .../ProgressBar/AuthorIndexProgressBar.css | 2 +- .../src/Author/Index/Table/AuthorIndexRow.css | 6 +- frontend/src/Book/BookTitleLink.css | 2 +- .../Book/Delete/DeleteBookModalContent.css | 2 +- frontend/src/Book/Details/BookDetails.css | 6 +- .../src/Book/Details/BookDetailsHeader.css | 6 +- .../Editor/Delete/DeleteBookModalContent.css | 2 +- frontend/src/Book/Index/BookIndexFooter.css | 12 +- .../Book/Index/Overview/BookIndexOverview.css | 10 +- .../Book/Index/Posters/BookIndexPoster.css | 18 +- .../ProgressBar/BookIndexProgressBar.css | 2 +- .../src/Book/Index/Table/BookIndexRow.css | 4 +- .../Editor/BookFileEditorTableContent.css | 6 +- .../src/BookFile/ExpandingFileDetails.css | 4 +- frontend/src/Bookshelf/BookshelfBook.css | 18 +- frontend/src/Calendar/Agenda/AgendaEvent.css | 4 +- frontend/src/Calendar/Day/CalendarDay.css | 10 +- frontend/src/Calendar/Day/CalendarDays.css | 2 +- frontend/src/Calendar/Day/DayOfWeek.css | 4 +- .../src/Calendar/Events/CalendarEvent.css | 40 ++- .../Events/CalendarEventQueueDetails.js | 3 +- frontend/src/Components/Alert.css | 24 +- frontend/src/Components/Card.css | 6 +- .../src/Components/CircularProgressBar.js | 3 +- frontend/src/Components/FieldSet.css | 2 +- .../FileBrowser/FileBrowserModalContent.css | 2 +- .../Filter/Builder/FilterBuilderRow.css | 2 +- .../Builder/FilterBuilderRowValueTag.css | 3 +- .../Filter/CustomFilters/CustomFilter.css | 2 +- .../src/Components/Form/AutoSuggestInput.css | 8 +- frontend/src/Components/Form/CheckInput.css | 32 +-- .../Components/Form/EnhancedSelectInput.css | 14 +- .../Form/EnhancedSelectInputOption.css | 10 +- .../Form/EnhancedSelectInputSelectedValue.css | 2 +- .../src/Components/Form/FormInputGroup.css | 2 +- .../src/Components/Form/FormInputHelpText.css | 10 +- frontend/src/Components/Form/FormLabel.css | 4 +- .../Form/HintedSelectInputOption.css | 2 +- .../Form/HintedSelectInputSelectedValue.css | 2 +- frontend/src/Components/Form/Input.css | 19 +- .../src/Components/Form/KeyValueListInput.css | 4 +- .../Components/Form/KeyValueListInputItem.css | 4 +- .../Form/RootFolderSelectInputOption.css | 2 +- .../RootFolderSelectInputSelectedValue.css | 2 +- frontend/src/Components/Form/TagInput.css | 6 +- frontend/src/Components/Form/TextInput.css | 2 +- frontend/src/Components/Form/UMaskInput.css | 2 +- frontend/src/Components/HeartRating.css | 2 +- frontend/src/Components/Icon.css | 22 +- frontend/src/Components/Label.css | 58 +++-- frontend/src/Components/Link/Button.css | 60 ++--- frontend/src/Components/Link/IconButton.css | 4 +- frontend/src/Components/Link/Link.css | 4 +- .../Components/Loading/LoadingIndicator.css | 2 +- frontend/src/Components/Marquee.css | 4 +- frontend/src/Components/Menu/MenuButton.css | 4 +- frontend/src/Components/Menu/MenuContent.css | 2 +- frontend/src/Components/Menu/MenuItem.css | 10 +- .../src/Components/Menu/MenuItemSeparator.css | 2 +- frontend/src/Components/Modal/Modal.css | 2 +- .../src/Components/Modal/ModalContent.css | 4 +- frontend/src/Components/Modal/ModalFooter.css | 2 +- frontend/src/Components/Modal/ModalHeader.css | 2 +- .../src/Components/MonitorToggleButton.css | 2 +- .../Page/Header/AuthorSearchInput.css | 20 +- .../Page/Header/AuthorSearchResult.css | 2 +- .../Page/Header/BookSearchResult.css | 2 +- .../Header/KeyboardShortcutsModalContent.css | 4 +- .../src/Components/Page/Header/PageHeader.css | 8 +- .../Page/Header/PageHeaderActionsMenu.css | 2 +- frontend/src/Components/Page/LoadingPage.css | 2 + .../src/Components/Page/PageContentFooter.css | 2 +- .../src/Components/Page/PageJumpBarItem.css | 2 +- .../Page/Sidebar/Messages/Message.css | 12 +- .../Components/Page/Sidebar/PageSidebar.css | 6 +- .../Page/Sidebar/PageSidebarItem.css | 12 +- .../Components/Page/Toolbar/PageToolbar.css | 4 +- .../Page/Toolbar/PageToolbarButton.css | 8 +- frontend/src/Components/ProgressBar.css | 22 +- .../Components/Scroller/OverlayScroller.css | 4 +- .../Components/Table/Cells/TableRowCell.css | 2 +- .../Table/TableOptions/TableOptionsColumn.css | 2 +- frontend/src/Components/Table/TablePager.css | 4 +- frontend/src/Components/Table/TableRow.css | 2 +- .../src/Components/Table/VirtualTableRow.css | 2 +- frontend/src/Components/Tooltip/Popover.css | 5 +- frontend/src/Components/Tooltip/Tooltip.css | 41 +-- .../Author/SelectAuthorRow.css | 2 +- .../InteractiveImportModalContent.css | 2 +- .../Interactive/InteractiveImportRow.css | 2 +- .../InteractiveImportRowCellPlaceholder.css | 2 +- frontend/src/Organize/OrganizePreviewRow.css | 2 +- frontend/src/Retag/RetagPreviewRow.css | 2 +- frontend/src/Search/AddNewItem.css | 6 +- .../Author/AddNewAuthorModalContent.css | 4 +- .../Author/AddNewAuthorSearchResult.css | 9 +- .../Search/Book/AddNewBookModalContent.css | 6 +- .../Search/Book/AddNewBookSearchResult.css | 10 +- .../src/Settings/AdvancedSettingsButton.css | 6 +- .../DownloadClients/DownloadClients.css | 8 +- .../RemotePathMappings/RemotePathMapping.css | 2 +- .../ImportListExclusion.css | 2 +- .../ImportLists/ImportLists/ImportLists.css | 8 +- .../Settings/Indexers/Indexers/Indexers.css | 8 +- .../MediaManagement/Naming/NamingModal.css | 17 ++ .../MediaManagement/Naming/NamingOption.css | 11 +- .../RootFolder/RootFolders.css | 8 +- .../Notifications/Notifications.css | 8 +- .../Settings/Profiles/Delay/DelayProfile.css | 2 +- .../Profiles/Metadata/MetadataProfiles.css | 8 +- .../Profiles/Quality/QualityProfileItem.css | 2 +- .../Quality/QualityProfileItemGroup.css | 4 +- .../Profiles/Quality/QualityProfiles.css | 8 +- .../Profiles/Release/ReleaseProfiles.css | 8 +- .../Quality/Definition/QualityDefinition.css | 8 +- .../Quality/Definition/QualityDefinitions.css | 2 +- frontend/src/Settings/Settings.css | 4 +- .../Tags/Details/TagDetailsModalContent.css | 2 +- frontend/src/Settings/UI/UISettings.js | 20 +- frontend/src/Styles/Mixins/scroller.css | 4 +- frontend/src/Styles/Themes/dark.js | 239 ++++++++++++++++++ frontend/src/Styles/Themes/index.js | 7 + .../{Variables/colors.js => Themes/light.js} | 69 ++++- frontend/src/Styles/scaffolding.css | 2 +- .../System/Events/LogsTableDetailsModal.css | 4 +- frontend/src/System/Events/LogsTableRow.css | 6 +- frontend/src/index.css | 2 +- .../Configuration/ConfigFileProvider.cs | 4 + src/Readarr.Api.V1/Config/ConfigController.cs | 4 +- .../Config/UiConfigController.cs | 24 +- src/Readarr.Api.V1/Config/UiConfigResource.cs | 5 +- .../Frontend/InitializeJsController.cs | 1 + 146 files changed, 923 insertions(+), 481 deletions(-) create mode 100644 frontend/src/App/ApplyTheme.js create mode 100644 frontend/src/Styles/Themes/dark.js create mode 100644 frontend/src/Styles/Themes/index.js rename frontend/src/Styles/{Variables/colors.js => Themes/light.js} (76%) diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js index 7b5bc5976..f657adf28 100644 --- a/frontend/postcss.config.js +++ b/frontend/postcss.config.js @@ -1,7 +1,6 @@ const reload = require('require-nocache')(module); const cssVarsFiles = [ - './src/Styles/Variables/colors', './src/Styles/Variables/dimensions', './src/Styles/Variables/fonts', './src/Styles/Variables/animations', diff --git a/frontend/src/Activity/Queue/ProtocolLabel.css b/frontend/src/Activity/Queue/ProtocolLabel.css index 259fd5c65..110c7e01c 100644 --- a/frontend/src/Activity/Queue/ProtocolLabel.css +++ b/frontend/src/Activity/Queue/ProtocolLabel.css @@ -1,13 +1,13 @@ .torrent { composes: label from '~Components/Label.css'; - border-color: $torrentColor; - background-color: $torrentColor; + border-color: var(--torrentColor); + background-color: var(--torrentColor); } .usenet { composes: label from '~Components/Label.css'; - border-color: $usenetColor; - background-color: $usenetColor; + border-color: var(--usenetColor); + background-color: var(--usenetColor); } diff --git a/frontend/src/App/App.js b/frontend/src/App/App.js index 5e9136eb8..e8911cba5 100644 --- a/frontend/src/App/App.js +++ b/frontend/src/App/App.js @@ -4,6 +4,7 @@ import React from 'react'; import DocumentTitle from 'react-document-title'; import { Provider } from 'react-redux'; import PageConnector from 'Components/Page/PageConnector'; +import ApplyTheme from './ApplyTheme'; import AppRoutes from './AppRoutes'; function App({ store, history }) { @@ -11,9 +12,11 @@ function App({ store, history }) { - - - + + + + + diff --git a/frontend/src/App/ApplyTheme.js b/frontend/src/App/ApplyTheme.js new file mode 100644 index 000000000..325582901 --- /dev/null +++ b/frontend/src/App/ApplyTheme.js @@ -0,0 +1,49 @@ +import PropTypes from 'prop-types'; +import React, { Fragment, useCallback, useEffect } from 'react'; +import { connect } from 'react-redux'; +import { createSelector } from 'reselect'; +import themes from 'Styles/Themes'; + +function createMapStateToProps() { + return createSelector( + (state) => state.settings.ui.item.theme || window.Readarr.theme, + ( + theme + ) => { + return { + theme + }; + } + ); +} + +function ApplyTheme({ theme, children }) { + // Update the CSS Variables + const updateCSSVariables = useCallback(() => { + const arrayOfVariableKeys = Object.keys(themes[theme]); + const arrayOfVariableValues = Object.values(themes[theme]); + + // Loop through each array key and set the CSS Variables + arrayOfVariableKeys.forEach((cssVariableKey, index) => { + // Based on our snippet from MDN + document.documentElement.style.setProperty( + `--${cssVariableKey}`, + arrayOfVariableValues[index] + ); + }); + }, [theme]); + + // On Component Mount and Component Update + useEffect(() => { + updateCSSVariables(theme); + }, [updateCSSVariables, theme]); + + return {children}; +} + +ApplyTheme.propTypes = { + theme: PropTypes.string.isRequired, + children: PropTypes.object.isRequired +}; + +export default connect(createMapStateToProps)(ApplyTheme); diff --git a/frontend/src/Author/Delete/DeleteAuthorModalContent.css b/frontend/src/Author/Delete/DeleteAuthorModalContent.css index dbfef0871..df8e4822e 100644 --- a/frontend/src/Author/Delete/DeleteAuthorModalContent.css +++ b/frontend/src/Author/Delete/DeleteAuthorModalContent.css @@ -8,5 +8,5 @@ .deleteFilesMessage { margin-top: 20px; - color: $dangerColor; + color: var(--dangerColor); } diff --git a/frontend/src/Author/Details/AuthorDetails.css b/frontend/src/Author/Details/AuthorDetails.css index 37cce9537..91d47fb0a 100644 --- a/frontend/src/Author/Details/AuthorDetails.css +++ b/frontend/src/Author/Details/AuthorDetails.css @@ -9,7 +9,7 @@ } .metadataMessage { - color: $helpTextColor; + color: var(--helpTextColor); text-align: center; font-weight: 300; font-size: 20px; @@ -22,7 +22,7 @@ .tabList { margin: 0; padding: 0; - border-bottom: 1px solid $lightGray; + border-bottom: 1px solid var(--lightGray); } .tab { @@ -37,7 +37,7 @@ } .selectedTab { - border-bottom: 4px solid $linkColor; + border-bottom: 4px solid var(--linkColor); } .tabContent { @@ -63,7 +63,7 @@ white-space: nowrap; &:hover { - color: $iconButtonHoverLightColor; + color: var(--iconButtonHoverLightColor); } } diff --git a/frontend/src/Author/Details/AuthorDetailsHeader.css b/frontend/src/Author/Details/AuthorDetailsHeader.css index c4458fbcd..01af3a004 100644 --- a/frontend/src/Author/Details/AuthorDetailsHeader.css +++ b/frontend/src/Author/Details/AuthorDetailsHeader.css @@ -16,7 +16,7 @@ position: absolute; width: 100%; height: 100%; - background: $black; + background: var(--black); opacity: 0.7; } @@ -25,7 +25,7 @@ padding: 30px; width: 100%; height: 100%; - color: $white; + color: var(--white); } .poster { @@ -69,7 +69,7 @@ width: 40px; &:hover { - color: $iconButtonHoverLightColor; + color: var(--iconButtonHoverLightColor); } } @@ -97,7 +97,7 @@ white-space: nowrap; &:hover { - color: $iconButtonHoverLightColor; + color: var(--iconButtonHoverLightColor); } } diff --git a/frontend/src/Author/Details/AuthorDetailsSeason.css b/frontend/src/Author/Details/AuthorDetailsSeason.css index 6f8731693..41fc823bc 100644 --- a/frontend/src/Author/Details/AuthorDetailsSeason.css +++ b/frontend/src/Author/Details/AuthorDetailsSeason.css @@ -1,8 +1,8 @@ .bookType { margin-bottom: 20px; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--cardBackgroundColor); &:last-of-type { margin-bottom: 0; @@ -77,7 +77,7 @@ .books { padding-top: 15px; - border-top: 1px solid $borderColor; + border-top: 1px solid var(--borderColor); } .collapseButtonContainer { @@ -86,10 +86,10 @@ justify-content: center; padding: 10px 15px; width: 100%; - border-top: 1px solid $borderColor; + border-top: 1px solid var(--borderColor); border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; - background-color: #fafafa; + background-color: var(--collapseButtonBackgroundColor); } .collapseButtonIcon { diff --git a/frontend/src/Author/Details/AuthorDetailsSeries.css b/frontend/src/Author/Details/AuthorDetailsSeries.css index 03aed7603..77c5cd5d8 100644 --- a/frontend/src/Author/Details/AuthorDetailsSeries.css +++ b/frontend/src/Author/Details/AuthorDetailsSeries.css @@ -1,8 +1,8 @@ .bookType { margin-bottom: 20px; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--cardBackgroundColor); &:last-of-type { margin-bottom: 0; @@ -77,7 +77,7 @@ .books { padding-top: 15px; - border-top: 1px solid $borderColor; + border-top: 1px solid var(--borderColor); } .collapseButtonContainer { @@ -86,10 +86,10 @@ justify-content: center; padding: 10px 15px; width: 100%; - border-top: 1px solid $borderColor; + border-top: 1px solid var(--borderColor); border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; - background-color: #fafafa; + background-color: var(--cardBackgroundColor); } .collapseButtonIcon { diff --git a/frontend/src/Author/Editor/Delete/DeleteAuthorModalContent.css b/frontend/src/Author/Editor/Delete/DeleteAuthorModalContent.css index 950fdc27d..02a0514be 100644 --- a/frontend/src/Author/Editor/Delete/DeleteAuthorModalContent.css +++ b/frontend/src/Author/Editor/Delete/DeleteAuthorModalContent.css @@ -9,5 +9,5 @@ .path { margin-left: 5px; - color: $dangerColor; + color: var(--dangerColor); } diff --git a/frontend/src/Author/Index/AuthorIndexFooter.css b/frontend/src/Author/Index/AuthorIndexFooter.css index 71d0439b6..c1c4b5a46 100644 --- a/frontend/src/Author/Index/AuthorIndexFooter.css +++ b/frontend/src/Author/Index/AuthorIndexFooter.css @@ -21,32 +21,32 @@ .continuing { composes: legendItemColor; - background-color: $primaryColor; + background-color: var(--primaryColor); } .ended { composes: legendItemColor; - background-color: $successColor; + background-color: var(--successColor); } .missingMonitored { composes: legendItemColor; - background-color: $dangerColor; + background-color: var(--dangerColor); &:global(.colorImpaired) { - background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px); + background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px); } } .missingUnmonitored { composes: legendItemColor; - background-color: $warningColor; + background-color: var(--warningColor); &:global(.colorImpaired) { - background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px); + background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px); } } diff --git a/frontend/src/Author/Index/Overview/AuthorIndexOverview.css b/frontend/src/Author/Index/Overview/AuthorIndexOverview.css index 48afa9f6c..e43dba70c 100644 --- a/frontend/src/Author/Index/Overview/AuthorIndexOverview.css +++ b/frontend/src/Author/Index/Overview/AuthorIndexOverview.css @@ -3,7 +3,7 @@ $hoverScale: 1.05; .container { &:hover { .content { - background-color: $tableRowHoverBackgroundColor; + background-color: var(--tableRowHoverBackgroundColor); } } } @@ -35,10 +35,10 @@ $hoverScale: 1.05; composes: link from '~Components/Link/Link.css'; display: block; - color: $defaultColor; + color: var(--defaultColor); &:hover { - color: $defaultColor; + color: var(--defaultColor); text-decoration: none; } } @@ -52,8 +52,8 @@ $hoverScale: 1.05; height: 0; border-width: 0 25px 25px 0; border-style: solid; - border-color: transparent $dangerColor transparent transparent; - color: $white; + border-color: transparent var(--dangerColor) transparent transparent; + color: var(--white); } .info { diff --git a/frontend/src/Author/Index/Posters/AuthorIndexPoster.css b/frontend/src/Author/Index/Posters/AuthorIndexPoster.css index 3df74dcae..44498093c 100644 --- a/frontend/src/Author/Index/Posters/AuthorIndexPoster.css +++ b/frontend/src/Author/Index/Posters/AuthorIndexPoster.css @@ -5,7 +5,7 @@ $hoverScale: 1.05; &:hover { z-index: 2; - box-shadow: 0 0 12px $black; + box-shadow: 0 0 12px var(--black); transition: all 200ms ease-in; .controls { @@ -32,7 +32,7 @@ $hoverScale: 1.05; position: relative; display: block; height: 70px; - background-color: $defaultColor; + background-color: var(--defaultColor); } .overlayTitle { @@ -45,13 +45,13 @@ $hoverScale: 1.05; padding: 5px; width: 100%; height: 100%; - color: $offWhite; + color: var(--offWhite); text-align: center; font-size: 20px; } .nextAiring { - background-color: #fafbfc; + background-color: var(--seriesBackgroundColor); text-align: center; font-size: $smallFontSize; } @@ -59,8 +59,7 @@ $hoverScale: 1.05; .title { @add-mixin truncate; - background-color: $defaultColor; - color: $white; + background-color: var(--seriesBackgroundColor); text-align: center; font-size: $smallFontSize; } @@ -74,8 +73,8 @@ $hoverScale: 1.05; height: 0; border-width: 0 25px 25px 0; border-style: solid; - border-color: transparent $dangerColor transparent transparent; - color: $white; + border-color: transparent var(--dangerColor) transparent transparent; + color: var(--white); } .editorSelect { @@ -91,8 +90,8 @@ $hoverScale: 1.05; left: 10px; z-index: 3; border-radius: 4px; - background-color: $themeLightColor; - color: $white; + background-color: var(--readarrRed); + color: var(--white); font-size: $smallFontSize; opacity: 0; transition: opacity 0; diff --git a/frontend/src/Author/Index/Posters/AuthorIndexPosterInfo.css b/frontend/src/Author/Index/Posters/AuthorIndexPosterInfo.css index aab27d827..17741773d 100644 --- a/frontend/src/Author/Index/Posters/AuthorIndexPosterInfo.css +++ b/frontend/src/Author/Index/Posters/AuthorIndexPosterInfo.css @@ -1,5 +1,5 @@ .info { - background-color: #fafbfc; + background-color: var(--seriesBackgroundColor); text-align: center; font-size: $smallFontSize; } diff --git a/frontend/src/Author/Index/ProgressBar/AuthorIndexProgressBar.css b/frontend/src/Author/Index/ProgressBar/AuthorIndexProgressBar.css index b98bb33d5..ce5313877 100644 --- a/frontend/src/Author/Index/ProgressBar/AuthorIndexProgressBar.css +++ b/frontend/src/Author/Index/ProgressBar/AuthorIndexProgressBar.css @@ -3,7 +3,7 @@ border-radius: 0; background-color: #5b5b5b; - color: $white; + color: var(--white); transition: width 200ms ease; } diff --git a/frontend/src/Author/Index/Table/AuthorIndexRow.css b/frontend/src/Author/Index/Table/AuthorIndexRow.css index 74642e428..b612a42c0 100644 --- a/frontend/src/Author/Index/Table/AuthorIndexRow.css +++ b/frontend/src/Author/Index/Table/AuthorIndexRow.css @@ -31,7 +31,7 @@ position: relative; display: block; height: 70px; - background-color: $defaultColor; + background-color: var(--defaultColor); } .bannerImage { @@ -49,7 +49,7 @@ padding: 5px; width: 100%; height: 100%; - color: $offWhite; + color: var(--offWhite); text-align: center; font-size: 20px; } @@ -92,7 +92,7 @@ } .ratings { - composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css'; + composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css'; flex: 0 0 80px; } diff --git a/frontend/src/Book/BookTitleLink.css b/frontend/src/Book/BookTitleLink.css index 47d897238..7fd85c836 100644 --- a/frontend/src/Book/BookTitleLink.css +++ b/frontend/src/Book/BookTitleLink.css @@ -2,7 +2,7 @@ composes: link from '~Components/Link/Link.css'; &:hover { - color: $linkHoverColor; + color: var(--linkHoverColor); text-decoration: underline; } } diff --git a/frontend/src/Book/Delete/DeleteBookModalContent.css b/frontend/src/Book/Delete/DeleteBookModalContent.css index dbfef0871..df8e4822e 100644 --- a/frontend/src/Book/Delete/DeleteBookModalContent.css +++ b/frontend/src/Book/Delete/DeleteBookModalContent.css @@ -8,5 +8,5 @@ .deleteFilesMessage { margin-top: 20px; - color: $dangerColor; + color: var(--dangerColor); } diff --git a/frontend/src/Book/Details/BookDetails.css b/frontend/src/Book/Details/BookDetails.css index 1d057b1d9..f37d45430 100644 --- a/frontend/src/Book/Details/BookDetails.css +++ b/frontend/src/Book/Details/BookDetails.css @@ -9,7 +9,7 @@ .tabList { margin: 0; padding: 0; - border-bottom: 1px solid $lightGray; + border-bottom: 1px solid var(--lightGray); } .tab { @@ -24,7 +24,7 @@ } .selectedTab { - border-bottom: 4px solid $linkColor; + border-bottom: 4px solid var(--linkColor); } .tabContent { @@ -54,7 +54,7 @@ white-space: nowrap; &:hover { - color: $iconButtonHoverLightColor; + color: var(--iconButtonHoverLightColor); } } diff --git a/frontend/src/Book/Details/BookDetailsHeader.css b/frontend/src/Book/Details/BookDetailsHeader.css index 8cca0e49d..8fbfe9121 100644 --- a/frontend/src/Book/Details/BookDetailsHeader.css +++ b/frontend/src/Book/Details/BookDetailsHeader.css @@ -16,7 +16,7 @@ position: absolute; width: 100%; height: 100%; - background: $black; + background: var(--black); opacity: 0.7; } @@ -25,7 +25,7 @@ padding: 30px; width: 100%; height: 100%; - color: $white; + color: var(--white); } .cover { @@ -69,7 +69,7 @@ width: 40px; &:hover { - color: $iconButtonHoverLightColor; + color: var(--iconButtonHoverLightColor); } } diff --git a/frontend/src/Book/Editor/Delete/DeleteBookModalContent.css b/frontend/src/Book/Editor/Delete/DeleteBookModalContent.css index 1e4dc7711..7041895fa 100644 --- a/frontend/src/Book/Editor/Delete/DeleteBookModalContent.css +++ b/frontend/src/Book/Editor/Delete/DeleteBookModalContent.css @@ -5,5 +5,5 @@ .deleteFilesMessage { margin-top: 20px; - color: $dangerColor; + color: var(--dangerColor); } diff --git a/frontend/src/Book/Index/BookIndexFooter.css b/frontend/src/Book/Index/BookIndexFooter.css index 71d0439b6..c1c4b5a46 100644 --- a/frontend/src/Book/Index/BookIndexFooter.css +++ b/frontend/src/Book/Index/BookIndexFooter.css @@ -21,32 +21,32 @@ .continuing { composes: legendItemColor; - background-color: $primaryColor; + background-color: var(--primaryColor); } .ended { composes: legendItemColor; - background-color: $successColor; + background-color: var(--successColor); } .missingMonitored { composes: legendItemColor; - background-color: $dangerColor; + background-color: var(--dangerColor); &:global(.colorImpaired) { - background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px); + background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px); } } .missingUnmonitored { composes: legendItemColor; - background-color: $warningColor; + background-color: var(--warningColor); &:global(.colorImpaired) { - background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px); + background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px); } } diff --git a/frontend/src/Book/Index/Overview/BookIndexOverview.css b/frontend/src/Book/Index/Overview/BookIndexOverview.css index 48afa9f6c..e43dba70c 100644 --- a/frontend/src/Book/Index/Overview/BookIndexOverview.css +++ b/frontend/src/Book/Index/Overview/BookIndexOverview.css @@ -3,7 +3,7 @@ $hoverScale: 1.05; .container { &:hover { .content { - background-color: $tableRowHoverBackgroundColor; + background-color: var(--tableRowHoverBackgroundColor); } } } @@ -35,10 +35,10 @@ $hoverScale: 1.05; composes: link from '~Components/Link/Link.css'; display: block; - color: $defaultColor; + color: var(--defaultColor); &:hover { - color: $defaultColor; + color: var(--defaultColor); text-decoration: none; } } @@ -52,8 +52,8 @@ $hoverScale: 1.05; height: 0; border-width: 0 25px 25px 0; border-style: solid; - border-color: transparent $dangerColor transparent transparent; - color: $white; + border-color: transparent var(--dangerColor) transparent transparent; + color: var(--white); } .info { diff --git a/frontend/src/Book/Index/Posters/BookIndexPoster.css b/frontend/src/Book/Index/Posters/BookIndexPoster.css index 3df74dcae..a9953896c 100644 --- a/frontend/src/Book/Index/Posters/BookIndexPoster.css +++ b/frontend/src/Book/Index/Posters/BookIndexPoster.css @@ -5,7 +5,7 @@ $hoverScale: 1.05; &:hover { z-index: 2; - box-shadow: 0 0 12px $black; + box-shadow: 0 0 12px var(--black); transition: all 200ms ease-in; .controls { @@ -32,7 +32,7 @@ $hoverScale: 1.05; position: relative; display: block; height: 70px; - background-color: $defaultColor; + background-color: var(--cardBackgroundColor); } .overlayTitle { @@ -45,7 +45,7 @@ $hoverScale: 1.05; padding: 5px; width: 100%; height: 100%; - color: $offWhite; + color: var(--cardBackgroundColor); text-align: center; font-size: 20px; } @@ -59,8 +59,8 @@ $hoverScale: 1.05; .title { @add-mixin truncate; - background-color: $defaultColor; - color: $white; + background-color: var(--cardBackgroundColor); + color: var(--textColor); text-align: center; font-size: $smallFontSize; } @@ -74,8 +74,8 @@ $hoverScale: 1.05; height: 0; border-width: 0 25px 25px 0; border-style: solid; - border-color: transparent $dangerColor transparent transparent; - color: $white; + border-color: transparent var(--dangerColor) transparent transparent; + color: var(--textColor); } .editorSelect { @@ -91,8 +91,8 @@ $hoverScale: 1.05; left: 10px; z-index: 3; border-radius: 4px; - background-color: $themeLightColor; - color: $white; + background-color: var(--readarrRed); + color: var(--white); font-size: $smallFontSize; opacity: 0; transition: opacity 0; diff --git a/frontend/src/Book/Index/ProgressBar/BookIndexProgressBar.css b/frontend/src/Book/Index/ProgressBar/BookIndexProgressBar.css index b98bb33d5..ce5313877 100644 --- a/frontend/src/Book/Index/ProgressBar/BookIndexProgressBar.css +++ b/frontend/src/Book/Index/ProgressBar/BookIndexProgressBar.css @@ -3,7 +3,7 @@ border-radius: 0; background-color: #5b5b5b; - color: $white; + color: var(--white); transition: width 200ms ease; } diff --git a/frontend/src/Book/Index/Table/BookIndexRow.css b/frontend/src/Book/Index/Table/BookIndexRow.css index 3cfbd9a5b..0225609e7 100644 --- a/frontend/src/Book/Index/Table/BookIndexRow.css +++ b/frontend/src/Book/Index/Table/BookIndexRow.css @@ -29,7 +29,7 @@ position: relative; display: block; height: 70px; - background-color: $defaultColor; + background-color: var(--defaultColor); } .bannerImage { @@ -47,7 +47,7 @@ padding: 5px; width: 100%; height: 100%; - color: $offWhite; + color: var(--offWhite); text-align: center; font-size: 20px; } diff --git a/frontend/src/BookFile/Editor/BookFileEditorTableContent.css b/frontend/src/BookFile/Editor/BookFileEditorTableContent.css index 7bfb57139..d5c5cd0ae 100644 --- a/frontend/src/BookFile/Editor/BookFileEditorTableContent.css +++ b/frontend/src/BookFile/Editor/BookFileEditorTableContent.css @@ -1,10 +1,10 @@ .filesTable { margin-bottom: 20px; padding-top: 15px; - border: 1px solid $borderColor; - border-top: 1px solid $borderColor; + border: 1px solid var(--borderColor); + border-top: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--cardBackgroundColor); &:last-of-type { margin-bottom: 0; diff --git a/frontend/src/BookFile/ExpandingFileDetails.css b/frontend/src/BookFile/ExpandingFileDetails.css index d0bd945f8..aa2b038a9 100644 --- a/frontend/src/BookFile/ExpandingFileDetails.css +++ b/frontend/src/BookFile/ExpandingFileDetails.css @@ -1,8 +1,8 @@ .fileDetails { margin-bottom: 20px; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--white); &:last-of-type { margin-bottom: 0; diff --git a/frontend/src/Bookshelf/BookshelfBook.css b/frontend/src/Bookshelf/BookshelfBook.css index 48f4a32be..de8fe254b 100644 --- a/frontend/src/Bookshelf/BookshelfBook.css +++ b/frontend/src/Bookshelf/BookshelfBook.css @@ -3,9 +3,9 @@ align-items: stretch; overflow: hidden; margin: 2px 4px; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: #eee; + background-color: var(--seasonBackgroundColor); cursor: default; } @@ -17,21 +17,21 @@ padding: 0 4px; border-width: 0 1px; border-style: solid; - border-color: $borderColor; - background-color: $white; - color: $defaultColor; + border-color: var(--borderColor); + background-color: var(--white); + color: var(--defaultColor); } .books { padding: 0 4px; - background-color: $white; - color: $defaultColor; + background-color: var(--episodesBackgroundColor); + color: var(--defaultColor); } .allBooks { - background-color: #e0ffe0; + background-color: var(--successColor); } .missingWanted { - background-color: #ffe0e0; + background-color: var(--dangerColor); } diff --git a/frontend/src/Calendar/Agenda/AgendaEvent.css b/frontend/src/Calendar/Agenda/AgendaEvent.css index 18684a907..16edecda0 100644 --- a/frontend/src/Calendar/Agenda/AgendaEvent.css +++ b/frontend/src/Calendar/Agenda/AgendaEvent.css @@ -2,11 +2,11 @@ display: flex; overflow-x: hidden; padding: 5px; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); font-size: $defaultFontSize; &:hover { - background-color: $tableRowHoverBackgroundColor; + background-color: var(--tableRowHoverBackgroundColor); } } diff --git a/frontend/src/Calendar/Day/CalendarDay.css b/frontend/src/Calendar/Day/CalendarDay.css index 79eb67ae7..22d1b1ccf 100644 --- a/frontend/src/Calendar/Day/CalendarDay.css +++ b/frontend/src/Calendar/Day/CalendarDay.css @@ -2,8 +2,8 @@ flex: 1 0 14.28%; overflow: hidden; min-height: 70px; - border-bottom: 1px solid $calendarBorderColor; - border-left: 1px solid $calendarBorderColor; + border-bottom: 1px solid var(--calendarBorderColor); + border-left: 1px solid var(--calendarBorderColor); } .isSingleDay { @@ -12,14 +12,14 @@ .dayOfMonth { padding-right: 5px; - border-bottom: 1px solid $calendarBorderColor; + border-bottom: 1px solid var(--calendarBorderColor); text-align: right; } .isToday { - background-color: $calendarTodayBackgroundColor; + background-color: var(--calendarTodayBackgroundColor); } .isDifferentMonth { - color: $disabledColor; + color: var(--disabledColor); } diff --git a/frontend/src/Calendar/Day/CalendarDays.css b/frontend/src/Calendar/Day/CalendarDays.css index b6dd2100c..507dd0ede 100644 --- a/frontend/src/Calendar/Day/CalendarDays.css +++ b/frontend/src/Calendar/Day/CalendarDays.css @@ -1,6 +1,6 @@ .days { display: flex; - border-right: 1px solid $calendarBorderColor; + border-right: 1px solid var(--calendarBorderColor); } .day, diff --git a/frontend/src/Calendar/Day/DayOfWeek.css b/frontend/src/Calendar/Day/DayOfWeek.css index 8c3552e55..bb73fa3ba 100644 --- a/frontend/src/Calendar/Day/DayOfWeek.css +++ b/frontend/src/Calendar/Day/DayOfWeek.css @@ -1,6 +1,6 @@ .dayOfWeek { flex: 1 0 14.28%; - background-color: #e4eaec; + background-color: var(--calendarBackgroudColor); text-align: center; } @@ -9,5 +9,5 @@ } .isToday { - background-color: $calendarTodayBackgroundColor; + background-color: var(--calendarTodayBackgroundColor); } diff --git a/frontend/src/Calendar/Events/CalendarEvent.css b/frontend/src/Calendar/Events/CalendarEvent.css index c4e6a3145..8680bf35e 100644 --- a/frontend/src/Calendar/Events/CalendarEvent.css +++ b/frontend/src/Calendar/Events/CalendarEvent.css @@ -1,9 +1,11 @@ +$fullColorGradient: rgba(244, 245, 246, 0.2); + .event { overflow-x: hidden; margin: 4px 2px; padding: 5px; - border-bottom: 1px solid $borderColor; - border-left: 4px solid $borderColor; + border-bottom: 1px solid var(--calendarBorderColor); + border-left: 4px solid var(--calendarBorderColor); font-size: 12px; &:global(.colorImpaired) { @@ -25,7 +27,7 @@ } .authorName { - color: #3a3f51; + color: var(--calendarTextDimAlternate); font-size: $defaultFontSize; } @@ -42,38 +44,50 @@ */ .downloaded { - border-left-color: $successColor !important; + border-left-color: var(--successColor) !important; &:global(.colorImpaired) { - border-left-color: color($successColor, saturation(+15%)) !important; + border-left-color: color(#27c24c saturation(+15%)) !important; } } .downloading { - border-left-color: $purple !important; + border-left-color: var(--purple) !important; + + &:global(.fullColor) { + background-color: rgba(122, 67, 182, 0.4) !important; + } } .unmonitored { - border-left-color: $gray !important; + border-left-color: var(--gray) !important; + + &:global(.fullColor) { + background-color: rgba(173, 173, 173, 0.5) !important; + } &:global(.colorImpaired) { - background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px); + background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); + } + + &:global(.fullColor.colorImpaired) { + background: repeating-linear-gradient(45deg, $fullColorGradient, $fullColorGradient 5px, transparent 5px, transparent 10px); } } .missing { - border-left-color: $dangerColor !important; + border-left-color: var(--dangerColor) !important; &:global(.colorImpaired) { - border-left-color: color($dangerColor saturation(+15%)) !important; - background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px); + border-left-color: color(#f05050 saturation(+15%)) !important; + background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); } } .unreleased { - border-left-color: $primaryColor !important; + border-left-color: var(--primaryColor) !important; &:global(.colorImpaired) { - background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px); + background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px); } } diff --git a/frontend/src/Calendar/Events/CalendarEventQueueDetails.js b/frontend/src/Calendar/Events/CalendarEventQueueDetails.js index fe130bdb8..9e3634fac 100644 --- a/frontend/src/Calendar/Events/CalendarEventQueueDetails.js +++ b/frontend/src/Calendar/Events/CalendarEventQueueDetails.js @@ -2,7 +2,6 @@ import PropTypes from 'prop-types'; import React from 'react'; import QueueDetails from 'Activity/Queue/QueueDetails'; import CircularProgressBar from 'Components/CircularProgressBar'; -import colors from 'Styles/Variables/colors'; import translate from 'Utilities/String/translate'; function CalendarEventQueueDetails(props) { @@ -31,7 +30,7 @@ function CalendarEventQueueDetails(props) { progress={progress} size={20} strokeWidth={2} - strokeColor={colors.purple} + strokeColor={'#7a43b6'} /> } diff --git a/frontend/src/Components/Alert.css b/frontend/src/Components/Alert.css index 312fbb4f2..135d1ee2b 100644 --- a/frontend/src/Components/Alert.css +++ b/frontend/src/Components/Alert.css @@ -7,25 +7,25 @@ } .danger { - border-color: $alertDangerBorderColor; - background-color: $alertDangerBackgroundColor; - color: $alertDangerColor; + border-color: var(--alertDangerBorderColor); + background-color: var(--alertDangerBackgroundColor); + color: var(--alertDangerColor); } .info { - border-color: $alertInfoBorderColor; - background-color: $alertInfoBackgroundColor; - color: $alertInfoColor; + border-color: var(--alertInfoBorderColor); + background-color: var(--alertInfoBackgroundColor); + color: var(--alertInfoColor); } .success { - border-color: $alertSuccessBorderColor; - background-color: $alertSuccessBackgroundColor; - color: $alertSuccessColor; + border-color: var(--alertSuccessBorderColor); + background-color: var(--alertSuccessBackgroundColor); + color: var(--alertSuccessColor); } .warning { - border-color: $alertWarningBorderColor; - background-color: $alertWarningBackgroundColor; - color: $alertWarningColor; + border-color: var(--alertWarningBorderColor); + background-color: var(--alertWarningBackgroundColor); + color: var(--alertWarningColor); } diff --git a/frontend/src/Components/Card.css b/frontend/src/Components/Card.css index b54bbcdf4..49a9abd76 100644 --- a/frontend/src/Components/Card.css +++ b/frontend/src/Components/Card.css @@ -3,9 +3,9 @@ margin: 10px; padding: 10px; border-radius: 3px; - background-color: $white; - box-shadow: 0 0 10px 1px $cardShadowColor; - color: $defaultColor; + background-color: var(--cardBackgroundColor); + box-shadow: 0 0 10px 1px var(--cardShadowColor); + color: var(--defaultColor); } .underlay { diff --git a/frontend/src/Components/CircularProgressBar.js b/frontend/src/Components/CircularProgressBar.js index 9ee12d0a1..6fc47aed9 100644 --- a/frontend/src/Components/CircularProgressBar.js +++ b/frontend/src/Components/CircularProgressBar.js @@ -1,6 +1,5 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import colors from 'Styles/Variables/colors'; import styles from './CircularProgressBar.css'; class CircularProgressBar extends Component { @@ -132,7 +131,7 @@ CircularProgressBar.defaultProps = { containerClassName: styles.circularProgressBarContainer, size: 60, strokeWidth: 5, - strokeColor: colors.readarrGreen, + strokeColor: '#00A65B', showProgressText: false }; diff --git a/frontend/src/Components/FieldSet.css b/frontend/src/Components/FieldSet.css index daf3bdf2e..c9a567c0e 100644 --- a/frontend/src/Components/FieldSet.css +++ b/frontend/src/Components/FieldSet.css @@ -13,7 +13,7 @@ width: 100%; border: 0; border-bottom: 1px solid #e5e5e5; - color: #3a3f51; + color: var(--textColor); font-size: 21px; line-height: inherit; } diff --git a/frontend/src/Components/FileBrowser/FileBrowserModalContent.css b/frontend/src/Components/FileBrowser/FileBrowserModalContent.css index 7ddb9e806..db31d6f86 100644 --- a/frontend/src/Components/FileBrowser/FileBrowserModalContent.css +++ b/frontend/src/Components/FileBrowser/FileBrowserModalContent.css @@ -13,7 +13,7 @@ } .faqLink { - color: $alertWarningColor; + color: var(--alertWarningColor); font-weight: bold; } diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRow.css b/frontend/src/Components/Filter/Builder/FilterBuilderRow.css index c5471b253..bcfc3b04e 100644 --- a/frontend/src/Components/Filter/Builder/FilterBuilderRow.css +++ b/frontend/src/Components/Filter/Builder/FilterBuilderRow.css @@ -3,7 +3,7 @@ margin-bottom: 5px; &:hover { - background-color: $tableRowHoverBackgroundColor; + background-color: var(--tableRowHoverBackgroundColor); } } diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css index 9bf027af9..f77146a06 100644 --- a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css +++ b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css @@ -15,5 +15,6 @@ .or { margin: 0 3px; - color: $themeDarkColor; + color: var(--themeDarkColor); + line-height: 31px; } diff --git a/frontend/src/Components/Filter/CustomFilters/CustomFilter.css b/frontend/src/Components/Filter/CustomFilters/CustomFilter.css index 7acb69dc7..e2b8c72bf 100644 --- a/frontend/src/Components/Filter/CustomFilters/CustomFilter.css +++ b/frontend/src/Components/Filter/CustomFilters/CustomFilter.css @@ -4,7 +4,7 @@ padding: 5px; &:hover { - background-color: $tableRowHoverBackgroundColor; + background-color: var(--tableRowHoverBackgroundColor); } } diff --git a/frontend/src/Components/Form/AutoSuggestInput.css b/frontend/src/Components/Form/AutoSuggestInput.css index 0f3279cb9..7dc416960 100644 --- a/frontend/src/Components/Form/AutoSuggestInput.css +++ b/frontend/src/Components/Form/AutoSuggestInput.css @@ -27,10 +27,10 @@ overflow-y: auto; max-height: 200px; width: 100%; - border: 1px solid $inputBorderColor; + border: 1px solid var(--inputBorderColor); border-radius: 4px; - background-color: $white; - box-shadow: inset 0 1px 1px $inputBoxShadowColor; + background-color: var(--inputBackgroundColor); + box-shadow: inset 0 1px 1px var(--inputBoxShadowColor); } } @@ -46,5 +46,5 @@ } .suggestionHighlighted { - background-color: $menuItemHoverBackgroundColor; + background-color: var(--menuItemHoverBackgroundColor); } diff --git a/frontend/src/Components/Form/CheckInput.css b/frontend/src/Components/Form/CheckInput.css index e0b05eca3..171121482 100644 --- a/frontend/src/Components/Form/CheckInput.css +++ b/frontend/src/Components/Form/CheckInput.css @@ -32,21 +32,21 @@ height: 20px; border: 1px solid #ccc; border-radius: 2px; - background-color: $white; - color: $white; + background-color: var(--white); + color: var(--white); text-align: center; line-height: 20px; } .checkbox:focus + .input { outline: 0; - border-color: $inputFocusBorderColor; - box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor; + border-color: var(--inputFocusBorderColor); + box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor); } .dangerIsChecked { - border-color: $dangerColor; - background-color: $dangerColor; + border-color: var(--dangerColor); + background-color: var(--dangerColor); &.isDisabled { opacity: 0.7; @@ -54,8 +54,8 @@ } .primaryIsChecked { - border-color: $primaryColor; - background-color: $primaryColor; + border-color: var(--primaryColor); + background-color: var(--primaryColor); &.isDisabled { opacity: 0.7; @@ -63,8 +63,8 @@ } .successIsChecked { - border-color: $successColor; - background-color: $successColor; + border-color: var(--successColor); + background-color: var(--successColor); &.isDisabled { opacity: 0.7; @@ -72,8 +72,8 @@ } .warningIsChecked { - border-color: $warningColor; - background-color: $warningColor; + border-color: var(--warningColor); + background-color: var(--warningColor); &.isDisabled { opacity: 0.7; @@ -82,15 +82,15 @@ .isNotChecked { &.isDisabled { - border-color: $disabledCheckInputColor; - background-color: $disabledCheckInputColor; + border-color: var(--disabledCheckInputColor); + background-color: var(--disabledCheckInputColor); opacity: 0.7; } } .isIndeterminate { - border-color: $gray; - background-color: $gray; + border-color: var(--gray); + background-color: var(--gray); } .helpText { diff --git a/frontend/src/Components/Form/EnhancedSelectInput.css b/frontend/src/Components/Form/EnhancedSelectInput.css index c11801e5c..174e2ca6e 100644 --- a/frontend/src/Components/Form/EnhancedSelectInput.css +++ b/frontend/src/Components/Form/EnhancedSelectInput.css @@ -39,7 +39,7 @@ .dropdownArrowContainerDisabled { composes: dropdownArrowContainer; - color: $disabledInputColor; + color: var(--disabledInputColor); } .optionsContainer { @@ -50,9 +50,9 @@ .options { composes: scroller from '~Components/Scroller/Scroller.css'; - border: 1px solid $inputBorderColor; + border: 1px solid var(--inputBorderColor); border-radius: 4px; - background-color: $white; + background-color: var(--inputBackgroundColor); } .optionsModal { @@ -75,9 +75,9 @@ .optionsModalScroller { composes: scroller from '~Components/Scroller/Scroller.css'; - border: 1px solid $inputBorderColor; + border: 1px solid var(--inputBorderColor); border-radius: 4px; - background-color: $white; + background-color: var(--inputBackgroundColor); } .loading { @@ -89,7 +89,7 @@ display: flex; justify-content: flex-end; height: 40px; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); } .mobileCloseButton { @@ -99,6 +99,6 @@ line-height: 40px; &:hover { - color: $modalCloseButtonHoverColor; + color: var(--modalCloseButtonHoverColor); } } diff --git a/frontend/src/Components/Form/EnhancedSelectInputOption.css b/frontend/src/Components/Form/EnhancedSelectInputOption.css index f6b6136ae..8dcfa25d5 100644 --- a/frontend/src/Components/Form/EnhancedSelectInputOption.css +++ b/frontend/src/Components/Form/EnhancedSelectInputOption.css @@ -7,7 +7,7 @@ cursor: default; &:hover { - background-color: #f8f8f8; + background-color: var(--inputHoverBackgroundColor); } } @@ -24,17 +24,17 @@ } .isSelected { - background-color: #e2e2e2; + background-color: var(--inputSelectedBackgroundColor); &:hover { - background-color: #e2e2e2; + background-color: var(--inputSelectedBackgroundColor); } &.isMobile { background-color: inherit; .iconContainer { - color: $primaryColor; + color: var(--primaryColor); } } } @@ -49,7 +49,7 @@ .isMobile { height: 50px; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); &:last-child { border: none; diff --git a/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css b/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css index 6b8b73af9..908126689 100644 --- a/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css +++ b/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css @@ -3,5 +3,5 @@ } .isDisabled { - color: $disabledInputColor; + color: var(--disabledInputColor); } diff --git a/frontend/src/Components/Form/FormInputGroup.css b/frontend/src/Components/Form/FormInputGroup.css index 1a1b104e6..32d91e29b 100644 --- a/frontend/src/Components/Form/FormInputGroup.css +++ b/frontend/src/Components/Form/FormInputGroup.css @@ -40,7 +40,7 @@ } .pendingChangesIcon { - color: $warningColor; + color: var(--warningColor); font-size: 20px; line-height: 35px; } diff --git a/frontend/src/Components/Form/FormInputHelpText.css b/frontend/src/Components/Form/FormInputHelpText.css index 756fd90db..0a6897d27 100644 --- a/frontend/src/Components/Form/FormInputHelpText.css +++ b/frontend/src/Components/Form/FormInputHelpText.css @@ -1,14 +1,14 @@ .helpText { margin-top: 5px; - color: $helpTextColor; + color: var(--helpTextColor); line-height: 20px; } .isError { - color: $dangerColor; + color: var(--dangerColor); .link { - color: $dangerColor; + color: var(--dangerColor); &:hover { color: #e01313; @@ -17,10 +17,10 @@ } .isWarning { - color: $warningColor; + color: var(--warningColor); .link { - color: $warningColor; + color: var(--warningColor); &:hover { color: #e36c00; diff --git a/frontend/src/Components/Form/FormLabel.css b/frontend/src/Components/Form/FormLabel.css index 236f4aab0..074b6091d 100644 --- a/frontend/src/Components/Form/FormLabel.css +++ b/frontend/src/Components/Form/FormLabel.css @@ -7,11 +7,11 @@ } .hasError { - color: $dangerColor; + color: var(--dangerColor); } .isAdvanced { - color: $advancedFormLabelColor; + color: var(--advancedFormLabelColor); } @media only screen and (max-width: $breakpointLarge) { diff --git a/frontend/src/Components/Form/HintedSelectInputOption.css b/frontend/src/Components/Form/HintedSelectInputOption.css index 74d1fb088..74bf6a86e 100644 --- a/frontend/src/Components/Form/HintedSelectInputOption.css +++ b/frontend/src/Components/Form/HintedSelectInputOption.css @@ -18,6 +18,6 @@ @add-mixin truncate; margin-left: 15px; - color: $darkGray; + color: var(--darkGray); font-size: $smallFontSize; } diff --git a/frontend/src/Components/Form/HintedSelectInputSelectedValue.css b/frontend/src/Components/Form/HintedSelectInputSelectedValue.css index a31970a9e..f779b83d7 100644 --- a/frontend/src/Components/Form/HintedSelectInputSelectedValue.css +++ b/frontend/src/Components/Form/HintedSelectInputSelectedValue.css @@ -18,7 +18,7 @@ flex: 1 10 0; margin-left: 15px; - color: $gray; + color: var(--gray); text-align: right; font-size: $smallFontSize; } diff --git a/frontend/src/Components/Form/Input.css b/frontend/src/Components/Form/Input.css index e9ca23d8f..dd9ee888d 100644 --- a/frontend/src/Components/Form/Input.css +++ b/frontend/src/Components/Form/Input.css @@ -2,26 +2,27 @@ padding: 6px 16px; width: 100%; height: 35px; - border: 1px solid $inputBorderColor; + border: 1px solid var(--inputBorderColor); border-radius: 4px; - background-color: $white; - box-shadow: inset 0 1px 1px $inputBoxShadowColor; + background-color: var(--inputBackgroundColor); + box-shadow: inset 0 1px 1px var(--inputBoxShadowColor); + color: var(--textColor); &:focus { outline: 0; - border-color: $inputFocusBorderColor; - box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor; + border-color: var(--inputFocusBorderColor); + box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor); } } .hasError { - border-color: $inputErrorBorderColor; - box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputErrorBoxShadowColor; + border-color: var(--inputErrorBorderColor); + box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputErrorBoxShadowColor); } .hasWarning { - border-color: $inputWarningBorderColor; - box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputWarningBoxShadowColor; + border-color: var(--inputWarningBorderColor); + box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputWarningBoxShadowColor); } .hasButton { diff --git a/frontend/src/Components/Form/KeyValueListInput.css b/frontend/src/Components/Form/KeyValueListInput.css index 8bf23610b..d86e6a512 100644 --- a/frontend/src/Components/Form/KeyValueListInput.css +++ b/frontend/src/Components/Form/KeyValueListInput.css @@ -7,8 +7,8 @@ &.isFocused { outline: 0; - border-color: $inputFocusBorderColor; - box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor; + border-color: var(--inputFocusBorderColor); + box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor); } } diff --git a/frontend/src/Components/Form/KeyValueListInputItem.css b/frontend/src/Components/Form/KeyValueListInputItem.css index e136823c2..30c8d1437 100644 --- a/frontend/src/Components/Form/KeyValueListInputItem.css +++ b/frontend/src/Components/Form/KeyValueListInputItem.css @@ -1,7 +1,7 @@ .itemContainer { display: flex; margin-bottom: 3px; - border-bottom: 1px solid $inputBorderColor; + border-bottom: 1px solid var(--inputBorderColor); &:last-child { margin-bottom: 0; @@ -20,4 +20,6 @@ .valueInput { width: 100%; border: none; + background-color: var(--inputBackground); + color: var(--textColor); } diff --git a/frontend/src/Components/Form/RootFolderSelectInputOption.css b/frontend/src/Components/Form/RootFolderSelectInputOption.css index d8b44fcad..f7a2759fd 100644 --- a/frontend/src/Components/Form/RootFolderSelectInputOption.css +++ b/frontend/src/Components/Form/RootFolderSelectInputOption.css @@ -15,6 +15,6 @@ .freeSpace { margin-left: 15px; - color: $darkGray; + color: var(--darkGray); font-size: $smallFontSize; } diff --git a/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css b/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css index 6b0cf9e4f..86107a624 100644 --- a/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css +++ b/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css @@ -16,7 +16,7 @@ .freeSpace { flex: 0 0 auto; margin-left: 15px; - color: $gray; + color: var(--gray); text-align: right; font-size: $smallFontSize; } diff --git a/frontend/src/Components/Form/TagInput.css b/frontend/src/Components/Form/TagInput.css index 9328c762a..eeddab5b4 100644 --- a/frontend/src/Components/Form/TagInput.css +++ b/frontend/src/Components/Form/TagInput.css @@ -7,8 +7,8 @@ &.isFocused { outline: 0; - border-color: $inputFocusBorderColor; - box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor; + border-color: var(--inputFocusBorderColor); + box-shadow: inset 0 1px 1px var(--inputBoxShadowColor), 0 0 8px var(--inputFocusBoxShadowColor); } } @@ -28,4 +28,6 @@ width: 0%; height: 31px; border: none; + background-color: var(--inputBackground); + color: var(--textColor); } diff --git a/frontend/src/Components/Form/TextInput.css b/frontend/src/Components/Form/TextInput.css index 80503704d..a3d9692c6 100644 --- a/frontend/src/Components/Form/TextInput.css +++ b/frontend/src/Components/Form/TextInput.css @@ -3,7 +3,7 @@ } .readOnly { - background-color: #eee; + background-color: var(--inputReadOnlyBackgroundColor); } .hasError { diff --git a/frontend/src/Components/Form/UMaskInput.css b/frontend/src/Components/Form/UMaskInput.css index 7b687caf9..a777aaeef 100644 --- a/frontend/src/Components/Form/UMaskInput.css +++ b/frontend/src/Components/Form/UMaskInput.css @@ -49,5 +49,5 @@ } .readOnly { - background-color: #eee; + background-color: var(--inputReadOnlyBackgroundColor); } diff --git a/frontend/src/Components/HeartRating.css b/frontend/src/Components/HeartRating.css index 705adfcae..030605dbd 100644 --- a/frontend/src/Components/HeartRating.css +++ b/frontend/src/Components/HeartRating.css @@ -1,4 +1,4 @@ .heart { margin-right: 5px; - color: $themeRed; + color: var(--themeRed); } diff --git a/frontend/src/Components/Icon.css b/frontend/src/Components/Icon.css index db95e019b..69ffc40f5 100644 --- a/frontend/src/Components/Icon.css +++ b/frontend/src/Components/Icon.css @@ -1,5 +1,5 @@ .danger { - color: $dangerColor; + color: var(--dangerColor); } .default { @@ -7,25 +7,33 @@ } .disabled { - color: $disabledColor; + color: var(--disabledColor); } .info { - color: $infoColor; + color: var(--infoColor); + + &:global(.darken) { + color: color(var(--infoColor) shade(30%)); + } } .pink { - color: $pink; + color: var(--pink); + + &:global(.darken) { + color: color(var(--pink) shade(30%)); + } } .success { - color: $successColor; + color: var(--successColor); } .warning { - color: $warningColor; + color: var(--warningColor); } .purple { - color: $purple; + color: var(--purple); } diff --git a/frontend/src/Components/Label.css b/frontend/src/Components/Label.css index df17427d9..f3ff83993 100644 --- a/frontend/src/Components/Label.css +++ b/frontend/src/Components/Label.css @@ -3,7 +3,7 @@ margin: 2px; border: 1px solid; border-radius: 2px; - color: $white; + color: var(--white); text-align: center; white-space: nowrap; line-height: 1; @@ -13,76 +13,78 @@ /** Kinds **/ .danger { - border-color: $dangerColor; - background-color: $dangerColor; + border-color: var(--dangerColor); + background-color: var(--dangerColor); &.outline { - color: $dangerColor; + color: var(--dangerColor); } } .default { - border-color: $themeLightColor; - background-color: $themeLightColor; + border-color: var(--themeLightColor); + background-color: var(--themeLightColor); &.outline { - color: $themeLightColor; + color: var(--themeLightColor); } } .disabled { - border-color: $disabledColor; - background-color: $disabledColor; + border-color: var(--disabledColor); + background-color: var(--disabledColor); &.outline { - color: $disabledColor; + color: var(--white); } } .info { - border-color: $infoColor; - background-color: $infoColor; + border-color: var(--infoColor); + background-color: var(--infoColor); + color: var(--infoTextColor); &.outline { - color: $infoColor; + color: var(--infoColor); } } .inverse { - border-color: $lightGray; - background-color: $lightGray; - color: $defaultColor; + border-color: var(--inverseLabelColor); + background-color: var(--inverseLabelColor); + color: var(--inverseLabelTextColor); &.outline { - background-color: $defaultColor !important; - color: $lightGray; + background-color: var(--inverseLabelTextColor) !important; + color: var(--inverseLabelColor); } } .primary { - border-color: $primaryColor; - background-color: $primaryColor; + border-color: var(--primaryColor); + background-color: var(--primaryColor); &.outline { - color: $primaryColor; + color: var(--primaryColor); } } .success { - border-color: $successColor; - background-color: $successColor; + border-color: var(--successColor); + background-color: var(--successColor); + color: #eee; &.outline { - color: $successColor; + color: var(--successColor); } } .warning { - border-color: $warningColor; - background-color: $warningColor; + border-color: var(--warningColor); + background-color: var(--warningColor); &.outline { - color: $warningColor; + color: var(--warningColor); } } @@ -107,5 +109,5 @@ /** Outline **/ .outline { - background-color: $white; + background-color: var(--disabledLabelColor); } diff --git a/frontend/src/Components/Link/Button.css b/frontend/src/Components/Link/Button.css index d5b7e8200..0855b2de6 100644 --- a/frontend/src/Components/Link/Button.css +++ b/frontend/src/Components/Link/Button.css @@ -19,62 +19,62 @@ } .danger { - border-color: $dangerBorderColor; - background-color: $dangerBackgroundColor; - color: $white; + border-color: var(--dangerBorderColor); + background-color: var(--dangerBackgroundColor); + color: var(--white); &:hover { - border-color: $dangerHoverBorderColor; - background-color: $dangerHoverBackgroundColor; - color: $white; + border-color: var(--dangerHoverBorderColor); + background-color: var(--dangerHoverBackgroundColor); + color: var(--white); } } .default { - border-color: $defaultBorderColor; - background-color: $defaultBackgroundColor; - color: $defaultColor; + border-color: var(--defaultBorderColor); + background-color: var(--defaultBackgroundColor); + color: var(--defaultColor); &:hover { - border-color: $defaultHoverBorderColor; - background-color: $defaultHoverBackgroundColor; - color: $defaultColor; + border-color: var(--defaultHoverBorderColor); + background-color: var(--defaultHoverBackgroundColor); + color: var(--defaultColor); } } .primary { - border-color: $primaryBorderColor; - background-color: $primaryBackgroundColor; - color: $white; + border-color: var(--primaryBorderColor); + background-color: var(--primaryBackgroundColor); + color: var(--white); &:hover { - border-color: $primaryHoverBorderColor; - background-color: $primaryHoverBackgroundColor; - color: $white; + border-color: var(--primaryHoverBorderColor); + background-color: var(--primaryHoverBackgroundColor); + color: var(--white); } } .success { - border-color: $successBorderColor; - background-color: $successBackgroundColor; - color: $white; + border-color: var(--successBorderColor); + background-color: var(--successBackgroundColor); + color: var(--white); &:hover { - border-color: $successHoverBorderColor; - background-color: $successHoverBackgroundColor; - color: $white; + border-color: var(--successHoverBorderColor); + background-color: var(--successHoverBackgroundColor); + color: var(--white); } } .warning { - border-color: $warningBorderColor; - background-color: $warningBackgroundColor; - color: $white; + border-color: var(--warningBorderColor); + background-color: var(--warningBackgroundColor); + color: var(--white); &:hover { - border-color: $warningHoverBorderColor; - background-color: $warningHoverBackgroundColor; - color: $white; + border-color: var(--warningHoverBorderColor); + background-color: var(--warningHoverBackgroundColor); + color: var(--white); } } diff --git a/frontend/src/Components/Link/IconButton.css b/frontend/src/Components/Link/IconButton.css index 2061243ee..b697e3bd4 100644 --- a/frontend/src/Components/Link/IconButton.css +++ b/frontend/src/Components/Link/IconButton.css @@ -12,10 +12,10 @@ &:hover { border: none; background-color: inherit; - color: $iconButtonHoverColor; + color: var(--iconButtonHoverColor); } &.isDisabled { - color: $iconButtonDisabledColor; + color: var(--iconButtonDisabledColor); } } diff --git a/frontend/src/Components/Link/Link.css b/frontend/src/Components/Link/Link.css index ff0ed8d0c..47b6fb852 100644 --- a/frontend/src/Components/Link/Link.css +++ b/frontend/src/Components/Link/Link.css @@ -15,10 +15,10 @@ } .to { - color: $linkColor; + color: var(--linkColor); &:hover { - color: $linkHoverColor; + color: var(--linkHoverColor); text-decoration: underline; } } diff --git a/frontend/src/Components/Loading/LoadingIndicator.css b/frontend/src/Components/Loading/LoadingIndicator.css index fd224b1d6..8732d786b 100644 --- a/frontend/src/Components/Loading/LoadingIndicator.css +++ b/frontend/src/Components/Loading/LoadingIndicator.css @@ -26,7 +26,7 @@ .ripple { position: absolute; - border: 2px solid #3a3f51; + border: 2px solid var(--themeDarkColor); border-radius: 100%; animation: rippleContainer 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); animation-fill-mode: both; diff --git a/frontend/src/Components/Marquee.css b/frontend/src/Components/Marquee.css index b7f9276fb..9e12e83e3 100644 --- a/frontend/src/Components/Marquee.css +++ b/frontend/src/Components/Marquee.css @@ -4,8 +4,8 @@ padding-left: 10px; white-space: nowrap; /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-mask-image: linear-gradient(to right, transparent, $white 10px, $white 90%, transparent), linear-gradient(to left, transparent, $white 10px, $white 90%, transparent); - mask-image: linear-gradient(to right, transparent, $white 10px, $white 90%, transparent), linear-gradient(to left, transparent, $white 10px, $white 90%, transparent); + -webkit-mask-image: linear-gradient(to right, transparent, var(--white) 10px, var(--white) 90%, transparent), linear-gradient(to left, transparent, var(--white) 10px, var(--white) 90%, transparent); + mask-image: linear-gradient(to right, transparent, var(--white) 10px, var(--white) 90%, transparent), linear-gradient(to left, transparent, var(--white) 10px, var(--white) 90%, transparent); } .inner { diff --git a/frontend/src/Components/Menu/MenuButton.css b/frontend/src/Components/Menu/MenuButton.css index 38812cfb7..ef7a8a5ff 100644 --- a/frontend/src/Components/Menu/MenuButton.css +++ b/frontend/src/Components/Menu/MenuButton.css @@ -10,12 +10,12 @@ } &:hover { - color: $toobarButtonHoverColor; + color: var(--toobarButtonHoverColor); } } .isDisabled { - color: $disabledColor; + color: var(--disabledColor); pointer-events: none; } diff --git a/frontend/src/Components/Menu/MenuContent.css b/frontend/src/Components/Menu/MenuContent.css index b9327fdd7..d6c990131 100644 --- a/frontend/src/Components/Menu/MenuContent.css +++ b/frontend/src/Components/Menu/MenuContent.css @@ -2,7 +2,7 @@ z-index: $popperZIndex; display: flex; flex-direction: column; - background-color: $toolbarMenuItemBackgroundColor; + background-color: var(--toolbarMenuItemBackgroundColor); line-height: 20px; } diff --git a/frontend/src/Components/Menu/MenuItem.css b/frontend/src/Components/Menu/MenuItem.css index 2eb2817af..a14a06014 100644 --- a/frontend/src/Components/Menu/MenuItem.css +++ b/frontend/src/Components/Menu/MenuItem.css @@ -5,19 +5,19 @@ padding: 10px 20px; min-width: 150px; max-width: 250px; - background-color: $toolbarMenuItemBackgroundColor; - color: $menuItemColor; + background-color: var(--toolbarMenuItemBackgroundColor); + color: var(--menuItemColor); line-height: 20px; &:hover, &:focus { - background-color: $toolbarMenuItemHoverBackgroundColor; - color: $menuItemHoverColor; + background-color: var(--toolbarMenuItemHoverBackgroundColor); + color: var(--menuItemHoverColor); text-decoration: none; } } .isDisabled { - color: $disabledColor; + color: var(--disabledColor); pointer-events: none; } diff --git a/frontend/src/Components/Menu/MenuItemSeparator.css b/frontend/src/Components/Menu/MenuItemSeparator.css index e48e7f16f..199b15b56 100644 --- a/frontend/src/Components/Menu/MenuItemSeparator.css +++ b/frontend/src/Components/Menu/MenuItemSeparator.css @@ -2,5 +2,5 @@ overflow: hidden; min-height: 1px; height: 1px; - background-color: $themeDarkColor; + background-color: var(--themeDarkColor); } diff --git a/frontend/src/Components/Modal/Modal.css b/frontend/src/Components/Modal/Modal.css index d7269ea46..33f849945 100644 --- a/frontend/src/Components/Modal/Modal.css +++ b/frontend/src/Components/Modal/Modal.css @@ -12,7 +12,7 @@ justify-content: center; width: 100%; height: 100%; - background-color: $modalBackdropBackgroundColor; + background-color: var(--modalBackdropBackgroundColor); opacity: 1; } diff --git a/frontend/src/Components/Modal/ModalContent.css b/frontend/src/Components/Modal/ModalContent.css index afd798dfa..d7a1212ec 100644 --- a/frontend/src/Components/Modal/ModalContent.css +++ b/frontend/src/Components/Modal/ModalContent.css @@ -4,7 +4,7 @@ flex-direction: column; flex-grow: 1; width: 100%; - background-color: $modalBackgroundColor; + background-color: var(--modalBackgroundColor); } .closeButton { @@ -18,6 +18,6 @@ line-height: 60px; &:hover { - color: $modalCloseButtonHoverColor; + color: var(--modalCloseButtonHoverColor); } } diff --git a/frontend/src/Components/Modal/ModalFooter.css b/frontend/src/Components/Modal/ModalFooter.css index 3b817d2bf..9ce992b2e 100644 --- a/frontend/src/Components/Modal/ModalFooter.css +++ b/frontend/src/Components/Modal/ModalFooter.css @@ -4,7 +4,7 @@ justify-content: flex-end; flex-shrink: 0; padding: 15px 30px; - border-top: 1px solid $borderColor; + border-top: 1px solid var(--borderColor); a, button { diff --git a/frontend/src/Components/Modal/ModalHeader.css b/frontend/src/Components/Modal/ModalHeader.css index eab77a9f8..cd1e54d84 100644 --- a/frontend/src/Components/Modal/ModalHeader.css +++ b/frontend/src/Components/Modal/ModalHeader.css @@ -3,6 +3,6 @@ flex-shrink: 0; padding: 15px 50px 15px 30px; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); font-size: 18px; } diff --git a/frontend/src/Components/MonitorToggleButton.css b/frontend/src/Components/MonitorToggleButton.css index 09b64f1ab..59376129d 100644 --- a/frontend/src/Components/MonitorToggleButton.css +++ b/frontend/src/Components/MonitorToggleButton.css @@ -6,6 +6,6 @@ } .isDisabled { - color: $disabledColor; + color: var(--disabledColor); cursor: not-allowed; } diff --git a/frontend/src/Components/Page/Header/AuthorSearchInput.css b/frontend/src/Components/Page/Header/AuthorSearchInput.css index e71f194d5..cce1b51d2 100644 --- a/frontend/src/Components/Page/Header/AuthorSearchInput.css +++ b/frontend/src/Components/Page/Header/AuthorSearchInput.css @@ -12,22 +12,22 @@ .ripple { composes: ripple from '~Components/Loading/LoadingIndicator.css'; - border: 1px solid $toolbarColor; + border: 1px solid var(--toolbarColor); } .input { margin-left: 8px; width: 200px; border: none; - border-bottom: solid 1px $white; + border-bottom: solid 1px var(--white); border-radius: 0; background-color: transparent; box-shadow: none; - color: $white; + color: var(--white); transition: border 0.3s ease-out; &::placeholder { - color: $white; + color: var(--white); transition: color 0.3s ease-out; } @@ -60,13 +60,13 @@ overflow-y: auto; min-width: 100%; max-height: 230px; - border: 1px solid $themeDarkColor; + border: 1px solid var(--themeDarkColor); border-radius: 4px; border-top-left-radius: 0; border-top-right-radius: 0; - background-color: $themeDarkColor; - box-shadow: inset 0 1px 1px $inputBoxShadowColor; - color: $menuItemColor; + background-color: var(--themeDarkColor); + box-shadow: inset 0 1px 1px var(--inputBoxShadowColor); + color: var(--menuItemColor); } } @@ -82,12 +82,12 @@ } .highlighted { - background-color: $primaryHoverBackgroundColor; + background-color: var(--themeLightColor); } .sectionTitle { padding: 5px 8px; - color: $disabledColor; + color: var(--disabledColor); } .addNewAuthorSuggestion { diff --git a/frontend/src/Components/Page/Header/AuthorSearchResult.css b/frontend/src/Components/Page/Header/AuthorSearchResult.css index 4fba173b6..6bccd148f 100644 --- a/frontend/src/Components/Page/Header/AuthorSearchResult.css +++ b/frontend/src/Components/Page/Header/AuthorSearchResult.css @@ -22,7 +22,7 @@ .alternateTitle { composes: title; - color: $disabledColor; + color: var(--disabledColor); font-size: $smallFontSize; } diff --git a/frontend/src/Components/Page/Header/BookSearchResult.css b/frontend/src/Components/Page/Header/BookSearchResult.css index 4fba173b6..6bccd148f 100644 --- a/frontend/src/Components/Page/Header/BookSearchResult.css +++ b/frontend/src/Components/Page/Header/BookSearchResult.css @@ -22,7 +22,7 @@ .alternateTitle { composes: title; - color: $disabledColor; + color: var(--disabledColor); font-size: $smallFontSize; } diff --git a/frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.css b/frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.css index 4425e0e0d..e8a2b0ce2 100644 --- a/frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.css +++ b/frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.css @@ -8,8 +8,8 @@ .key { padding: 2px 4px; border-radius: 3px; - background-color: $defaultColor; + background-color: var(--defaultColor); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); - color: $white; + color: var(--white); font-size: 16px; } diff --git a/frontend/src/Components/Page/Header/PageHeader.css b/frontend/src/Components/Page/Header/PageHeader.css index f28c9b02a..c561f1482 100644 --- a/frontend/src/Components/Page/Header/PageHeader.css +++ b/frontend/src/Components/Page/Header/PageHeader.css @@ -4,8 +4,8 @@ align-items: center; flex: 0 0 auto; height: $headerHeight; - background-color: $themeAlternateRed; - color: $white; + background-color: var(--pageHeaderBackgroundColor); + color: var(--white); } .logoContainer { @@ -41,12 +41,12 @@ composes: link from '~Components/Link/Link.css'; width: 30px; - color: $themeDarkRed; + color: var(--themeRed); text-align: center; line-height: 60px; &:hover { - color: $themeDarkColor; + color: var(--themeDarkColor); } } diff --git a/frontend/src/Components/Page/Header/PageHeaderActionsMenu.css b/frontend/src/Components/Page/Header/PageHeaderActionsMenu.css index 0fee43911..5d41fc62e 100644 --- a/frontend/src/Components/Page/Header/PageHeaderActionsMenu.css +++ b/frontend/src/Components/Page/Header/PageHeaderActionsMenu.css @@ -5,7 +5,7 @@ text-align: center; &:hover { - color: $themeDarkColor; + color: var(--themeDarkColor); } } diff --git a/frontend/src/Components/Page/LoadingPage.css b/frontend/src/Components/Page/LoadingPage.css index 31f293f62..93ad82d9a 100644 --- a/frontend/src/Components/Page/LoadingPage.css +++ b/frontend/src/Components/Page/LoadingPage.css @@ -1,5 +1,7 @@ .page { composes: page from '~./Page.css'; + + background-color: var(--pageBackground); } .logoFull { diff --git a/frontend/src/Components/Page/PageContentFooter.css b/frontend/src/Components/Page/PageContentFooter.css index 74bdb3811..cd942ea7d 100644 --- a/frontend/src/Components/Page/PageContentFooter.css +++ b/frontend/src/Components/Page/PageContentFooter.css @@ -2,7 +2,7 @@ display: flex; flex: 0 0 auto; padding: 20px; - background-color: #f1f1f1; + background-color: var(--pageFooterBackground); } @media only screen and (max-width: $breakpointSmall) { diff --git a/frontend/src/Components/Page/PageJumpBarItem.css b/frontend/src/Components/Page/PageJumpBarItem.css index f1a0c3699..235562a2e 100644 --- a/frontend/src/Components/Page/PageJumpBarItem.css +++ b/frontend/src/Components/Page/PageJumpBarItem.css @@ -1,6 +1,6 @@ .jumpBarItem { flex: 1 1 $jumpBarItemHeight; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); text-align: center; font-weight: bold; diff --git a/frontend/src/Components/Page/Sidebar/Messages/Message.css b/frontend/src/Components/Page/Sidebar/Messages/Message.css index 7d53adb69..d1d94ce08 100644 --- a/frontend/src/Components/Page/Sidebar/Messages/Message.css +++ b/frontend/src/Components/Page/Sidebar/Messages/Message.css @@ -1,6 +1,6 @@ .message { display: flex; - border-left: 3px solid $infoColor; + border-left: 3px solid var(--infoColor); } .iconContainer, @@ -9,7 +9,7 @@ justify-content: center; flex-direction: column; padding: 2px 0; - color: $sidebarColor; + color: var(--sidebarColor); } .iconContainer { @@ -26,17 +26,17 @@ /* Types */ .error { - border-left-color: $dangerColor; + border-left-color: var(--dangerColor); } .info { - border-left-color: $infoColor; + border-left-color: var(--infoColor); } .success { - border-left-color: $successColor; + border-left-color: var(--successColor); } .warning { - border-left-color: $warningColor; + border-left-color: var(--warningColor); } diff --git a/frontend/src/Components/Page/Sidebar/PageSidebar.css b/frontend/src/Components/Page/Sidebar/PageSidebar.css index 3f2abeee7..ee44c0407 100644 --- a/frontend/src/Components/Page/Sidebar/PageSidebar.css +++ b/frontend/src/Components/Page/Sidebar/PageSidebar.css @@ -2,7 +2,7 @@ flex: 0 0 $sidebarWidth; overflow: hidden; width: $sidebarWidth; - background-color: $sidebarBackgroundColor; + background-color: var(--sidebarBackgroundColor); transition: transform 300ms ease-in-out; transform: translateX(0); } @@ -11,8 +11,8 @@ display: flex; flex-direction: column; overflow: hidden; - background-color: $sidebarBackgroundColor; - color: $white; + background-color: var(--sidebarBackgroundColor); + color: var(--white); } @media only screen and (max-width: $breakpointSmall) { diff --git a/frontend/src/Components/Page/Sidebar/PageSidebarItem.css b/frontend/src/Components/Page/Sidebar/PageSidebarItem.css index c97087cd1..0165ce60d 100644 --- a/frontend/src/Components/Page/Sidebar/PageSidebarItem.css +++ b/frontend/src/Components/Page/Sidebar/PageSidebarItem.css @@ -1,21 +1,21 @@ .item { border-left: 3px solid transparent; - color: $sidebarColor; + color: var(--sidebarColor); transition: border-left 0.3s ease-in-out; } .isActiveItem { - border-left: 3px solid $themeAlternateRed; + border-left: 3px solid var(--themeAlternateRed); } .link { display: block; padding: 12px 24px; - color: $sidebarColor; + color: var(--sidebarColor); &:hover, &:focus { - color: $themeRed; + color: var(--themeRed); text-decoration: none; } } @@ -27,11 +27,11 @@ } .isActiveLink { - color: $themeRed; + color: var(--themeAlternateRed); } .isActiveParentLink { - background-color: $sidebarActiveBackgroundColor; + background-color: var(--sidebarActiveBackgroundColor); } .iconContainer { diff --git a/frontend/src/Components/Page/Toolbar/PageToolbar.css b/frontend/src/Components/Page/Toolbar/PageToolbar.css index e040bc884..d7fb0d5d8 100644 --- a/frontend/src/Components/Page/Toolbar/PageToolbar.css +++ b/frontend/src/Components/Page/Toolbar/PageToolbar.css @@ -4,8 +4,8 @@ flex: 0 0 auto; padding: 0 20px; height: $toolbarHeight; - background-color: $toolbarBackgroundColor; - color: $toolbarColor; + background-color: var(--toolbarBackgroundColor); + color: var(--toolbarColor); line-height: 60px; } diff --git a/frontend/src/Components/Page/Toolbar/PageToolbarButton.css b/frontend/src/Components/Page/Toolbar/PageToolbarButton.css index e729ed000..0b6918296 100644 --- a/frontend/src/Components/Page/Toolbar/PageToolbarButton.css +++ b/frontend/src/Components/Page/Toolbar/PageToolbarButton.css @@ -6,16 +6,16 @@ text-align: center; &:hover { - color: $toobarButtonHoverColor; + color: var(--toobarButtonHoverColor); } &.isDisabled { - color: $disabledColor; + color: var(--disabledColor); } } .isDisabled { - color: $disabledColor; + color: var(--disabledColor); } .labelContainer { @@ -27,7 +27,7 @@ .label { padding: 0 3px; - color: $toolbarLabelColor; + color: var(--toolbarLabelColor); font-size: $extraSmallFontSize; line-height: calc($extraSmallFontSize + 1px); } diff --git a/frontend/src/Components/ProgressBar.css b/frontend/src/Components/ProgressBar.css index 777187eec..33c047bc6 100644 --- a/frontend/src/Components/ProgressBar.css +++ b/frontend/src/Components/ProgressBar.css @@ -3,7 +3,7 @@ overflow: hidden; width: 100%; border-radius: 4px; - background-color: #f5f5f5; + background-color: var(--progressBarBackgroundColor); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } @@ -14,13 +14,13 @@ width: 0; height: 100%; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - color: $white; + color: var(--white); transition: width 0.6s ease; } .frontTextContainer { z-index: 1; - color: $white; + color: var(--white); } .backTextContainer, @@ -42,35 +42,35 @@ } .primary { - background-color: $primaryColor; + background-color: var(--primaryColor); } .danger { - background-color: $dangerColor; + background-color: var(--dangerColor); &:global(.colorImpaired) { - background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px); + background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px); } } .success { - background-color: $successColor; + background-color: var(--successColor); } .purple { - background-color: $purple; + background-color: var(--purple); } .warning { - background-color: $warningColor; + background-color: var(--warningColor); &:global(.colorImpaired) { - background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px); + background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px); } } .info { - background-color: $infoColor; + background-color: var(--infoColor); } .small { diff --git a/frontend/src/Components/Scroller/OverlayScroller.css b/frontend/src/Components/Scroller/OverlayScroller.css index 0e8a2ffd7..c1836d365 100644 --- a/frontend/src/Components/Scroller/OverlayScroller.css +++ b/frontend/src/Components/Scroller/OverlayScroller.css @@ -10,10 +10,10 @@ min-height: 100px; border: 1px solid transparent; border-radius: 5px; - background-color: $scrollbarBackgroundColor; + background-color: var(--scrollbarBackgroundColor); background-clip: padding-box; &:hover { - background-color: $scrollbarHoverBackgroundColor; + background-color: var(--scrollbarHoverBackgroundColor); } } diff --git a/frontend/src/Components/Table/Cells/TableRowCell.css b/frontend/src/Components/Table/Cells/TableRowCell.css index 1c3e6fc5a..47ce0d22e 100644 --- a/frontend/src/Components/Table/Cells/TableRowCell.css +++ b/frontend/src/Components/Table/Cells/TableRowCell.css @@ -1,6 +1,6 @@ .cell { padding: 8px; - border-top: 1px solid #eee; + border-top: 1px solid var(--borderColor); line-height: 1.52857143; } diff --git a/frontend/src/Components/Table/TableOptions/TableOptionsColumn.css b/frontend/src/Components/Table/TableOptions/TableOptionsColumn.css index 204773c3d..ef3d9b062 100644 --- a/frontend/src/Components/Table/TableOptions/TableOptionsColumn.css +++ b/frontend/src/Components/Table/TableOptions/TableOptionsColumn.css @@ -4,7 +4,7 @@ width: 100%; border: 1px solid #aaa; border-radius: 4px; - background: #fafafa; + background: var(--inputBackgroundColor); } .checkContainer { diff --git a/frontend/src/Components/Table/TablePager.css b/frontend/src/Components/Table/TablePager.css index 19f5a8f6b..d73a0d0c0 100644 --- a/frontend/src/Components/Table/TablePager.css +++ b/frontend/src/Components/Table/TablePager.css @@ -46,11 +46,11 @@ } .records { - color: $disabledColor; + color: var(--disabledColor); } .disabledPageButton { - color: $disabledColor; + color: var(--disabledColor); } .pageSelect { diff --git a/frontend/src/Components/Table/TableRow.css b/frontend/src/Components/Table/TableRow.css index dcc6ad8cf..df297a5fe 100644 --- a/frontend/src/Components/Table/TableRow.css +++ b/frontend/src/Components/Table/TableRow.css @@ -2,6 +2,6 @@ transition: background-color 500ms; &:hover { - background-color: $tableRowHoverBackgroundColor; + background-color: var(--tableRowHoverBackgroundColor); } } diff --git a/frontend/src/Components/Table/VirtualTableRow.css b/frontend/src/Components/Table/VirtualTableRow.css index f4c825b64..fcae53bf6 100644 --- a/frontend/src/Components/Table/VirtualTableRow.css +++ b/frontend/src/Components/Table/VirtualTableRow.css @@ -3,7 +3,7 @@ transition: background-color 500ms; &:hover { - background-color: #fafbfc; + background-color: var(--tableRowHoverBackgroundColor); } } diff --git a/frontend/src/Components/Tooltip/Popover.css b/frontend/src/Components/Tooltip/Popover.css index 7b0592844..7d9e9da5d 100644 --- a/frontend/src/Components/Tooltip/Popover.css +++ b/frontend/src/Components/Tooltip/Popover.css @@ -1,13 +1,14 @@ .title { padding: 10px 20px; - border-bottom: 1px solid $popoverTitleBorderColor; - background-color: $popoverTitleBackgroundColor; + border-bottom: 1px solid var(--popoverTitleBorderColor); + background-color: var(--popoverTitleBackgroundColor); font-size: 16px; } .body { overflow: auto; padding: 10px; + background-color: var(--popoverBodyBackgroundColor); } .tooltipBody { diff --git a/frontend/src/Components/Tooltip/Tooltip.css b/frontend/src/Components/Tooltip/Tooltip.css index c5ddc7272..8ab533d07 100644 --- a/frontend/src/Components/Tooltip/Tooltip.css +++ b/frontend/src/Components/Tooltip/Tooltip.css @@ -7,13 +7,14 @@ position: relative; &.default { - background-color: $white; - box-shadow: 0 5px 10px $popoverShadowColor; + background-color: var(--popoverBodyBackgroundColor); + box-shadow: 0 5px 10px var(--popoverShadowColor); } &.inverse { - background-color: $themeDarkColor; - box-shadow: 0 5px 10px $popoverShadowInverseColor; + background-color: var(--themeDarkColor); + box-shadow: 0 5px 10px var(--popoverShadowInverseColor); + color: var(--white); } } @@ -49,20 +50,20 @@ content: ' '; &.default { - border-top-color: $popoverArrowBorderColor; + border-top-color: var(--popoverArrowBorderColor); } &.inverse { - border-top-color: $popoverArrowBorderInverseColor; + border-top-color: var(--popoverArrowBorderInverseColor); } } &.default { - border-top-color: $popoverArrowBorderColor; + border-top-color: var(--popoverArrowBorderColor); } &.inverse { - border-top-color: $popoverArrowBorderInverseColor; + border-top-color: var(--popoverArrowBorderInverseColor); } } @@ -78,20 +79,20 @@ content: ' '; &.default { - border-right-color: $popoverArrowBorderColor; + border-right-color: var(--popoverArrowBorderColor); } &.inverse { - border-right-color: $popoverArrowBorderInverseColor; + border-right-color: var(--popoverArrowBorderInverseColor); } } &.default { - border-right-color: $popoverArrowBorderColor; + border-right-color: var(--popoverArrowBorderColor); } &.inverse { - border-right-color: $popoverArrowBorderInverseColor; + border-right-color: var(--popoverArrowBorderInverseColor); } } @@ -107,20 +108,20 @@ content: ' '; &.default { - border-bottom-color: $popoverArrowBorderColor; + border-bottom-color: var(--popoverArrowBorderColor); } &.inverse { - border-bottom-color: $popoverArrowBorderInverseColor; + border-bottom-color: var(--popoverArrowBorderInverseColor); } } &.default { - border-bottom-color: $popoverArrowBorderColor; + border-bottom-color: var(--popoverArrowBorderColor); } &.inverse { - border-bottom-color: $popoverArrowBorderInverseColor; + border-bottom-color: var(--popoverArrowBorderInverseColor); } } @@ -136,20 +137,20 @@ content: ' '; &.default { - border-left-color: $popoverArrowBorderColor; + border-left-color: var(--popoverArrowBorderColor); } &.inverse { - border-left-color: $popoverArrowBorderInverseColor; + border-left-color: var(--popoverArrowBorderInverseColor); } } &.default { - border-left-color: $popoverArrowBorderColor; + border-left-color: var(--popoverArrowBorderColor); } &.inverse { - border-left-color: $popoverArrowBorderInverseColor; + border-left-color: var(--popoverArrowBorderInverseColor); } } diff --git a/frontend/src/InteractiveImport/Author/SelectAuthorRow.css b/frontend/src/InteractiveImport/Author/SelectAuthorRow.css index 5a7d9e41f..055b4dd5a 100644 --- a/frontend/src/InteractiveImport/Author/SelectAuthorRow.css +++ b/frontend/src/InteractiveImport/Author/SelectAuthorRow.css @@ -1,4 +1,4 @@ .author { padding: 8px; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); } diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css b/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css index d50f3a261..573b16667 100644 --- a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css +++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css @@ -35,7 +35,7 @@ } .errorMessage { - color: $dangerColor; + color: var(--dangerColor); } @media only screen and (max-width: $breakpointSmall) { diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.css b/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.css index 4a819c389..742fb904e 100644 --- a/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.css +++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.css @@ -26,5 +26,5 @@ .additionalFile { composes: row from '~Components/Table/TableRow.css'; - color: $disabledColor; + color: var(--disabledColor); } diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css b/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css index 941988144..bf4351181 100644 --- a/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css +++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css @@ -3,5 +3,5 @@ margin: -8px 0; width: 100%; height: 25px; - border: 2px dashed $dangerColor; + border: 2px dashed var(--dangerColor); } diff --git a/frontend/src/Organize/OrganizePreviewRow.css b/frontend/src/Organize/OrganizePreviewRow.css index 1b3c8ca47..18592cf2e 100644 --- a/frontend/src/Organize/OrganizePreviewRow.css +++ b/frontend/src/Organize/OrganizePreviewRow.css @@ -2,7 +2,7 @@ display: flex; margin-bottom: 5px; padding: 5px 0; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); &:last-of-type { margin-bottom: 0; diff --git a/frontend/src/Retag/RetagPreviewRow.css b/frontend/src/Retag/RetagPreviewRow.css index e59b03f19..771f3c486 100644 --- a/frontend/src/Retag/RetagPreviewRow.css +++ b/frontend/src/Retag/RetagPreviewRow.css @@ -2,7 +2,7 @@ display: flex; margin-bottom: 5px; padding: 5px 0; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); &:last-of-type { margin-bottom: 0; diff --git a/frontend/src/Search/AddNewItem.css b/frontend/src/Search/AddNewItem.css index 7c558d6d0..d587bfbb8 100644 --- a/frontend/src/Search/AddNewItem.css +++ b/frontend/src/Search/AddNewItem.css @@ -6,12 +6,12 @@ .searchIconContainer { width: 58px; height: 46px; - border: 1px solid $inputBorderColor; + border: 1px solid var(--inputBorderColor); border-right: none; border-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; - background-color: #edf1f2; + background-color: var(--searchIconContainerBackgroundColor); text-align: center; line-height: 46px; } @@ -25,7 +25,7 @@ } .clearLookupButton { - border: 1px solid $inputBorderColor; + border: 1px solid var(--inputBorderColor); border-left: none; border-top-right-radius: 4px; border-bottom-right-radius: 4px; diff --git a/frontend/src/Search/Author/AddNewAuthorModalContent.css b/frontend/src/Search/Author/AddNewAuthorModalContent.css index a7dde074a..cebe84803 100644 --- a/frontend/src/Search/Author/AddNewAuthorModalContent.css +++ b/frontend/src/Search/Author/AddNewAuthorModalContent.css @@ -4,7 +4,7 @@ .year { margin-left: 5px; - color: $disabledColor; + color: var(--disabledColor); } .poster { @@ -24,7 +24,7 @@ .disambiguation { margin-bottom: 20px; - color: $disabledColor; + color: var(--disabledColor); font-weight: 300; font-size: 20px; } diff --git a/frontend/src/Search/Author/AddNewAuthorSearchResult.css b/frontend/src/Search/Author/AddNewAuthorSearchResult.css index d8266c734..684e83bad 100644 --- a/frontend/src/Search/Author/AddNewAuthorSearchResult.css +++ b/frontend/src/Search/Author/AddNewAuthorSearchResult.css @@ -9,11 +9,12 @@ .underlay { @add-mixin cover; - background-color: $white; + background-color: var(--addSeriesBackgroundColor); transition: background 500ms; &:hover { - background-color: #eaf2ff; + background-color: var(--pageBackground); + box-shadow: 0 0 12px var(--black); color: inherit; text-decoration: none; } @@ -54,7 +55,7 @@ .year { margin-left: 10px; - color: $disabledColor; + color: var(--disabledColor); } .icons { @@ -70,7 +71,7 @@ margin-top: -4px; margin-left: auto; - color: $textColor; + color: var(--textColor); } .mbLinkIcon { diff --git a/frontend/src/Search/Book/AddNewBookModalContent.css b/frontend/src/Search/Book/AddNewBookModalContent.css index 4377f888c..f9b936755 100644 --- a/frontend/src/Search/Book/AddNewBookModalContent.css +++ b/frontend/src/Search/Book/AddNewBookModalContent.css @@ -30,7 +30,7 @@ .disambiguation { margin-bottom: 20px; - color: $disabledColor; + color: var(--disabledColor); font-weight: 300; font-size: 20px; } @@ -60,9 +60,9 @@ .bookType { margin-bottom: 20px; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--white); &:last-of-type { margin-bottom: 0; diff --git a/frontend/src/Search/Book/AddNewBookSearchResult.css b/frontend/src/Search/Book/AddNewBookSearchResult.css index 9d15dc297..50e15dfb4 100644 --- a/frontend/src/Search/Book/AddNewBookSearchResult.css +++ b/frontend/src/Search/Book/AddNewBookSearchResult.css @@ -9,13 +9,15 @@ .underlay { @add-mixin cover; - background-color: $white; + background-color: var(--addSeriesBackgroundColor); transition: background 500ms; &:hover { - background-color: #eaf2ff; + background-color: var(--pageBackground); + box-shadow: 0 0 12px var(--black); color: inherit; text-decoration: none; + transition: all 200ms ease-in; } } @@ -59,7 +61,7 @@ .year { margin-left: 10px; - color: $disabledColor; + color: var(--disabledColor); } .icons { @@ -75,7 +77,7 @@ margin-top: -4px; margin-left: auto; - color: $textColor; + color: var(--textColor); } .mbLinkIcon { diff --git a/frontend/src/Settings/AdvancedSettingsButton.css b/frontend/src/Settings/AdvancedSettingsButton.css index 5f0d3b9f2..f08bdc017 100644 --- a/frontend/src/Settings/AdvancedSettingsButton.css +++ b/frontend/src/Settings/AdvancedSettingsButton.css @@ -19,13 +19,13 @@ } .indicatorBackground { - color: $themeDarkColor; + color: var(--themeDarkColor); } .enabled { - color: $successColor; + color: var(--successColor); } .disabled { - color: $dangerColor; + color: var(--dangerColor); } diff --git a/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.css b/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.css index 81b4f1510..5f650aaf9 100644 --- a/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.css +++ b/frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.css @@ -6,15 +6,15 @@ .addDownloadClient { composes: downloadClient from '~./DownloadClient.css'; - background-color: $cardAlternateBackgroundColor; - color: $gray; + background-color: var(--cardAlternateBackgroundColor); + color: var(--gray); text-align: center; } .center { display: inline-block; padding: 5px 20px 0; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--cardCenterBackgroundColor); } diff --git a/frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMapping.css b/frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMapping.css index 13f35bed4..4db0b47ac 100644 --- a/frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMapping.css +++ b/frontend/src/Settings/DownloadClients/RemotePathMappings/RemotePathMapping.css @@ -3,7 +3,7 @@ align-items: stretch; margin-bottom: 10px; height: 30px; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); line-height: 30px; } diff --git a/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.css b/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.css index 0b9712140..d42fdd133 100644 --- a/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.css +++ b/frontend/src/Settings/ImportLists/ImportListExclusions/ImportListExclusion.css @@ -3,7 +3,7 @@ align-items: stretch; margin-bottom: 10px; height: 30px; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); line-height: 30px; } diff --git a/frontend/src/Settings/ImportLists/ImportLists/ImportLists.css b/frontend/src/Settings/ImportLists/ImportLists/ImportLists.css index 3db4e69d6..e704fc568 100644 --- a/frontend/src/Settings/ImportLists/ImportLists/ImportLists.css +++ b/frontend/src/Settings/ImportLists/ImportLists/ImportLists.css @@ -6,15 +6,15 @@ .addList { composes: list from '~./ImportList.css'; - background-color: $cardAlternateBackgroundColor; - color: $gray; + background-color: var(--cardAlternateBackgroundColor); + color: var(--gray); text-align: center; } .center { display: inline-block; padding: 5px 20px 0; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--cardCenterBackgroundColor); } diff --git a/frontend/src/Settings/Indexers/Indexers/Indexers.css b/frontend/src/Settings/Indexers/Indexers/Indexers.css index bf2e72ba4..16597d0e0 100644 --- a/frontend/src/Settings/Indexers/Indexers/Indexers.css +++ b/frontend/src/Settings/Indexers/Indexers/Indexers.css @@ -6,15 +6,15 @@ .addIndexer { composes: indexer from '~./Indexer.css'; - background-color: $cardAlternateBackgroundColor; - color: $gray; + background-color: var(--cardAlternateBackgroundColor); + color: var(--gray); text-align: center; } .center { display: inline-block; padding: 5px 20px 0; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--cardCenterBackgroundColor); } diff --git a/frontend/src/Settings/MediaManagement/Naming/NamingModal.css b/frontend/src/Settings/MediaManagement/Naming/NamingModal.css index c178d82cb..f65bed4df 100644 --- a/frontend/src/Settings/MediaManagement/Naming/NamingModal.css +++ b/frontend/src/Settings/MediaManagement/Naming/NamingModal.css @@ -16,3 +16,20 @@ margin-left: 10px; width: 200px; } + +.footNote { + display: flex; + color: var(--helpTextColor); + + .icon { + margin-top: 3px; + margin-right: 5px; + padding: 2px; + } + + code { + padding: 0 1px; + border: 1px solid var(--borderColor); + background-color: #f7f7f7; + } +} diff --git a/frontend/src/Settings/MediaManagement/Naming/NamingOption.css b/frontend/src/Settings/MediaManagement/Naming/NamingOption.css index d9f865936..b692362fb 100644 --- a/frontend/src/Settings/MediaManagement/Naming/NamingOption.css +++ b/frontend/src/Settings/MediaManagement/Naming/NamingOption.css @@ -3,7 +3,7 @@ align-items: center; flex-wrap: wrap; margin: 3px; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); &:hover { .token { @@ -27,7 +27,7 @@ .token { flex: 0 0 50%; padding: 6px 16px; - background-color: #eee; + background-color: var(--popoverTitleBackgroundColor); font-family: $monoSpaceFontFamily; } @@ -37,7 +37,12 @@ align-self: stretch; flex: 0 0 50%; padding: 6px 16px; - background-color: #ddd; + background-color: var(--popoverBodyBackgroundColor); + + .footNote { + padding: 2px; + color: #aaa; + } } .lower { diff --git a/frontend/src/Settings/MediaManagement/RootFolder/RootFolders.css b/frontend/src/Settings/MediaManagement/RootFolder/RootFolders.css index 6ecc1572c..3b3bcc17a 100644 --- a/frontend/src/Settings/MediaManagement/RootFolder/RootFolders.css +++ b/frontend/src/Settings/MediaManagement/RootFolder/RootFolders.css @@ -6,15 +6,15 @@ .addRootFolder { composes: rootFolder from '~./RootFolder.css'; - background-color: $cardAlternateBackgroundColor; - color: $gray; + background-color: var(--cardAlternateBackgroundColor); + color: var(--gray); text-align: center; } .center { display: inline-block; padding: 5px 20px 0; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--cardCenterBackgroundColor); } diff --git a/frontend/src/Settings/Notifications/Notifications/Notifications.css b/frontend/src/Settings/Notifications/Notifications/Notifications.css index 11ea6e11f..986226ad8 100644 --- a/frontend/src/Settings/Notifications/Notifications/Notifications.css +++ b/frontend/src/Settings/Notifications/Notifications/Notifications.css @@ -6,15 +6,15 @@ .addNotification { composes: notification from '~./Notification.css'; - background-color: $cardAlternateBackgroundColor; - color: $gray; + background-color: var(--cardAlternateBackgroundColor); + color: var(--gray); text-align: center; } .center { display: inline-block; padding: 5px 20px 0; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--cardCenterBackgroundColor); } diff --git a/frontend/src/Settings/Profiles/Delay/DelayProfile.css b/frontend/src/Settings/Profiles/Delay/DelayProfile.css index 238742efd..e2d6cd199 100644 --- a/frontend/src/Settings/Profiles/Delay/DelayProfile.css +++ b/frontend/src/Settings/Profiles/Delay/DelayProfile.css @@ -3,7 +3,7 @@ align-items: stretch; margin-bottom: 10px; height: 30px; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); line-height: 30px; } diff --git a/frontend/src/Settings/Profiles/Metadata/MetadataProfiles.css b/frontend/src/Settings/Profiles/Metadata/MetadataProfiles.css index 87ae2f44b..f5b69a80e 100644 --- a/frontend/src/Settings/Profiles/Metadata/MetadataProfiles.css +++ b/frontend/src/Settings/Profiles/Metadata/MetadataProfiles.css @@ -6,8 +6,8 @@ .addMetadataProfile { composes: metadataProfile from '~./MetadataProfile.css'; - background-color: $cardAlternateBackgroundColor; - color: $gray; + background-color: var(--cardAlternateBackgroundColor); + color: var(--gray); text-align: center; font-size: 45px; } @@ -15,7 +15,7 @@ .center { display: inline-block; padding: 5px 20px 0; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--cardCenterBackgroundColor); } diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css b/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css index bf54fedc2..c10bcd200 100644 --- a/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css +++ b/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css @@ -4,7 +4,7 @@ width: 100%; border: 1px solid #aaa; border-radius: 4px; - background: #fafafa; + background: var(--inputBackgroundColor); &.isInGroup { border-style: dashed; diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileItemGroup.css b/frontend/src/Settings/Profiles/Quality/QualityProfileItemGroup.css index dad463b28..772bd9a80 100644 --- a/frontend/src/Settings/Profiles/Quality/QualityProfileItemGroup.css +++ b/frontend/src/Settings/Profiles/Quality/QualityProfileItemGroup.css @@ -2,10 +2,10 @@ width: 100%; border: 1px solid #aaa; border-radius: 4px; - background: #fafafa; + background: var(--inputBackgroundColor); &.editGroups { - background: #fcfcfc; + background: var(--inputBackgroundColor); } } diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfiles.css b/frontend/src/Settings/Profiles/Quality/QualityProfiles.css index 437d152d2..32dad3fac 100644 --- a/frontend/src/Settings/Profiles/Quality/QualityProfiles.css +++ b/frontend/src/Settings/Profiles/Quality/QualityProfiles.css @@ -6,8 +6,8 @@ .addQualityProfile { composes: qualityProfile from '~./QualityProfile.css'; - background-color: $cardAlternateBackgroundColor; - color: $gray; + background-color: var(--cardAlternateBackgroundColor); + color: var(--gray); text-align: center; font-size: 45px; } @@ -15,7 +15,7 @@ .center { display: inline-block; padding: 5px 20px 0; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--cardCenterBackgroundColor); } diff --git a/frontend/src/Settings/Profiles/Release/ReleaseProfiles.css b/frontend/src/Settings/Profiles/Release/ReleaseProfiles.css index 8f5a81252..9e9715e77 100644 --- a/frontend/src/Settings/Profiles/Release/ReleaseProfiles.css +++ b/frontend/src/Settings/Profiles/Release/ReleaseProfiles.css @@ -6,15 +6,15 @@ .addReleaseProfile { composes: releaseProfile from '~./ReleaseProfile.css'; - background-color: $cardAlternateBackgroundColor; - color: $gray; + background-color: var(--cardAlternateBackgroundColor); + color: var(--gray); text-align: center; } .center { display: inline-block; padding: 5px 20px 0; - border: 1px solid $borderColor; + border: 1px solid var(--borderColor); border-radius: 4px; - background-color: $white; + background-color: var(--cardCenterBackgroundColor); } diff --git a/frontend/src/Settings/Quality/Definition/QualityDefinition.css b/frontend/src/Settings/Quality/Definition/QualityDefinition.css index 134e14d0d..f9d303498 100644 --- a/frontend/src/Settings/Quality/Definition/QualityDefinition.css +++ b/frontend/src/Settings/Quality/Definition/QualityDefinition.css @@ -4,7 +4,7 @@ margin: 5px 0; padding-top: 5px; height: 45px; - border-top: 1px solid $borderColor; + border-top: 1px solid var(--borderColor); } .quality, @@ -28,7 +28,7 @@ top: 9px; margin: 0 5px; height: 3px; - background-color: $sliderAccentColor; + background-color: var(--sliderAccentColor); box-shadow: 0 0 0 #000; &:nth-child(odd) { @@ -41,9 +41,9 @@ z-index: 0 !important; width: 18px; height: 18px; - border: 3px solid $sliderAccentColor; + border: 3px solid var(--sliderAccentColor); border-radius: 50%; - background-color: $white; + background-color: var(--white); text-align: center; cursor: pointer; } diff --git a/frontend/src/Settings/Quality/Definition/QualityDefinitions.css b/frontend/src/Settings/Quality/Definition/QualityDefinitions.css index 9f4afbe0e..3da40c624 100644 --- a/frontend/src/Settings/Quality/Definition/QualityDefinitions.css +++ b/frontend/src/Settings/Quality/Definition/QualityDefinitions.css @@ -25,7 +25,7 @@ .sizeLimitHelpText { max-width: 500px; - color: $helpTextColor; + color: var(--helpTextColor); } @media only screen and (max-width: $breakpointSmall) { diff --git a/frontend/src/Settings/Settings.css b/frontend/src/Settings/Settings.css index 38e88e67f..ef69e9674 100644 --- a/frontend/src/Settings/Settings.css +++ b/frontend/src/Settings/Settings.css @@ -2,7 +2,7 @@ composes: link from '~Components/Link/Link.css'; border-bottom: 1px solid #e5e5e5; - color: #3a3f51; + color: var(--textColor); font-size: 21px; &:hover { @@ -14,5 +14,5 @@ .summary { margin-top: 10px; margin-bottom: 30px; - color: $dimColor; + color: var(--helpTextColor); } diff --git a/frontend/src/Settings/Tags/Details/TagDetailsModalContent.css b/frontend/src/Settings/Tags/Details/TagDetailsModalContent.css index d11136863..75b157063 100644 --- a/frontend/src/Settings/Tags/Details/TagDetailsModalContent.css +++ b/frontend/src/Settings/Tags/Details/TagDetailsModalContent.css @@ -10,7 +10,7 @@ .restriction { margin-bottom: 5px; padding-bottom: 5px; - border-bottom: 1px solid $borderColor; + border-bottom: 1px solid var(--borderColor); &:last-child { margin: 0; diff --git a/frontend/src/Settings/UI/UISettings.js b/frontend/src/Settings/UI/UISettings.js index 86ab2a2ce..9bdbcbab4 100644 --- a/frontend/src/Settings/UI/UISettings.js +++ b/frontend/src/Settings/UI/UISettings.js @@ -10,6 +10,8 @@ import PageContent from 'Components/Page/PageContent'; import PageContentBody from 'Components/Page/PageContentBody'; import { inputTypes } from 'Helpers/Props'; import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector'; +import themes from 'Styles/Themes'; +import titleCase from 'Utilities/String/titleCase'; import translate from 'Utilities/String/translate'; export const firstDayOfWeekOptions = [ @@ -61,6 +63,8 @@ class UISettings extends Component { } = this.props; const uiLanguages = languages.filter((item) => item.value !== 'Original'); + const themeOptions = Object.keys(themes) + .map((theme) => ({ key: theme, value: titleCase(theme) })); return ( @@ -182,9 +186,19 @@ class UISettings extends Component { legend={translate('Style')} > - - {translate('EnableColorImpairedMode')} - + Theme + + + + + Enable Color-Impaired Mode GetValue("LogLevel", "info"); public string ConsoleLogLevel => GetValue("ConsoleLogLevel", string.Empty, persist: false); + public string PostgresHost => _postgresOptions?.Host ?? GetValue("PostgresHost", string.Empty, persist: false); public string PostgresUser => _postgresOptions?.User ?? GetValue("PostgresUser", string.Empty, persist: false); public string PostgresPassword => _postgresOptions?.Password ?? GetValue("PostgresPassword", string.Empty, persist: false); @@ -203,6 +205,8 @@ namespace NzbDrone.Core.Configuration public string PostgresLogDb => _postgresOptions?.LogDb ?? GetValue("PostgresLogDb", "readarr-log", persist: false); public string PostgresCacheDb => _postgresOptions?.CacheDb ?? GetValue("PostgresCacheDb", "readarr-cache", persist: false); public int PostgresPort => (_postgresOptions?.Port ?? 0) != 0 ? _postgresOptions.Port : GetValueInt("PostgresPort", 5432, persist: false); + + public string Theme => GetValue("Theme", "light", persist: false); public bool LogSql => GetValueBoolean("LogSql", false, persist: false); public int LogRotate => GetValueInt("LogRotate", 50, persist: false); public bool FilterSentryEvents => GetValueBoolean("FilterSentryEvents", true, persist: false); diff --git a/src/Readarr.Api.V1/Config/ConfigController.cs b/src/Readarr.Api.V1/Config/ConfigController.cs index 6c60f2c9d..49fa2edde 100644 --- a/src/Readarr.Api.V1/Config/ConfigController.cs +++ b/src/Readarr.Api.V1/Config/ConfigController.cs @@ -10,7 +10,7 @@ namespace Readarr.Api.V1.Config public abstract class ConfigController : RestController where TResource : RestResource, new() { - private readonly IConfigService _configService; + protected readonly IConfigService _configService; protected ConfigController(IConfigService configService) { @@ -32,7 +32,7 @@ namespace Readarr.Api.V1.Config } [RestPutById] - public ActionResult SaveConfig(TResource resource) + public virtual ActionResult SaveConfig(TResource resource) { var dictionary = resource.GetType() .GetProperties(BindingFlags.Instance | BindingFlags.Public) diff --git a/src/Readarr.Api.V1/Config/UiConfigController.cs b/src/Readarr.Api.V1/Config/UiConfigController.cs index cc028ea90..e427bfd59 100644 --- a/src/Readarr.Api.V1/Config/UiConfigController.cs +++ b/src/Readarr.Api.V1/Config/UiConfigController.cs @@ -1,4 +1,8 @@ +using System.Linq; +using System.Reflection; +using Microsoft.AspNetCore.Mvc; using NzbDrone.Core.Configuration; +using NzbDrone.Http.REST.Attributes; using Readarr.Http; namespace Readarr.Api.V1.Config @@ -6,14 +10,30 @@ namespace Readarr.Api.V1.Config [V1ApiController("config/ui")] public class UiConfigController : ConfigController { - public UiConfigController(IConfigService configService) + private readonly IConfigFileProvider _configFileProvider; + + public UiConfigController(IConfigFileProvider configFileProvider, IConfigService configService) : base(configService) { + _configFileProvider = configFileProvider; + } + + [RestPutById] + public override ActionResult SaveConfig(UiConfigResource resource) + { + var dictionary = resource.GetType() + .GetProperties(BindingFlags.Instance | BindingFlags.Public) + .ToDictionary(prop => prop.Name, prop => prop.GetValue(resource, null)); + + _configFileProvider.SaveConfigDictionary(dictionary); + _configService.SaveConfigDictionary(dictionary); + + return Accepted(resource.Id); } protected override UiConfigResource ToResource(IConfigService model) { - return UiConfigResourceMapper.ToResource(model); + return UiConfigResourceMapper.ToResource(_configFileProvider, model); } } } diff --git a/src/Readarr.Api.V1/Config/UiConfigResource.cs b/src/Readarr.Api.V1/Config/UiConfigResource.cs index 3227a8737..ea00e5f75 100644 --- a/src/Readarr.Api.V1/Config/UiConfigResource.cs +++ b/src/Readarr.Api.V1/Config/UiConfigResource.cs @@ -17,11 +17,12 @@ namespace Readarr.Api.V1.Config public bool EnableColorImpairedMode { get; set; } public int UILanguage { get; set; } + public string Theme { get; set; } } public static class UiConfigResourceMapper { - public static UiConfigResource ToResource(IConfigService model) + public static UiConfigResource ToResource(IConfigFileProvider config, IConfigService model) { return new UiConfigResource { @@ -35,6 +36,8 @@ namespace Readarr.Api.V1.Config EnableColorImpairedMode = model.EnableColorImpairedMode, UILanguage = model.UILanguage, + + Theme = config.Theme }; } } diff --git a/src/Readarr.Http/Frontend/InitializeJsController.cs b/src/Readarr.Http/Frontend/InitializeJsController.cs index 35f90c63d..bfb283815 100644 --- a/src/Readarr.Http/Frontend/InitializeJsController.cs +++ b/src/Readarr.Http/Frontend/InitializeJsController.cs @@ -50,6 +50,7 @@ namespace Readarr.Http.Frontend builder.AppendLine($" release: '{BuildInfo.Release}',"); builder.AppendLine($" version: '{BuildInfo.Version.ToString()}',"); builder.AppendLine($" instanceName: '{_configFileProvider.InstanceName.ToString()}',"); + builder.AppendLine($" theme: '{_configFileProvider.Theme.ToString()}',"); builder.AppendLine($" branch: '{_configFileProvider.Branch.ToLower()}',"); builder.AppendLine($" analytics: {_analyticsService.IsEnabled.ToString().ToLowerInvariant()},"); builder.AppendLine($" userHash: '{HashUtil.AnonymousToken()}',");