Brackets - How to change Highlight Color Setting of Live Preview | ライブプレビューハイライトカラー設定変更方法




Brackets Version

Release 1.12 build 1.12.0-17621 (release d3b783b99)
build timestamp: Thu Feb 01 2018 03:32:03 GMT-0800






Before Edit / 編集前

f:id:think-design:20180318120555g:plain









Problems / 問題点
  • It's hard to see padding, margin, contents.
    / 余白・マージン・コンテンツが分かりづらい。

  • Color of padding & contents disappear soon.
    / 余白とコンテンツの色が直ぐに消えてしまう









Edit "brackets.json"


Menu - Brackets - Preferences

Add following code.
/ 下記のコードを加えます。


( But it just adds only [ , ] at only [ "brackets-css-color-preview.enabled": true ] line.
/ ただし [ "brackets-css-color-preview.enabled": true ] 行は、[ , ] を加えるだけです。 )


f:id:think-design:20180318121055p:plain




   "brackets-css-color-preview.enabled": true,
  
    "livedev.remoteHighlight": {
        
        "animateStartValue": {
            "background-color": "rgba(255, 255, 120, 0.5)"
        },        

        "animateEndValue": {
            "background-color": "rgba(255, 255, 120, 0.2)",
            "opacity": 0.5,
            "border-color": "rgba(51, 51, 51, 0.5)",
            "border-style": "solid",
            "border-width": "1px"
        },
        
        "marginStyling": {
            "background-color": "rgba(0, 162, 255, 0.4)"     
        },

        "paddingStyling": {
            "background-color": "rgba(0, 170, 0, 0.3)"
        },        
        
        "showPaddingMargin": true
    }







Please save the file after add it.
/ 加えた後はファイル保存しましょう。

Then you can use soon.
/ そうすると、すぐに使えます。








After Edit - When it's Unsuccessful / 編集後 - 失敗時

It doesn't reflect it. And when Brackets restart, error message displays.
If it happens, please check comma(,) and comment line(//) etc. If there are comment too, it happens error. so please delete comment line.

反映されません。またBraketsを再起動すると、エラーが表示されます。
その時は、カンマとコメント行(//)などを確認します。
コメントがあってもエラーになります。コメント行は消しましょう。

f:id:think-design:20180318144635p:plain








After Edit - When it's Successful / 編集後 - 成功時

f:id:think-design:20180318120709g:plain








Were you successful okay?
/ 無事に成功しましたか?





When you can't remove Youtube Adult Ads / Youtubeアダルト広告が消えない時




f:id:think-design:20180313170224j:plain


Somehow Adult Ads was displayed only Youtube in Chrome. ( Safari and Other-Browser were OK. ) I searched many website page of japanese and english and I tried trouble shooter, I finally was able to remove it. So I'll report it.

なぜかChromeYoutubeページのみにアダルト広告が表示されてしまいました。 ( Safariや他のブラウザは大丈夫でした。) 日本語サイト・英語サイト多くのページをググり、 様々なトラブルシューティングを行い、最終的に消すことができましたのでここでお伝えします。




A way that was unsuccessful / 不成功に終わった方法 (T ^ T)

  • Restricted Mode : ON
    / 制限付きモード : ON
  • Delete(Clear) Browzer Data (Cookie/Cash etc)
    / キャッシュやクッキーなどの削除
  • Scan by Malwarebytes App
    / Malwarebytesアプリによるスキャン
  • Scan by AVG AntiVirus App
    / AVGウイルスアプリによるスキャン
  • Uninstall Chrome by Normally
    / 普通のChromeアンインストール
  • Uninstall Chrome by MacClean App
    / MacCleanアプリによるChromeアンインストール
  • Uninstall Chrome by AppCleaner App
    / AppCleanerアプリによるChromeアンインストール




A way that was successful / 成功した方法 (^L^)

f:id:think-design:20180313164125p:plain

It was able to disable all extensions by this.

これにより拡張機能が全て無効化されました。




Causing / 原因




As it turned out, I can't find article about chrome reset. So I'was looked into many thing and tried it, then It was successful. Well, It was good fixing it. Because it was so bother when I watch Youtube.

結果的にはChromeリセットについての記事は見つかりませんでした。 ですので色々調べて試したところ成功しました。 まあ、なんとか直って良かったです。 Youtubeを見る時、とても邪魔でしたから。




Brackets - My Favorite Best Theme オススメテーマ


OS X Style - Flat & Dark / Altaya Aydemir

f:id:think-design:20180312232226p:plain

I tried many themes, this theme is the best color for me.

様々なテーマを試してみましたが、このテーマの色合いが私の感性には一番しっくりきました。




Detail Link

github.com

Readme
Dark and flat style theme for Brackets.
Created with a color palette of iOS 7. (DEPRECATED)
 
Recommended Fonts
- Consolas (used in screenshots, 13px)
- Hack
- Menlo
- Source Code Pro
- Monaco
- Myriad Pro

How to Search in Brackets

f:id:think-design:20180313002037p:plain




etc - References ( other theme )

Brackets 1.0:テーマカラー89種類まとめ - Qiita / @qrac