Thanks.

I like your theme a lot.

Thank you for your kind words, I'm glad you like it!

That would be a nice idea, it'll encourage users to share cool scripts and stuff.

I just updated the theme, it also works on Jisho classic (and the old forum) now. Get it at the userstyles.org link in the first post. Did I forget to style something? Just let me know :)

@Wekateka I wanted to say thank you for creating a dark theme for Jisho.org and for sharing it under Creative Commons. I have incorporated a slightly modified version of it for the Unofficial Jisho.org Chrome Extension that I have made and shared on Github. As for the changes, Chrome doesn't support @-moz-document or @document. It appears to work well for how I can implement it and it looks impressive. I'm not sure if you can create a universal CSS file (it looks like Chrome may need a userContent.css until @document is accepted) but I'd be willing to update the extension resources if you are able to. Thank you for your hard work (お疲れさまでした！).

I would be honored if you tried my extension and let me know what you thought. I've tested the extension on my Mac only and it appears to be working fine.

http://jisho.org/forum/56eaf070d5dda72227000349-unofficial-jisho-dot-org-chrome-extension-chrome-developer-mode

@Wekateka I found one small issue with the color scheme. The “Jisho 夜明け” image doesn't seem to scale well at lower dimensions (mobile device size dimensions). For example, if you run stylish and then resize your browser so that the horizontal width is much smaller (to that of mobile devices), you'll see that some of the “Jisho 夜明け” image is partially cut off horizontally and vertically. I think this has to do with "h1.logo a" in the css file. It appears to be hard-coded to use "132px 64px" for image dimensions.

To get around this for the larger width that I use (doesn't look good at width:335px), I hardcode the width and height:

h1.logo a {
/* Logo does not scale well at mobile device widths - still not pretty at width: 335px; */
width: 132px;
height: 64px;
..... }

The two dimensions where the “Jisho 夜明け” doesn't seem to scale well, as the Jisho logo size changes, are:
width: 495px; height: 560px;
width: 335px; height: 480px;

Is there a way to make the logo scale-able or responsive to device width changes? Again, thank you for making this. the Dark theme is really nice.

@Wekateka I'm not sure if you will agree with this solution but this is the additional modification I made for mobile devices concerning the "Jisho Yoake" image logo:

At the very bottom of the css file, insert:

@media screen and (max-width: 500px) { /* Mobile */
h1.logo a { // copied from above but made changes to height, width, and repeat
background: url (...) no-repeat scroll 0 0 / 88px 43px rgba(0, 0, 0, 0);
}

You can then remove any height/width modifications to the original "h1.log a" if you made a change like in my last post.

The new height and width came from the dimensions of the regular Jisho.org logo when the screen width is less than 500px.

@JBRadio Thank you very much for the feedback, I've restyled the logo to resize on smaller screens and updated the css. The new css overrides background-size only on smaller screens, this allows me to include the image's url only once. If you're concerned about file size you should adopt the same change in your version of the theme.

For me it seemed to happen at a width less than 640px though, in both Firefox and Chromium so I went with that.

I shortly looked into chrome's handling of @document and it seems to be completely unsupported. For now the theme seems to work without the separate @document definition, and I will keep this limitation in mind when I add future updates.

I've included a link to your repo on the themes description so chrome users can get the theme included with that. Thanks again for the feedback, much appreciated.

@Wekateka You're very welcome! I'm glad I could help. Your CSS solution is very clean - thank you for taking the research a step further. I really like your dark-flavored CSS theme. My eyes are also sensitive to the bright white webpages and your CSS makes a difference.

Thank you very much for mentioning me and linking my GitHub repository on your styles page! That is awesome! I have updated my modified CSS version to include the changes you made on 03/25/2016. お疲れさまでした！

@Wekateka I'm sorry but I'm a tinkerer. I've noticed that there are some elements on the Jisho.org page that clash with your current theme. Basically, there are some "background:white;" or "background: #FFFFFF;" elements that aren't modified. For example:

• When the webpage is at a mobile width, the tools connected to the search bar (Draw, Radicals, Voice) drops to the bottom-right corner in its own DOM element. When this happens, the DOM's background becomes white and clashes with the theme.

On a search results page:
- grammar block messages "... looks like an inflection of ... with these forms", have white backgrounds.
- "Show inflections" link displays a modal DOM Element with white thick white borders around the table
- "Links" under search result words displays a dropdown which has a white background.
- Also, the mouse hover color for the items in the "links" dropdown box is light grey.

I've searched for "background:white;" and "background:#FFFFFF;" in the original CSS file and created additional rules to set these values to #222. I've seen some good results but I need to compare with your CSS file to see which I don't need to set. Here is a list of classes/elements which have a white background color you may want to change. Please copy and paste into your CSS file to preview (remember to shorten width to mobile view for testing there as well) :

/* Set the following to background: #222 */

.accordion dd>.content.active, .f-dropdown, .f-dropdown.drop-right, .f-dropdown.drop-left, .f-dropdown.drop-top, .f-dropdown.content, fieldset legend, .joyride-expose-wrapper, [data-magellan-expedition], [data-magellan-expedition-clone], .pricing-table .description, .pricing-table .bullet-item, .pricing-table .cta-button, .reveal-modal, dialog, .switch label:after, .switch label:after, table, .admin_section, .add_to_list_adder, form.search .input_methods{
background-color: #222;
}

/* Little extra style */

.input_methods {
border: 1px solid #EFB26C;
}

.tabs .tab-title.active a {
background-color: #222;
color: #FFFFFF
}

.fact {
background: #222;
border: 3px solid #EFB26C;
}

@JBRadio Thank you for noticing, I am unfortunately quite busy with the company at the moment. I'll fix this later this week and update here.

@Wekateka Understandable. Just wanted to share my experience. Thank you very much for continuing to support the theme. I'll check back at a later time for your update. お疲れさまでした。

@Wekateka there's are the changes I've made along with some documentation. Please review to see if they are changes you would like to make to your version. I'm horrible at color themes so I tried to re-use colors/background-colors that you were already using.

/* Set background:white; or background:#FFFFFF; to background: #222 */

.accordion dd>.content.active, .f-dropdown, .f-dropdown.drop-right, .f-dropdown.drop-left, .f-dropdown.drop-top, .f-dropdown.content, .joyride-expose-wrapper, [data-magellan-expedition], [data-magellan-expedition-clone], .pricing-table .description, .pricing-table .bullet-item, .pricing-table .cta-button, .reveal-modal, dialog, .switch label:after, .switch label:after, .admin_section, .add_to_list_adder {
background-color: #222;
}

/* Little extra style */

.f-open-dropdown li:hover, .f-open-dropdown li:hover a {
/* On a search result page, "Links" may appear under the search result items. If you hover over it, a dropdown will appear. The dropdown's background is white but fixed above. When hovering over the dropdown item list, the hover attribute makes the background light gray. */
background-color: #905E5C;
text-shadow: 1px 1px #000000;
}

form.search .input_methods { /* Hovering mobile tools when width is less than 640px: Draw, Radical, Voice */
background-color: #222;
border: 1px solid #EFB26C;
}

.fact { /* Grammar notes box on search results page */
background: #222;
border: 3px solid #EFB26C;
}

.text_input .selected { /* Character highlight issue when you click "All" or dropdown next to input searchbar. No longer yellow over yellow text. */
background: #863B2F;
}

@JBRadio Finally, I updated! I took most of your suggestions and changed the colors a bit to better fit (my vision of) the theme. Thank you very much for your continued support of the theme! The newest version is on userstyles.org, as always.

https://userstyles.org/styles/115621/jisho

@Wekateka これはいいね！Thank you for the update and forum post! : ) I have also taken your most recent update and merged it into my extension CSS version for Chrome. After trying it on my extension (width less than 640px), I did need to make an additional modification to the CSS file. Please take a look and consider if these are changes worth updating for your style:

accordion dd>.content.active, .f-dropdown, .f-dropdown.drop-right, .f-dropdown.drop-left, .f-dropdown.drop-top, .f-dropdown.content, .joyride-expose-wrapper, [data-magellan-expedition], [data-magellan-expedition-clone], .pricing-table .description, .pricing-table .bullet-item, .pricing-table .cta-button, .reveal-modal, dialog, .switch label:after, .switch label:after, .admin_section, .add_to_list_adder {
background-color: #2a1b1b;
/* display:inline-block; / / Uncomment as it created a horizontal scrollbar in smaller widths (under 640px) */
}

.f-open-dropdown li:hover, .f-open-dropdown li:hover a {
/* On a search result page, "Links" may appear under the search result items. If you hover over it, a dropdown will appear. The dropdown's background is white but fixed above. When hovering over the dropdown item list, the hover attribute makes the background light gray. /
/ background-color: #332222; / / Original color from Jisho Yoake /
background-color: #493d3d; / color pops out a little more showing what you are hovering over */
text-shadow: 1px 1px #000000;
}

I think you noted on the Styles page or CSS file that the f-dropdown, f-open-dropdown div is too long. I created a Jisho.org discussion post for the developers as I believe external CSS cannot fix it. I think the inline style attribute in <ul> is creating an issue when the layout changes from desktop to mobile (responsive design). Also, Javascript may be creating the elements with inline style attributes on mouse over and such events.

http://jisho.org/forum/57028d17d5dda70c4700042d-jisho-dot-org-css-requests

@Wekateka Not sure if you thought about this but changing the scrollbar can also add a nice touch. This looks pretty good in the chrome extension. You may need to find the Moz equivalents to get the same effect. You'll notice the scrollbars on search results/webpages, using the Draw tool, and when using the radicals tool:

/* Extra /
form.search .scroll_indicator {
/ When using the Draw, Radical tools, there's a linear gradient used to indicate that you can
scroll to the right for more Kanji. Shows as red-to-white. */
background: none;
}

/* Update scrollbars for WebKit browser */
::-webkit-scrollbar {
width: 12px;
}

::-webkit-scrollbar-track {
background: rgba(152,110,63,1);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.7);
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background: rgba(239,178,108,1);
}

https://css-tricks.com/custom-scrollbars-in-webkit/
https://css-tricks.com/examples/WebKitScrollbars/

@JBRadio Never really thought about that, for I am accessing Jisho through linux where I have a nice dark theme with a fitting scrollbar. My wife confirms the scrollbar looks horrible on windows, I'll make changes somewhere this week. I'll also consider the changes in the post above your last one then.

Thanks for the constant feedback!

@Wekateka I hope you aren't getting tired of me yet. I really enjoy using your theme for Jisho.org. These days the internet can be used on a multitude of browsers, which can be styled in many ways if not standardly by the OS. I'm glad your wife was able to confirm the issue I was seeing on Windows. I use Google Chrome on a Mac, which is where I see it.

Playing with CSS on scrollbars, I noticed a white "scrollbar corner" square which appears when vertical and horizontal scrollbars exist together. I use the following CSS to change that.

::-webkit-scrollbar-corner {
background: transparent;
}

Found another CSS rule that I think will help the theme:

zen_bar .furigana {

/* When a prefix is searched, pink characters with furigana appear to explain the prefix and/or
   noun. The Kanji is fine but the furigana is black on a dark background. For example, search
   "新年度" in Jisho.org to notice the Prefix+Noun header with the hard-to-see furigana.
*/
color: #EF7D6C !important

}

Made some additional changes:

1.) Commented from Jisho Yoake.css

// "Play audio", "Show 3 collocations" links are forced into multiple lines.
.concept_light-status .concept_light-status_link {
width: 3.2em;
}

// Remove this to allow easier link color overrides - see link changes
a, a:visited {
color:#EF7D6C !important;
}

2.) Additional changes for small width screens

@media only screen and (max-width: 40em) {

/* "Show # collocation" hovering div takes up too much horizontal and vertical space */
.reveal-modal, dialog {
min-height: 10vh;
width: 95%;
}

}

3.) Color changes for furigana and link since the comment above

body a, body a:visited, body a:hover,
ul li a, ul li a:visited, ul li a:hover,
.f-dropdown li a, .f-dropdown li a:visited, .f-dropdown li a:hover,
a, a:hover, a:visited,
.discussions_list .discussion_thread .comment_wrapper .discussion_title h2 a {
color: #EF7D6C; }

/* Search result help colors (Furigana mo!)

Search results sometimes has additional functionality like grammar boxes or sentence identifiers
with links (prefix, verb, particles, etc.) When furigana is used, the color is black on a dark
themed background.

For examples: For example, search in Jisho.org:
新年度
一人が欠けているから出来ない。
*/

zen_bar li[data-pos] a, #zen_bar li[data-pos] span {

color: #c8c8c8; }

zen_bar .furigana {

color: #EFB26C; }

zen_bar li[data-pos=Particle] a {

/* Do NOT include span as it will likely be empty */
color: #EF7D6C;
border-bottom: 1px solid #EF7D6C; }

@JBRadio

First of all, thank you for all the suggestions until now. Unfortunately I will be really busy with my job for quite a while, and when i finally get home and made food I just don't have the やる気 to code anymore. I am not planning to stop working on this style, however I will likely not update much until the next holidays. Feel free to keep changing and improving the style, I'll happily consider all your changes when I continue.

Once again, thank you very much. People like you are what makes open source work.

@Wekateka

You're very welcome and thank you for creating the theme in the first place. : ) All these comments are possible thanks to you.

やる氣は分かりました。I'm a programmer/analyst by day and hobbyist by night. Sometimes I'd rather have a beer after work than code depending on the work day. I'll continue to add comments here about the style when it's appropriate. In case you are wondering, forum post uses MarkDown to format the forum post text. This is why the characters can be big or have a weird characteristic. ゆっくり休んでください。お疲れ様でした！

Just curious... 日本に住んでいますか。そこで働いてますか。ゴールデンウィーク来た時に、私は日本に来ています。アメリカから来ます。私の日本語はまだ悪いです。

いいえ、今はヨーロッパに住んでいます。仕事は大変忙しいから来日することがまだありません。でも絶対生きたいです！私の日本語はもあんまり良くないと思います。会話は特に下手だけど、読解は日本語能力試験３級以上なのでちょこっと誇ります。JBRadioさん、頑張ってください!

This forum really needs message editing and better code support :P

test {
$x;
}

^ That seems to work, yet is a bit ugly in my opinion. Another thing to restyle once I get back to the CSS :)

返事はありがとうございました。生活はたいてい忙しいですね。でも、ヨーロッパはいいね！いつか、ドイツに
行きたいんです。母はドイツ人ですから。Brötchenも大好きから。いろいろな国から、いろいろな食べ物を食べてみたいんです。Wekatekaさんも、頑張ってくださいね。: )

The style has received a minor update, removing the white background from the 2 new buttons in the main search bar. If this doesn't update automatically, please re-install from userstyles.org.

皆様、勉強で頑張ってください！そして目を大切にして下さいね。

Thank you :)