mirror of
https://github.com/betaflight/betaflight-configurator.git
synced 2025-07-25 17:25:16 +03:00
Make the dark / light theme work with PWA (#3883)
Changed the way the dark-theme is loaded. Thanks to @Vitroid for the suggestion.
This commit is contained in:
Míguel Ángel Mulero Martínez
GitHub
parent
4bae72907d
commit
be0103f445
3 changed files with 891 additions and 886 deletions
|
|
@ -1,4 +1,5 @@
|
|||
&:root {
|
||||
body.dark-theme {
|
||||
|
||||
--accent: #ffbb00;
|
||||
--subtleAccent: #9c9c9c;
|
||||
--quietHeader: #bf8606;
|
||||
|
|
@ -19,46 +20,46 @@
|
|||
--hoverButton-background: #ffcc3e;
|
||||
--superSubtleAccent: #595959;
|
||||
--accentBorder: #bf8606;
|
||||
}
|
||||
.background_paper {
|
||||
background-image: url(../images/paper-dark.png);
|
||||
}
|
||||
body {
|
||||
|
||||
color: white;
|
||||
}
|
||||
&::backdrop {
|
||||
|
||||
.background_paper {
|
||||
background-image: url(../images/paper-dark.png);
|
||||
}
|
||||
|
||||
&::backdrop {
|
||||
background-image: none;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#options-window {
|
||||
}
|
||||
#options-window {
|
||||
background-color: #393b3a;
|
||||
}
|
||||
#content {
|
||||
}
|
||||
#content {
|
||||
background-color: #393b3a;
|
||||
}
|
||||
#content.logopen {
|
||||
}
|
||||
#content.logopen {
|
||||
background-color: #393b3a;
|
||||
}
|
||||
}
|
||||
|
||||
/* NOTE: need to think on how to load the dark theme with vue */
|
||||
#status-bar {
|
||||
/* NOTE: need to think on how to load the dark theme with vue */
|
||||
#status-bar {
|
||||
background-color: #414443 !important;
|
||||
>* {
|
||||
~* {
|
||||
border-left: 1px solid #9c9c9c;
|
||||
}
|
||||
}
|
||||
}
|
||||
dialog {
|
||||
}
|
||||
dialog {
|
||||
background-color: #3a3d3c;
|
||||
color: white;
|
||||
border: 1px solid #ffbb2a;
|
||||
}
|
||||
.note {
|
||||
}
|
||||
.note {
|
||||
background-color: #4e4e4e;
|
||||
color: white;
|
||||
}
|
||||
.content_toolbar {
|
||||
}
|
||||
.content_toolbar {
|
||||
background-color: #555857;
|
||||
.btn {
|
||||
a {
|
||||
|
|
@ -68,57 +69,57 @@ dialog {
|
|||
border: 1px solid #ffbb2a;
|
||||
}
|
||||
}
|
||||
}
|
||||
.gui_box {
|
||||
}
|
||||
.gui_box {
|
||||
border: 1px solid #4d4d4d;
|
||||
background-color: #393b3a;
|
||||
}
|
||||
.gui_warning {
|
||||
}
|
||||
.gui_warning {
|
||||
background: #393b3a;
|
||||
}
|
||||
.gui_note {
|
||||
}
|
||||
.gui_note {
|
||||
background: #393b3a;
|
||||
.gui_box_titlebar {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
.grey {
|
||||
}
|
||||
.grey {
|
||||
background-color: #414443;
|
||||
}
|
||||
.gui_box_bottombar {
|
||||
}
|
||||
.gui_box_bottombar {
|
||||
background-color: #393b3a;
|
||||
}
|
||||
.fixed_band {
|
||||
}
|
||||
.fixed_band {
|
||||
background-color: #393b3a;
|
||||
}
|
||||
.default_btn {
|
||||
}
|
||||
.default_btn {
|
||||
a.disabled {
|
||||
background-color: #393b3a;
|
||||
border: 1px solid #ffbb2a;
|
||||
}
|
||||
}
|
||||
.small {
|
||||
}
|
||||
.small {
|
||||
a {
|
||||
border: 1px solid #ffbb2a;
|
||||
}
|
||||
}
|
||||
.standard_input {
|
||||
}
|
||||
.standard_input {
|
||||
background: var(--boxBackground);
|
||||
color: white;
|
||||
}
|
||||
#quad-status_wrapper {
|
||||
}
|
||||
#quad-status_wrapper {
|
||||
color: #393b3a;
|
||||
}
|
||||
button {
|
||||
}
|
||||
button {
|
||||
border: 1px solid #ffbb2a;
|
||||
background-color: #ffbb2a;
|
||||
color: black;
|
||||
}
|
||||
.helpicon {
|
||||
}
|
||||
.helpicon {
|
||||
background-image: url(../images/icons/cf_icon_info_white.svg);
|
||||
opacity: 0.3;
|
||||
}
|
||||
.cf {
|
||||
}
|
||||
.cf {
|
||||
.helpicon {
|
||||
background-image: url(../images/icons/cf_icon_info_grey.svg);
|
||||
opacity: 0.4;
|
||||
|
|
@ -127,13 +128,13 @@ button {
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.gui_box_titlebar {
|
||||
}
|
||||
.gui_box_titlebar {
|
||||
.helpicon {
|
||||
background-image: url(../images/icons/cf_icon_info_grey.svg);
|
||||
}
|
||||
}
|
||||
.cf_table {
|
||||
}
|
||||
.cf_table {
|
||||
td {
|
||||
border-style: solid;
|
||||
}
|
||||
|
|
@ -144,36 +145,36 @@ button {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.noUi-pips {
|
||||
}
|
||||
.noUi-pips {
|
||||
color: var(--mutedText);
|
||||
}
|
||||
.jBox-container {
|
||||
}
|
||||
.jBox-container {
|
||||
background: #393b3a;
|
||||
color: white;
|
||||
}
|
||||
.jBox-Modal {
|
||||
}
|
||||
.jBox-Modal {
|
||||
.jBox-title {
|
||||
background: #393b3a;
|
||||
border-bottom: 1px solid #9c9c9c;
|
||||
text-shadow: 0 1px 1px #ffffff;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.jBox-Confirm {
|
||||
}
|
||||
.jBox-Confirm {
|
||||
.jBox-title {
|
||||
background: #393b3a;
|
||||
border-bottom: 1px solid #9c9c9c;
|
||||
text-shadow: 0 1px 1px #ffffff;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.jBox-pointer {
|
||||
}
|
||||
.jBox-pointer {
|
||||
&:after {
|
||||
background: #393b3a;
|
||||
}
|
||||
}
|
||||
.tab-adjustments {
|
||||
}
|
||||
.tab-adjustments {
|
||||
.adjustment {
|
||||
&:nth-child(odd) {
|
||||
background-color: #2f2f2f;
|
||||
|
|
@ -190,8 +191,8 @@ button {
|
|||
border-bottom: 1px solid #00000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-auxiliary {
|
||||
}
|
||||
.tab-auxiliary {
|
||||
.toolbox {
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -225,16 +226,16 @@ button {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.logic {
|
||||
}
|
||||
.logic {
|
||||
background-color: #3a3a3a;
|
||||
color: white;
|
||||
}
|
||||
.linkedTo {
|
||||
}
|
||||
.linkedTo {
|
||||
background-color: #3a3a3a;
|
||||
color: white;
|
||||
}
|
||||
.tab-cli {
|
||||
}
|
||||
.tab-cli {
|
||||
textarea[name='commands'] {
|
||||
&::placeholder {
|
||||
color: silver;
|
||||
|
|
@ -242,8 +243,8 @@ button {
|
|||
background: black;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.cli-textcomplete-dropdown {
|
||||
}
|
||||
.cli-textcomplete-dropdown {
|
||||
background-color: #393b3a;
|
||||
a {
|
||||
color: white;
|
||||
|
|
@ -251,8 +252,8 @@ button {
|
|||
.active {
|
||||
background-color: var(--quietHeader);
|
||||
}
|
||||
}
|
||||
.tab-configuration {
|
||||
}
|
||||
.tab-configuration {
|
||||
.gui_box {
|
||||
span {
|
||||
color: white;
|
||||
|
|
@ -266,8 +267,8 @@ button {
|
|||
background-color: #3a3a3a;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.tab-failsafe {
|
||||
}
|
||||
.tab-failsafe {
|
||||
.number {
|
||||
input {
|
||||
background-color: #3a3a3a;
|
||||
|
|
@ -308,13 +309,13 @@ button {
|
|||
.pro4 {
|
||||
background-image: url(../images/icons/cf_failsafe_procedure4-dark.svg);
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
}
|
||||
.btn {
|
||||
.disabled {
|
||||
background-color: #393b3a;
|
||||
}
|
||||
}
|
||||
.tab-firmware_flasher {
|
||||
}
|
||||
.tab-firmware_flasher {
|
||||
.build_configuration {
|
||||
.select2 {
|
||||
color: #424242;
|
||||
|
|
@ -362,8 +363,8 @@ button {
|
|||
border-bottom: solid 1px #4f4f4f;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-gps {
|
||||
}
|
||||
.tab-gps {
|
||||
.GPS_info {
|
||||
.head {
|
||||
background-color: #393b3a;
|
||||
|
|
@ -388,13 +389,13 @@ button {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
progress[value] {
|
||||
}
|
||||
progress[value] {
|
||||
&::-webkit-progress-bar {
|
||||
background-color: #393b3a;
|
||||
}
|
||||
}
|
||||
.tab-landing {
|
||||
}
|
||||
.tab-landing {
|
||||
background-color: #3e3e3e;
|
||||
background-image: url(../../images/pattern_dark.png);
|
||||
.content_mid {
|
||||
|
|
@ -410,8 +411,8 @@ progress[value] {
|
|||
content: url(../images/bf_logo_black.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-led-strip {
|
||||
}
|
||||
.tab-led-strip {
|
||||
.section {
|
||||
color: #c4c4c4;
|
||||
}
|
||||
|
|
@ -432,14 +433,14 @@ progress[value] {
|
|||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-logging {
|
||||
}
|
||||
.tab-logging {
|
||||
.speed {
|
||||
background-color: #3a3a3a;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.tab-motors {
|
||||
}
|
||||
.tab-motors {
|
||||
.gui_box {
|
||||
span {
|
||||
color: white;
|
||||
|
|
@ -500,8 +501,8 @@ progress[value] {
|
|||
stroke: #CB4B4B;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-onboard_logging {
|
||||
}
|
||||
.tab-onboard_logging {
|
||||
.regular-button.disabled {
|
||||
background-color: #393b3a;
|
||||
}
|
||||
|
|
@ -543,8 +544,8 @@ progress[value] {
|
|||
.sdcard-icon {
|
||||
background-color: #393b3a;
|
||||
}
|
||||
}
|
||||
.tab-osd {
|
||||
}
|
||||
.tab-osd {
|
||||
.display-layout {
|
||||
input.position {
|
||||
border-bottom: 1px solid red;
|
||||
|
|
@ -574,8 +575,8 @@ progress[value] {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-pid_tuning {
|
||||
}
|
||||
.tab-pid_tuning {
|
||||
.profile {
|
||||
.helpicon {
|
||||
background-image: url(../images/icons/cf_icon_info_grey.svg);
|
||||
|
|
@ -673,8 +674,11 @@ progress[value] {
|
|||
}
|
||||
.tab-container {
|
||||
>div {
|
||||
background-color: #535655;
|
||||
border-right: 1px solid #393b3a;
|
||||
|
||||
&:not(.active) {
|
||||
background-color: #535655;
|
||||
}
|
||||
}
|
||||
}
|
||||
.number {
|
||||
|
|
@ -715,35 +719,35 @@ progress[value] {
|
|||
.slidersWarning {
|
||||
background: #542415;
|
||||
}
|
||||
}
|
||||
.inputBackground {
|
||||
}
|
||||
.inputBackground {
|
||||
background-color: #3a3a3a;
|
||||
color: white;
|
||||
}
|
||||
.fancy.header {
|
||||
}
|
||||
.fancy.header {
|
||||
background-color: #393b3a;
|
||||
}
|
||||
.pid_roll {
|
||||
}
|
||||
.pid_roll {
|
||||
background-color: #A00000;
|
||||
}
|
||||
.pid_pitch {
|
||||
}
|
||||
.pid_pitch {
|
||||
background-color: #00A000;
|
||||
}
|
||||
.pid_yaw {
|
||||
}
|
||||
.pid_yaw {
|
||||
background-color: #0000A0;
|
||||
}
|
||||
.pid_mode {
|
||||
}
|
||||
.pid_mode {
|
||||
background-color: #3c3c3c;
|
||||
border-bottom: 1px solid #3c3c3c;
|
||||
color: white;
|
||||
}
|
||||
.pid_titlebar {
|
||||
}
|
||||
.pid_titlebar {
|
||||
background-color: #393b3a;
|
||||
}
|
||||
.tabarea {
|
||||
}
|
||||
.tabarea {
|
||||
background: #393b3a;
|
||||
}
|
||||
.tab-ports {
|
||||
}
|
||||
.tab-ports {
|
||||
table {
|
||||
td {
|
||||
&:first-child {
|
||||
|
|
@ -767,8 +771,8 @@ progress[value] {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-power {
|
||||
}
|
||||
.tab-power {
|
||||
.number {
|
||||
input {
|
||||
background-color: #3a3a3a;
|
||||
|
|
@ -781,8 +785,8 @@ progress[value] {
|
|||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-receiver {
|
||||
}
|
||||
.tab-receiver {
|
||||
.gui_box {
|
||||
span {
|
||||
color: white;
|
||||
|
|
@ -845,8 +849,8 @@ progress[value] {
|
|||
text {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
.tab-sensors {
|
||||
}
|
||||
.tab-sensors {
|
||||
.plot_control {
|
||||
background-color: #2f2f2f;
|
||||
select {
|
||||
|
|
@ -890,8 +894,8 @@ progress[value] {
|
|||
text {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
.tab-servos {
|
||||
}
|
||||
.tab-servos {
|
||||
table {
|
||||
th {
|
||||
background: #828885;
|
||||
|
|
@ -927,8 +931,8 @@ progress[value] {
|
|||
background-color: #393b3a;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-setup {
|
||||
}
|
||||
.tab-setup {
|
||||
#interactive_block {
|
||||
background-color: #393b3a;
|
||||
a.reset {
|
||||
|
|
@ -945,8 +949,8 @@ progress[value] {
|
|||
.dialogBuildInfo {
|
||||
background-color: #575757;
|
||||
}
|
||||
}
|
||||
.tab-transponder {
|
||||
}
|
||||
.tab-transponder {
|
||||
.text {
|
||||
.disabled {
|
||||
background-color: #393b3a;
|
||||
|
|
@ -957,34 +961,34 @@ progress[value] {
|
|||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select2-container {
|
||||
}
|
||||
.select2-container {
|
||||
.select2-selection--single {
|
||||
.select2-selection__rendered {
|
||||
background-color: #3a3a3a !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select2-selection__arrow {
|
||||
}
|
||||
.select2-selection__arrow {
|
||||
b {
|
||||
border-bottom: 1.5px solid white !important;
|
||||
border-right: 1.5px solid white !important;
|
||||
}
|
||||
}
|
||||
.select2-search--dropdown {
|
||||
}
|
||||
.select2-search--dropdown {
|
||||
background-color: #3a3a3a !important;
|
||||
.select2-search__field {
|
||||
border: 1px solid var(--subtleAccent) !important;
|
||||
background-color: #3a3a3a !important;
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
.select2-results {
|
||||
}
|
||||
.select2-results {
|
||||
>.select2-results__options {
|
||||
background-color: #3a3a3a !important;
|
||||
}
|
||||
}
|
||||
.ms-drop {
|
||||
}
|
||||
.ms-drop {
|
||||
ul {
|
||||
>li.hide-radio {
|
||||
&:focus {
|
||||
|
|
@ -995,7 +999,8 @@ progress[value] {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.invertable {
|
||||
}
|
||||
.invertable {
|
||||
filter: invert(1)
|
||||
}
|
||||
}
|
||||
|
|
@ -61,12 +61,12 @@ DarkTheme.setConfig = function (result) {
|
|||
};
|
||||
|
||||
DarkTheme.applyDark = function () {
|
||||
css_dark.forEach((el) => $(`link[href="${el}"]`).prop('disabled', false));
|
||||
$('body').addClass('dark-theme');
|
||||
this.enabled = true;
|
||||
};
|
||||
|
||||
DarkTheme.applyNormal = function () {
|
||||
css_dark.forEach((el) => $(`link[href="${el}"]`).prop('disabled', true));
|
||||
$('body').removeClass('dark-theme');
|
||||
this.enabled = false;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
<link type="text/css" rel="stylesheet" href="./node_modules/multiple-select/dist/multiple-select.min.css" media="all"/>
|
||||
<link type="text/css" rel="stylesheet" href="./components/EscDshotDirection/Styles.css" media="all"/>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="./css/dark-theme.css" media="all" disabled/>
|
||||
<link type="text/css" rel="stylesheet" href="./css/dark-theme.css" media="all"/>
|
||||
|
||||
<script type="module" src="./js/jquery.js"></script>
|
||||
<!-- TODO: probably won't need this here once everything is imported -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue