Zamiana koloru tła

0

Chcę zrobić na stronie możliwość wyboru motywu (ciemny/jasny) i napisałem na razie coś takiego

function changeTheme(){
   var body = document.body
   var root = document.documentElement
   if(body.style.background == root.style.getPropertyValue('--button-number-color-I')){
       body.style.background = root.style.getPropertyValue('--button-number-color-II')
       body.style.color = root.style.getPropertyValue('--button-number-color-I')
   }else{
   }
}

Nie mam zielonego pojęcia dlaczego ale nie działa

1
  1. Czy są jakieś uboczne efekty wizualne? (= czy wizualnie zmienia się coś poza tym, co chciałeś, żeby się zmieniło)
  2. Czy są jakieś komunikaty w konsoli przeglądarki? (o typach zarówno "info", "warning", jak i "error")
0

@Silv: Ok
Dzięki za radę :)

1

Jeszcze szybki update:
Jak dodam alert'a na koniec if'a:

function changeTheme(){
    var body = document.body
    var root = document.documentElement
    if(body.style.background == root.style.getPropertyValue('--button-number-color-I')){
        body.style.background = root.style.getPropertyValue('--button-number-color-II')
        body.style.color = root.style.getPropertyValue('--button-number-color-I')
        alert('a')
    }else{

    }
}

to pokazuje alert

1

Dość dużo możliwości; tak żeby ograniczyć ich liczbę:

  1. Jaką wartość ma body.style.background?
  2. Jaką wartość ma root.style.getPropertyValue('--button-number-color-II')?

UPDATE: Poprawiłem – chodzi mi o wartość dla właściwości --button-number-color-I (a nie --button-number-color-II).

UPDATE2: A nie, jednak było dobrze. :P Przeoczenie.

0
  1. Według js (alert(body.style.background)) żadną, według css #a9a9a9
  2. Według js (alert(root.style.getPropertyValue('--button-number-color-II'))) żadną, według css #222222
    Dosłownie przy alercie pokazywało mi się: "Komunikat z bieżącej strony" i tyle
1

Co to znaczy "wartość według CSS"?

Lepiej niż za pomocą funkcji alert możesz wypisywać za pomocą funkcji console.debug lub console.log do konsoli przeglądarki. Wtedy zawsze coś się pokaże.

0

  1. Chodziło mi o wartość w custom property w css

  2. No w sumie :)

UPDATE: console.log nic nie dał, dalej pustka

4 
<body>
   <button>Test</button>
</body>

button {
  color: red;
}

.dark {
   background: #333;
}

.dark button {
   background: #000;
}

function toggleThemeMode() {
    document.body.classList.toggle('dark');
}

Nie styluj za pomocą JavaScript, do stylów służy CSS.

0

@Markuz: Racja
Bardzo dziękuję za pomoc

@Silv: Nawet myślałem o literówce ale sprawdziłem 211123123123131 razy i nic nie znalazłem
Wrócę do problemu jutro

0

Powodzenia. :) Może pomoże, jak dasz cały kod (HTML + CSS + JS).

3

1). background jest kombosem łączącym kilka różnych wartości, jak chcesz pobrać kolor, używaj:
body.style.backgroundColor

2). body.style.backgroundColor pozwoli ci pobrać jedynie kolor zadeklarowany inlinowo, czyli np: <body style="background-color:blue;">, czego przeważnie się nie robi,

3). żeby pobrać faktyczny kolor elementu, użyj:
styl = window.getComputedStyle(body),
kolor = styl.getPropertyValue('color');
dostaniesz wartość w postaci rgb(RRR, GGG, BBB)

4). getPropertyValue działa w ogóle inaczej, niż ci się wydaje:
https://www.w3schools.com/jsref/met_cssstyle_getpropertyvalue.asp

A w ogóle to nie czytaj kolorów, tylko sprawdzaj przypisaną aktualnie klasę i operuj na tych klasach:
https://www.w3schools.com/jsref/prop_element_classlist.asp
contains
add remove toggle

1 użytkowników online, w tym zalogowanych: 0, gości: 1