View source for RuneScape:Theme

<templatestyles src="RuneScape:Theme/styles.css" />
{{External|rs}}
{{Incomplete|No section on element/box styles/wiki's identity/name (are we OSRS Wiki or Old School RuneScape Wiki?)}}
{{shortcut|RS:THEME|RS:SKIN}}
This page contains information about the '''look of the Old School RuneScape Wiki'''.

==Identity==
<div style="display: flex; margin: 2em 0; justify-content: center">
    <div style="width: 250px; height: 250px; padding: 20px; margin-right: 2em; background: #605443;">[[File:Old School RuneScape Wiki logo white.svg|250px|center]]</div>
    <div style="width: 250px; height: 250px; padding: 20px; background: #c0a886">[[File:Old School RuneScape Wiki logo colour.svg|250px|center]]</div>
</div>
The wiki's identity includes the logo, the name, and any word, phrase, image or other designation that identifies the wiki and its content. The Old School RuneScape Wiki logo, shown above, is the symbol of the wiki. The logo is set in [https://fonts.google.com/specimen/Cinzel+Decorative Cinzel Decorative] and should only use the base colors shown below.

==Colours==
<div class="color-container">

<div class="color-column">
    <h3>Body</h3>
    <div class="color-group dark" style="background: #94866d;">
        <p class="variable">--body-border</p>
        <p class="hexcode">#94866d</p>
    </div>
    <div class="color-group" style="background: #b8a282;">
        <p class="variable">--body-dark</p>
        <p class="hexcode">#b8a282</p>
    </div>
    <div class="color-group" style="background: #d0bd97;">
        <p class="variable">--body-mid</p>
        <p class="hexcode">#d0bd97</p>
    </div>
    <div class="color-group" style="background: #d8ccb4;">
        <p class="variable">--body-light</p>
        <p class="hexcode">#d8ccb4</p>
    </div>
    <div class="color-group" style="background: #e2dbc8;">
        <p class="variable">--body-main</p>
        <p class="hexcode">#e2dbc8</p>
    </div>
        <div class="color-group" style="background: #c0a886;">
        <p class="variable">--body-background-color</p>
        <p class="hexcode">#c0a886</p>
    </div>
</div>

<div class="color-column">
    <h3>Buttons and links</h3>    
    <div class="color-group dark" style="background: #3c352a;;">
        <p class="variable">--button-border</p>
        <p class="hexcode">#3c352a;</p>
    </div>
    <div class="color-group dark" style="background: #18140c;">
        <p class="variable">--button-dark</p>
        <p class="hexcode">#18140c</p>
    </div>
    <div class="color-group dark" style="background: #3a301d;">
        <p class="variable">--button-light</p>
        <p class="hexcode">#3a301d</p>
    </div>
    <div class="color-group dark" style="background: #605443;">
        <p class="variable">--osrsw-brown</p>
        <p class="hexcode">#605443</p>
    </div>
    <div class="color-group dark" style="background: #936039;">
        <p class="variable">--link-color</p>
        <p class="hexcode">#936039</p>
    </div>
    <div class="color-group dark" style="background: #52351e;">
        <p class="variable">--background-link-color</p>
        <p class="hexcode">#52351e</p>
    </div>
</div>

<div class="color-column">
    <h3>Gray</h3>
    <div class="color-group dark" style="background: #333333;">
        <p class="variable">@mineshaft</p>
        <p class="hexcode">#333333</p>
    </div>
    <div class="color-group dark" style="background: #4c4c4c;">
        <p class="variable">@tundora</p>
        <p class="hexcode">#4c4c4c</p>
    </div>
    <div class="color-group dark" style="background: #777777;">
        <p class="variable">@boulder</p>
        <p class="hexcode">#777777</p>
    </div>
    <div class="color-group" style="background: #cccccc;">
        <p class="variable">@silver</p>
        <p class="hexcode">#cccccc</p>
    </div>
    <div class="color-group" style="background: #eeeeee">
        <p class="variable">@gallery</p>
        <p class="hexcode">#eeeeee</p>
    </div>
    <div class="color-group" style="background: #f9f9f9;">
        <p class="variable">@alabaster</p>
        <p class="hexcode">#f9f9f9</p>
    </div>
</div>
</div>

===Status===
<div class="color-container">

<div class="color-column">
    <div class="color-group dark" style="background: #801c13;">
        <p class="variable">@mocaccino</p>
        <p class="hexcode">#801c13</p>
    </div>
    <div class="color-group dark" style="background: #9f261e;">
        <p class="variable">@old-brick</p>
        <p class="hexcode">#9f261e</p>
    </div>
    <div class="color-group dark" style="background: #ee4231;">
        <p class="variable">@flamingo</p>
        <p class="hexcode">#ee4231</p>
    </div>
    <div class="color-group" style="background: #fbc0ba;">
        <p class="variable">@apricot-peach</p>
        <p class="hexcode">#fbc0ba</p>
    </div>
    <div class="color-group" style="background: #feecea;">
        <p class="variable">@bridesmaid</p>
        <p class="hexcode">#feecea</p>
    </div>
</div>

<div class="color-column">
    <div class="color-group dark" style="background: #7a3f08;">
        <p class="variable">@antique-bronze</p>
        <p class="hexcode">#7a3f08</p>
    </div>
    <div class="color-group dark" style="background: #b55e0c;">
        <p class="variable">@korma</p>
        <p class="hexcode">#b55e0c</p>
    </div>
    <div class="color-group dark" style="background: #f7861b;">
        <p class="variable">@ecstasy</p>
        <p class="hexcode">#f7861b</p>
    </div>
    <div class="color-group" style="background: #fbcfa6;">
        <p class="variable">@corvette</p>
        <p class="hexcode">#fbcfa6</p>
    </div>
    <div class="color-group" style="background: #fef0e4;">
        <p class="variable">@lace</p>
        <p class="hexcode">#fef0e4</p>
    </div>
</div>

<div class="color-column">
    <div class="color-group dark" style="background: #786300;">
        <p class="variable">@cinnamon</p>
        <p class="hexcode">#786300</p>
    </div>
    <div class="color-group dark" style="background: #a48900;">
        <p class="variable">@olive</p>
        <p class="hexcode">#a48900</p>
    </div>
    <div class="color-group" style="background: #f9d000;">
        <p class="variable">@supernova</p>
        <p class="hexcode">#f9d000</p>
    </div>
    <div class="color-group" style="background: #fcea94;">
        <p class="variable">@golden</p>
        <p class="hexcode">#fcea94</p>
    </div>
    <div class="color-group" style="background: #fef9de;">
        <p class="variable">@half-dutch</p>
        <p class="hexcode">#fef9de</p>
    </div>
</div>

<div class="color-column">
    <div class="color-group dark" style="background: #2e5e05;">
        <p class="variable">@san-felix</p>
        <p class="hexcode">#2e5e05</p>
    </div>
    <div class="color-group dark" style="background: #3c780a;">
        <p class="variable">@la-palma</p>
        <p class="hexcode">#3c780a</p>
    </div>
    <div class="color-group dark" style="background: #6bc71f;">
        <p class="variable">@lima</p>
        <p class="hexcode">#6bc71f</p>
    </div>
    <div class="color-group" style="background: #c3e8a3;">
        <p class="variable">@caper</p>
        <p class="hexcode">#c3e8a3</p>
    </div>
    <div class="color-group" style="background: #ecf8e3;">
        <p class="variable">@frost</p>
        <p class="hexcode">#ecf8e3</p>
    </div>
</div>

</div>
<div class="color-container">

<div class="color-column">
    <div class="color-group dark" style="background: #03436b;">
        <p class="variable">@regal-blue</p>
        <p class="hexcode">#03436b</p>
    </div>
    <div class="color-group dark" style="background: #0b5884;">
        <p class="variable">@venice-blue</p>
        <p class="hexcode">#0b5884</p>
    </div>
    <div class="color-group dark" style="background: #3ea6e6;">
        <p class="variable">@curious-blue</p>
        <p class="hexcode">#3ea6e6</p>
    </div>
    <div class="color-group" style="background: #aad9f5;">
        <p class="variable">@jordy-blue</p>
        <p class="hexcode">#aad9f5</p>
    </div>
    <div class="color-group" style="background: #e5f3fc;">
        <p class="variable">@tropical-blue</p>
        <p class="hexcode">#e5f3fc</p>
    </div>
</div>

<div class="color-column">
    <div class="color-group dark" style="background: #3d276b;">
        <p class="variable">@honey-flower</p>
        <p class="hexcode">#3d276b</p>
    </div>
    <div class="color-group dark" style="background: #4f348b;">
        <p class="variable">@seance</p>
        <p class="hexcode">#4f348b</p>
    </div>
    <div class="color-group dark" style="background: #855cd8;">
        <p class="variable">@medium-purple</p>
        <p class="hexcode">#855cd8</p>
    </div>
    <div class="color-group" style="background: #cebbf7;">
        <p class="variable">@perfume</p>
        <p class="hexcode">#cfc0f0</p>
    </div>
    <div class="color-group" style="background: #f0ecfa;">
        <p class="variable">@heliotrope</p>
        <p class="hexcode">#f0ecfa</p>
    </div>
</div>

<div class="color-column">
    <div class="color-group dark" style="background: #6d3662;">
        <p class="variable">@cosmic</p>
        <p class="hexcode">#6d3662</p>
    </div>
    <div class="color-group dark" style="background: #984c89;">
        <p class="variable">@cannon-pink</p>
        <p class="hexcode">#984c89</p>
    </div>
    <div class="color-group dark" style="background: #e874cf;">
        <p class="variable">@lavender</p>
        <p class="hexcode">#e874cf</p>
    </div>
    <div class="color-group" style="background: #f5c8ec;">
        <p class="variable">@cherub</p>
        <p class="hexcode">#f5c8ec</p>
    </div>
    <div class="color-group" style="background: #fceef9;">
        <p class="variable">@french-lilac</p>
        <p class="hexcode">#fceef9</p>
    </div>
</div>

<div class="color-column">
    <div class="color-group dark" style="background: #444e5a;">
        <p class="variable">@river-bed</p>
        <p class="hexcode">#444e5a</p>
    </div>
    <div class="color-group dark" style="background: #5d6773;">
        <p class="variable">@shuttle-gray</p>
        <p class="hexcode">#5d6773</p>
    </div>
    <div class="color-group dark" style="background: #949eaa;">
        <p class="variable">@gray-chateau</p>
        <p class="hexcode">#949eaa</p>
    </div>
    <div class="color-group" style="background: #e4eaee;">
        <p class="variable">@mystic</p>
        <p class="hexcode">#e4eaee</p>
    </div>
    <div class="color-group" style="background: #f9fafa;">
        <p class="variable">@black-haze</p>
        <p class="hexcode">#f9fafa</p>
    </div>
</div>

</div>

===Dark mode===
<div class="color-container">

<div class="color-column">
    <div class="color-group dark" style="background: #071022;">
        <p class="variable">@black-pearl</p>
        <p class="hexcode">#071022</p>
    </div>
    <div class="color-group dark" style="background: #172136;">
        <p class="variable">@big-stone</p>
        <p class="hexcode">#172136</p>
    </div>
    <div class="color-group dark" style="background: #222e45;">
        <p class="variable">@cloud-burst</p>
        <p class="hexcode">#222e45</p>
    </div>
    <div class="color-group dark" style="background: #313e59;">
        <p class="variable">@pickled-bluewood</p>
        <p class="hexcode">#313e59</p>
    </div>
    <div class="color-group dark" style="background: #596e96;">
        <p class="variable">@waikawa-grey</p>
        <p class="hexcode">#596e96</p>
    </div>
    <div class="color-group" style="background: #8cabe6;">
        <p class="variable">@portage</p>
        <p class="hexcode">#8cabe6</p>
    </div>
</div>

<div class="color-column">
    <div class="color-group dark" style="background: #1b1612;">
        <p class="variable">@ebony-brown</p>
        <p class="hexcode">#1b1612</p>
    </div>
    <div class="color-group dark" style="background: #28221d;">
        <p class="variable">@mocha-brown</p>
        <p class="hexcode">#28221d</p>
    </div>
    <div class="color-group dark" style="background: #312a25;">
        <p class="variable">@cacao-brown</p>
        <p class="hexcode">#312a25</p>
    </div>
    <div class="color-group dark" style="background: #3e362f;">
        <p class="variable">@sable-brown</p>
        <p class="hexcode">#3e362f</p>
    </div>
    <div class="color-group dark" style="background: #736559;">
        <p class="variable">@taupe-brown</p>
        <p class="hexcode">#736559</p>
    </div>
    <div class="color-group" style="background: #b79d7e;">
        <p class="variable">@kharid-sand</p>
        <p class="hexcode">#b79d7e</p>
    </div>
</div>

</div>

==Components==
===Typography===
Typography is used to create hierarchy and structure that guides users through information, giving them a smooth experience. The Old School RuneScape Wiki's primary typefaces are [https://fonts.google.com/specimen/PT+Serif PT Serif] for headings and [https://fonts.google.com/specimen/IBM+Plex+Sans IBM Plex Sans] for body copy.

==Skins==
By default, the Old School RuneScape Wiki is viewed with the [[mw:Vector|Vector]] skin on desktop and the [[mw:Minerva Neue|Minerva Neue]] skin on mobile devices. Users may switch to dark mode on desktop via clicking the moon icon in top right of the page, and on mobile via opening the hamburger menu to the left. 

[[RuneScape:Administrators|Administrators]] have the ability to change the wiki's theme by editing [[MediaWiki:Common.css]] (applied to all skins), [[MediaWiki:Vector.css]] (desktop theme), and [[MediaWiki:Minerva.css]] (mobile theme). These pages are compiled from {{Wp|Less (stylesheet language)|Less}} located at [[MediaWiki:Common.less]], [[MediaWiki:Vector.less]], and [[MediaWiki:Minerva.less]], respectively. Administrators should avoid editing CSS pages directly unless absolutely necessary; instead, edit the appropriate Less page. To update CSS from Less, click the "Update CSS" button next to the edit button.
<!-- mainly copy of https://runescape.wiki/w/RuneScape:Theme -->
[[Category:Old School RuneScape Wiki community]]